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

Sree Jain Infotech 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.
     
  8. 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.
    5. 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.
       

    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.
       

    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.

     

    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.


    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.
    7. 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 Sree Jain Infotech 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.
       
    5. 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.
 
  • 1 Users Found This Useful
Was this answer helpful?

Related Articles

Reseller Account Startup Guide

As a Reseller, you need to make the following settings within your Reseller Control Panel...

Video Tutorials

Below, you will find a list of video tutorials that will familiarize you with our system....

Creating a Demo Reseller Account

To understand and evaluate the interfaces and API we provide, you can use the Demo interface....

What is SuperSite?

SuperSite is a complete private-labeled Website for you and your Resellers. Here, your Customers...

What is PartnerSite?

PartnerSite is a complete private-labeled website to jumpstart your wholesale Business. In...

Powered by WHMCompleteSolution