22 Jul 10 How do I Add/Edit a SuperSite/PartnerSite Theme or How do I edit the CSS, Images, Javascript of my SuperSite/PartnerSite?

Gossimer 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?

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)

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.

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. : 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.

 

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.

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.

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.

 

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  

 
• Only the menu display can be modified through the above process. Click here to read how to modify 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 on Reset to Default from the Edit page, to restore the default settings for that file.

 

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

You can display your SuperSite/PartnerSite in either the Default Theme provided by Gossimer 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 >>

Tags: above tool, Attractive Appearance, Cascading Style Sheets, Choose One, Color Schemes, Colors, Css Files, Css Images, Default Theme, Design Elements, Editing Images, Gif, Gossimer, HTML, http, Javascript Menu, Language Javascript, Supersite, Tweaking