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, Javascript of my SuperSite/PartnerSite?

almenbar corp 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 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.

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

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

 

IMPORTANT
  1. To modify the CSS, Images and Javascript of your SuperSite/PartnerSite, you need to first add a NEW Theme.
     
  2. While adding a Theme, you need to select the Default Theme from where you want the default CSS, Images and Javascript to be initially loaded. As you modify these elements, your changes become a part of your new Theme.

 

Adding a Theme

You can create your own Themes using the default Theme as mentioned below -

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. In the Admin area, click on the Add/Modify Content and Themes link. Then, click on Browse adjacent to the Themes folder.
     
    IMPORTANT

    The Default SuperSite/PartnerSite Theme cannot be edited. If you wish to change the look and feel of your SuperSite/PartnerSite, you need to create your own Theme and modify the same.

     
  3. In order to create your own Theme, click on the Create Custom Theme link on the top right-hand corner of this page.
     
  4. Provide a unique name for your Theme and click Create My Theme. The Theme thus created will be listed under Your SuperSite/PartnerSite Theme(s) section.
     
  5. Click on the Browse link next to the Theme to view the contents of the Theme.
     
  6. Here you will find folders for CSS (Cascading Style Sheet) files, Images and JavaScript files.
     

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. In the Admin Area, click on the Add/Modify Content and Themes link. Then, click on Browse adjacent to the Themes folder.
     
  3. Click on Browse besides the Theme which you need to modify.
     
  4. Now click on Browse next to the CSS folder.
     
  5. This interface lists all the sections. Click on Browse, adjacent to the section for which you wish to modify the style sheets.
     
  6. 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.
     
  7. 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 Modified Content. You can make the required modifications in the My Modified Content text box.
     
  8. Click on the Save Changes button beneath 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 with another 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/PartnerSite.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 >>
     
  3. Modifying the Header Logo: You can follow the process mentioned below to replace the default header logo with the logo of your company. To do so, you need to replace the image named yourbrand.gif.


Follow the process outlined below to modify any Image files in your SuperSite/PartnerSite:

  1. Login to your SuperSite or PartnerSite Admin Area. Click here to learn how >>
     
  2. In the Admin Area, click on the Add/Modify Content and Themes link. Then, click on Browse adjacent to the Themes folder.
     
  3. Click on Browse besides the Theme which you need to modify.
     
  4. Click on Browse link next to the Images folder.
     
  5. This interface lists all the images used by the SuperSite/PartnerSite.
     
  6. In the list, look for the name of the image you wish to modify. Click on Edit, adjacent to it.
     
  7. Click on Browse, and select the image you wish to upload in place of the default.
     
  8. 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.

 

Adding/Editing 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. In the Admin Area, click on the Add/Modify Content and Themes link. Then, click on Browse adjacent to the Themes folder.
     
  3. Click on Browse besides the Theme which you need to modify.
     
  4. Click on Browse link next to the Images folder.
     
  5. Click on Browse next to the MyUploadedImages folder.

Adding your own Images
  1. Click on the Add your own Images button on the top right-hand corner of this page.
     
  2. Click on Browse, and choose the image that you want to upload.
     
  3. Once the image is selected, click on 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.

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

IMPORTANT
  1. If you have translated your SuperSite/PartnerSite content to multiple languages, then you may want to have images with text embedded on them in that particular language itself. To accomplish this you would need to associate different languages to separate Themes and within each Theme have Images related to only that language.
     
  2. 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.
    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. In the Admin Area, click on the Add/Modify Content and Themes link. Then, click on Browse adjacent to the Themes folder.
     
  3. Click on Browse besides the Theme which you need to modify.
     
  4. Click on Browse next to the JS folder.
     
  5. Click on Edit, adjacent to the menu_style.js file.
     
  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 Modified Content. You can make the required modifications in the My Modified Content text box.
     
  7. Click on the Save Changes button beneath after completing the modification.
IMPORTANT


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

You can display your SuperSite/PartnerSite in either the Default Theme provided by almenbar corp 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. In the Admin Area, click on the Configure Languages and Themes link.
     
  3. Here you may either set your Theme for the Default English Language or any other language added by you, by selecting the Theme from the Associated Themes drop-down.
     
  4. Click on the Save button to associate the selected Theme to a particular language.
     
IMPORTANT

The Theme you have selected will be applied to your SuperSite/PartnerSite ONLY after you have enabled that particular language.


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

Created on:   Apr 13, 2007 1:21 PM  GMT
Last Updated on:   May 26, 2008 7:57 AM  GMT
 
Answer How do I Add/Edit a SuperSite/PartnerSite Theme or How do I edit the CSS, Images, Javascript 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 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 almenbar corp