Support Knowledge Base >> Reseller Guides >> SuperSite and PartnerSite Guide >> Customizing your SuperSite and PartnerSite Content >> How do I customize the Content, Theme (CSS, Images, Javascript), HTML Structure of the SuperSite and PartnerSite?

Search |

How do I Add/Edit a SuperSite/PartnerSite Theme or How do I edit the CSS, Images, Menu Style of my SuperSite/PartnerSite?

ethainetwork.com allows you the ability to completely change the look and feel of your SuperSite and PartnerSite through the use of Themes.

What is a Theme?

A Theme is a set of design elements and color schemes that you apply to pages of a Language SuperSite/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/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/PartnerSite.
     
  • Images. You can replace the default set of images within your SuperSite/PartnerSite Theme. This is especially useful when you have translated your SuperSite/PartnerSite content and would want to display images with embedded text in that language.
     
  • Javascript. The style of the Javascript Menu within your SuperSite/PartnerSite Theme can be equally easily modified, to suit your customized SuperSite/PartnerSite.

The default CSS, Images and Javascript are automatically made available in every SuperSite/PartnerSite in a Theme named MyTheme. You may customize MyTheme and use it as the default Theme for your Language SuperSite/PartnerSite. Ideally, you would want to create a new Theme for every Language SuperSite/PartnerSite as each Theme contains images displaying English text and you would like to translate this as well to your Language SuperSite/PartnerSite. Click here to know how to configure multiple language support for your SuperSite/PartnerSite >>

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

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

Adding a Theme

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Under the My SuperSite/PartnerSite Themes section, click on the Add New Theme button.
     
  3. Provide a unique name for your Theme and click Create Theme.
     

Modifying your Theme (editing your SuperSite/PartnerSite CSS, Images, Javascript)


Editing CSS Files

 You can modify the CSS files (Cascading Style Sheets) for different sections of SuperSite and PartnerSite, by following the process outlined below:
  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Under the My SuperSite/PartnerSite Themes section, click on the Customize Theme (Images, CSS) link besides the appropriate Theme.
     
  3. Here click on the Edit CSS button.
     
  4. This interface lists various folders representing sections of your SuperSite/PartnerSite. Click on 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 on 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 My  Content. You can make the required modifications in the My Content text box.
     
  7. Click on the Save Changes button after completing the modification.
     
IMPORTANT

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

 

Modifying the Image Files

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

IMPORTANT
  1. In order to modify an image file in SuperSite or 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. For example,
    http://<prefix>.supersite.myorderbox.com/getImage.php?src=image-name.gif, or

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

    where image-name.gif is the name that you require.
  2. 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. Click here to find instructions on how to edit your SuperSite/PartnerSite/PartnerSite CSS files >>
     


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

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Under the My SuperSite/PartnerSite Themes section, click on the Edit Theme Logo link besides the appropriate Theme.
     
  3. Click on Browse, and select the image you wish to upload.
     
  4. Click on Upload Image. This will replace the default image yourbrand.gif with the header logo of your choice.
     

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

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Under the My SuperSite/PartnerSite Themes section, click on the Customize Theme (Images, CSS) link besides the appropriate Theme.
     
  3. Click on the Edit Images button.
     
  4. This interface lists all the images used by the SuperSite/PartnerSite.
     
  5. In the list, look for the name of the image you wish to modify. Click on Edit, adjacent to it.
     
  6. Click on Browse, and select the image you wish to upload in place of the default.
     
  7. Click on 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.
     
IMPORTANT

In case you wish to add or have already added multiple Language SuperSites/PartnerSites, you would want to translate the text appearing in English in various images displayed in your SuperSite/PartnerSite.

You may download entire sets of these image source (PSD) files with translatable text as individual zip files from a convenient location and then upload them by following the above mentioned steps:

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Click on the Download PSD files tab on the top menu.
     
  3. Here all the images/banners that have English text embedded in them are listed.
     
  4. Click on the Download link to download individual zipped files. You may preview the images within each zip file by clicking on the Preview link besides each file.
     
  5. Once you have made the requisite modification to these images, follow the above mentioned process to replace the existing images.
     

Adding/Editing/Deleting your own images

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

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Under the My SuperSite/PartnerSite Themes section, click on the Customize Theme (Images, CSS) link besides the appropriate Theme.
     
  3. Click on the Edit Images button.
     
  4. Click on Browse next to the MyUploadedImages folder.

Adding your own Images
  1. Click on the Add New Image button on the top right-hand corner of this page.
     
  2. Click on Browse, and choose the image that you want to upload. To upload more than one image at a time click on the Add More Images button and click on Browse.
     
  3. Once the image(s) is/are selected, click on the Upload button.
     
    4.

Editing Images added by you

  1. Click on the Edit link next to the image you wish to modify.
     
  2. Click on Browse, and choose the image that you want to upload.
     
  3. Once the image is selected, click on Upload Image button.
     
    4.

Deleting Images added by you

  1. Click on the Delete link next to the image you wish to delete.
     
  2. In the confirmation popup, click OK to delete your image.
    3.

 

IMPORTANT
  1. After uploading an image using the above tool, you would need to link it from some HTML page in your Language SuperSite/PartnerSite to view the image.
     
  2. If upon editing an image, you are not satisfied with the modifications and wish to revert to the earlier image, simply click on Reset to Default from the Edit page.
    3.


Modifying the Style elements of the JavaScript menu

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

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Under the My SuperSite/PartnerSite Themes section, click on the Customize Theme (Images, CSS) link besides the appropriate Theme.
     
  3. Click on the Edit Menu Style button.
     
  4. Click on 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 My Content. You can make the required modifications in the My Content text box.
     
  6. Click on the Save Changes button beneath after completing the modification.
IMPORTANT


 How do I apply a Theme to my Language SuperSite/PartnerSite?
 

You can display your Language SuperSite/PartnerSite in either the Default Theme provided by ethainetwork.com or use any one of the Themes you have recently added. Follow the below mentioned process to accomplish this:

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Under the My Languages SuperSite/PartnerSite section, click on Manage Site besides the Language SuperSite/PartnerSite, to which you wish to apply the Theme.
     
  3. Click on the Edit Settings button. Here select the Theme you want to associate to this Language SuperSite/PartnerSite, by selecting the same from the Current Theme drop-down.
     
  4. Click on the Save button to associate the selected Theme to this Language SuperSite/PartnerSite.
     
IMPORTANT

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

 

Reference: Click here to know how to configure Multiple Language support to your SuperSite/PartnerSite >>
 

How do I Delete a Theme?

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. Before trying to delete a Theme, you have to ensure that it is not associated with any Language SuperSite/PartnerSite. Notice whether that Theme is listed besides Site Theme under any Language SuperSite/PartnerSite in the My Languages SuperSite/PartnerSite section.

    If you find any association -
    1. Click on the Manage Site button besides that Language SuperSite/PartnerSite.
    2. Then click on the Edit Settings button and select some other Theme in the Current Theme drop-down.
    3. Click on the Save button to make the modification.

    IMPORTANT
     

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

     
  3. Once you have ensured that no Language SuperSite/PartnerSite is associated with the Theme you are trying to delete, click on the Delete link, besides the Theme in the My SuperSite/PartnerSite section.
     
  4. Click on OK to confirm deletion.
 

Created on:   Apr 13, 2007 1:21 PM  GMT
Last Updated on:   Jul 31, 2008 10:57 AM  GMT
 
Answer How do I Add/Edit a SuperSite/PartnerSite Theme or How do I edit the CSS, Images, Menu Style of my SuperSite/PartnerSite? 
Answer How do I configure Multiple Language support for the SuperSite/PartnerSite? 
Answer How do I edit the existing Textual Content and Paragraphs as well as Modify the HTML Structure of a page? 
Answer How do I edit existing Images of the SuperSite and PartnerSite? 
Answer How do I change CSS files in Supersite and PartnerSite? 
Answer How do I make changes to the JavaScript menu in the SuperSite and PartnerSite? 
Answer How can I Add/Edit my own HTML pages in the Supersite and PartnerSite? 
Answer How can I Add/Edit my own Images in the Supersite and PartnerSite? 
Answer How can I Download the Source (PSD) File of Images/Flash with Translatable Text, used in my SuperSite and PartnerSite? 
Answer How do I modify the links on the Static Bar on my SuperSite? 
Answer How can I remove the Resellers tab from my SuperSite? 
Answer How do I customize the Legal Agreements in SuperSite and PartnerSite? 
Answer How do I customize the Page Titles of the SuperSite and PartnerSite? 
Answer How do I add Meta Tags to my SuperSite and PartnerSite for better Search Engine Optimization? 
Answer How do I customize the Error Messages in the SuperSite and PartnerSite? 
Answer How can I modify the Contact Us page on my SuperSite? 
Answer How can I change the Other Payment Options on the final check out page of the SuperSite? 
Answer Keeping my Customized SuperSite/PartnerSite content in sync with any new content added by ethainetwork.com