Adding / Editing a SuperSite 2 / PartnerSite Theme or Editing the CSS, Images, Menu Style of your SuperSite 2 / PartnerSite

Hong Kong LIBA Network Technology Co., Limited. allows you the ability to completely change the look and feel of your SuperSite 2 and PartnerSite through the use of Themes.

What is a Theme? (Anchor: theme)

A Theme is a set of design elements and color schemes that you apply to pages of a Language SuperSite 2 / PartnerSite, to give them a consistent and attractive appearance. Using a Theme is a quick and easy way to add interest to pages and give them a professional look.

A Theme allows you to alter the appearance of your SuperSite 2 / PartnerSite by modifying its:

  • Cascading Style Sheets: By tweaking individual CSS files in your Theme you can modify the fonts, colors, spacing, etc., being displayed on your SuperSite 2 / PartnerSite.

  • Images: You can replace the default set of images within your SuperSite 2 / PartnerSite Theme. This is especially useful when you have translated your SuperSite 2 / PartnerSite content and would want to display images with embedded text in that language.

  • Javascript: The style of the Javascript Menu within your PartnerSite Theme can be equally easily modified, to suit your customized PartnerSite.

The default CSS, Images and Javascript (not applicable for SuperSite 2) are automatically made available in every SuperSite 2 / PartnerSite in a Theme named MyTheme. You may customize MyTheme and use it as the default Theme for your Language SuperSite 2 / PartnerSite. Ideally, you would want to create a new Theme for every Language SuperSite 2 / PartnerSite as each Theme contains images displaying English text and you would like to translate this as well to your Language SuperSite 2 / PartnerSite.

Additional Information

Configuring multiple language support for your SuperSite 2 / PartnerSite

 

By applying a Theme you can immediately apply a pre-determined set of design elements to your SuperSite 2 / PartnerSite content. When you choose one theme to be the default theme for a particular Language SuperSite 2 / PartnerSite, the theme is applied to all existing pages and to new pages that you add later to that Language SuperSite 2 / PartnerSite.

How to Add / Modify a Theme or How do I edit the CSS, Images of my SuperSite 2 / PartnerSite and Javascript of my PartnerSite?

Adding a Theme (Anchor: atheme)

  1. Login to your SuperSite 2 / PartnerSite Admin Area. See details

  2. Under the My Themes / My PartnerSite Themes section for SuperSite 2 / PartnerSite, click the Add New Theme button.

  3. Provide a unique name for your Theme and click Create Theme.

Modifying your Theme (editing your SuperSite 2 / PartnerSite CSS, Images and PartnerSite Javascript) (Anchor: mtheme)

  • Editing CSS Files: (Anchor: css)

    You can modify the CSS files (Cascading Style Sheets) for different sections of SuperSite 2 / PartnerSite, by following the process outlined below:

    1. Login to your SuperSite 2 / PartnerSite Admin Area. See details

    2. Under the My Themes / My PartnerSite Themes section for SuperSite 2 / PartnerSite, click the Customize Theme (Images, CSS) link besides the appropriate Theme.

    3. Here, click the Edit CSS button.

    4. This interface lists various folders representing sections of your SuperSite 2 / PartnerSite. Click Browse adjacent to the section for which you wish to modify the style sheets.

    5. The following page lists all the CSS files used in the section you have chosen. Click Edit, adjacent to the CSS file you wish to modify.

    6. You will be presented with two textboxes; one on the left-hand side of the page with the title as Original Content and the other on the right-hand side with the title as Your Content. You can make the required modifications in the Your Content text box.

    7. Click the Save Changes button after completing the modification.

    Note

    If you are not satisfied with the modifications and wish to revert to the earlier setting, simply click Reset to Default from the Edit page, to restore the default settings for that file.

  • Modifying the Image Files: (Anchor: image)

    Virtually every image in SuperSite 2 / PartnerSite is customizable. Should you not find any to your liking, you can replace it at any time.

    Note

    • In order to modify an image file in SuperSite 2 / PartnerSite, you need to note its name. To get the name of the image, simply right-click on the image in your browser, and select Properties. Here, you would find the address for the image.

      Example:

      https://<prefix>.supersite2.myorderbox.com/getImage.php?src=image-name.gif, or

      https://<prefix>.partnersite.myorderbox.com/getImage.php?src=image-name.gif

      where image-name.gif is the name that you require.

    • Also, there are some image files which are a part of the CSS itself; you would not be able to retrieve the filenames in the above manner. To retrieve the names of such image files, you need to check the style sheets for the section containing the image in question, and retrieve the image file name from there.

      Additional Information

      Editing your SuperSite 2 / PartnerSite CSS files

    • Modifying the default : (Anchor: hlogo)

      Follow the process mentioned below to replace the default header logo with the logo of your company:

      1. Login to your SuperSite 2 / PartnerSite Admin Area. See details

      2. Under the My Themes / My PartnerSite Themes section for SuperSite 2 / PartnerSite, click the Edit Theme Logo link besides the appropriate Theme.

      3. Click Choose File, and select the image you wish to upload.

      4. Click Upload Image. This will replace the default image Logo.gif with the header logo of your choice.

    • Modifying any Image file: (Anchor: image-replace)

      Follow the process outlined below to replace any Image file in your SuperSite 2 / PartnerSite:

      1. Login to your SuperSite 2 / PartnerSite Admin Area. See details

      2. Under the My Themes / My PartnerSite Themes section for SuperSite 2 / PartnerSite, click the Customize Theme (Images, CSS) link besides the appropriate Theme.

      3. Click the Edit Images button.

      4. This interface lists all the images used by the SuperSite 2 / PartnerSite.

      5. In the list, look for the name of the image you wish to modify. Click Edit adjacent to it.

      6. Click Choose File, and select the image you wish to upload in place of the default.

      7. Click Upload Image. This will replace the default Image with the one you have provided, such that every page where the old image file was being displayed, would now display your uploaded image file.

    • Adding / Editing / Deleting your own images: (Anchor: ownimage)

      In addition to the default images, you can add/edit your own images as mentioned below:

      1. Login to your SuperSite 2 / PartnerSite Admin Area. See details

      2. Under the My Themes / My PartnerSite Themes section for SuperSite 2 / PartnerSite, click the Customize Theme (Images, CSS) link besides the appropriate Theme.

      3. Click the Edit Images button.

      4. Click Browse next to the MyUploadedImages folder.

        Adding your own Images

        1. Click the Add New Image button on the top right-hand corner of this page.

        2. Click Choose File, and choose the image that you want to upload. To upload more than one image at a time click the Add More Images button and click Browse.

        3. Once the image(s) is/are selected, click the Upload Image button.

        Editing Images added by you

        1. Click the Edit link next to the image you wish to modify.

        2. Click Choose File, and choose the image that you want to upload.

        3. Once the image is selected, click Upload Image button.

        Deleting Images added by you

        1. Click the Delete link next to the image you wish to delete.

        2. In the confirmation popup, click OK to delete your image.

      Note

      After uploading an image using the above tool, you would need to link it from some HTML page in your Language SuperSite 2 / PartnerSite to view the image.

  • Modifying the Style elements of the JavaScript menu: (Anchor: javascript)

    The manner in which the menu is displayed, can be modified just as easily:

    1. Login to your PartnerSite Admin Area. See details

    2. Under the My PartnerSite Themes section for PartnerSite, click the Customize Theme (Images, CSS) link besides the appropriate Theme.

    3. Click the Edit Menu Style button.

    4. Click Edit, adjacent to the Menu_style.js file.

    5. You will be presented with two textboxes; one on the left-hand side of the page with the title as Original Content and the other on the right-hand side with the title as Your Content. You can make the required modifications in the Your Content text box.

    6. Click the Save Changes button beneath after completing the modification.

    Note

    • Only the menu display can be modified through the above process.

      Additional Information

      Modifying Menu text as well as their links

    • If you are not satisfied with the modifications and wish to revert to the earlier setting, simply click Reset to Default from the Edit page, to restore the default settings for that file.

How do I apply a Theme to my Language SuperSite 2 / PartnerSite? (Anchor: tapply)

You can display your Language SuperSite 2 / PartnerSite in either the Default Theme provided by Hong Kong LIBA Network Technology Co., Limited. or use any one of the Themes you have recently added. Follow the below mentioned process to accomplish this:

  1. Login to your SuperSite 2 / PartnerSite Admin Area. See details

  2. Under the My Languages section for SuperSite 2 or My Language PartnerSites section for PartnerSite, click Manage Site besides the Language SuperSite 2 / PartnerSite, to which you wish to apply the Theme.

  3. Click the Edit Settings button. Here select the Theme you want to associate to this Language SuperSite 2 / PartnerSite, by selecting the same from the Current Theme drop-down.

  4. Click the Save button to associate the selected Theme to this Language SuperSite 2 / PartnerSite.

Note

The Theme you have selected will be visible on your Language SuperSite 2 / PartnerSite only after you have set the Site Status of this Language SuperSite 2 / PartnerSite to Live.

Additional Information

Configuring Multiple Language support to your SuperSite 2 / PartnerSite

How do I Delete a Theme? (Anchor: tdelete)

  1. Login to your SuperSite 2 / PartnerSite Admin Area. See details

  2. Before trying to delete a Theme, you have to ensure that it is not associated with any Language SuperSite 2 / PartnerSite. Notice whether that Theme is listed besides Site Theme under any Language SuperSite 2 / PartnerSite in the My Languages / My Language PartnerSites section.

    If you find any association:

    1. Click the Manage Site button besides that Language SuperSite 2 / PartnerSite.

    2. Then click the Edit Settings button and select some other Theme in the Current Theme drop-down.

    3. Click the Save button to make the modification.

    Note

    You will have to repeat the above process for each language SuperSite 2 / PartnerSite that is associated with the Theme that you wish to Delete.

  3. Once you have ensured that no Language SuperSite 2 / PartnerSite is associated with the Theme you are trying to delete, click the Delete link besides the Theme in the My Themes / My PartnerSite Themes section for SuperSite 2 / PartnerSite.

  4. Click OK to confirm deletion.