4.6 Customizing Vibe Styles

You can customize colors, background images, and fonts throughout the Vibe interface. You might want to do this if you want to change the default Vibe styles to better match your corporate theme.

You must have knowledge of CSS styling to successfully customize styles in your Vibe site. When customizing styles, you need to either add a style, change an existing style, or delete a style.

For information about how to customize icons throughout the Vibe site, see “TID 7007607: Modifying the Default Vibe Icons” in the Novell Support Knowledgebase.

IMPORTANT:As you customize styles on the Vibe server, back up the changes you are making and record where you are making them. This is because when you upgrade your Vibe system to a new version, any style changes that you have made could be overwritten. You might need your backups and detailed notes in order to re-create your customized Vibe styles after an upgrade.

Figure 4-1 Default Vibe Style

Most style customizations in Vibe are accomplished through the modification of CSS style sheets. Some style settings in the Vibe interface are contained within JSP files.

Figure 4-1shows the various areas of the Vibe interface. The type of files that you need to modify in order to affect Vibe styles depends on the area of the Vibe interface that you want to customize, as shown in the following table.

Table 4-1 CSS Style Locations

Area of Vibe Interface

Type of File to Modify

Location on the Vibe Server

Masthead

CSS style sheet

apache-tomcat/webapps/ssf/static/version/js/gwt/gwtteaming/GwtTeaming.css

Navigation Panel

CSS style sheet

apache-tomcat/webapps/ssf/static/version/js/gwt/gwtteaming/GwtTeaming.css

Action Toolbar

CSS Style Sheet

apache-tomcat/webapps/ssf/static/version/js/gwt/gwtteaming/GwtTeaming.css

User Profile Page

CSS Style Sheet

apache-tomcat/webapps/ssf/static/version/js/gwt/gwtteaming/GwtProfile.css

Content Area

JSP file

apache-tomcat/webapps/ssf/WEB-INF/jsp/common

To customize styles for your Vibe system:

  1. Find the CSS selector name for the area of the interface for which you want to customize the style setting.

    For example, suppose you want to modify the color or font of the Action toolbar for your Vibe site. You use Firebug on Firefox to find the selector name for the Action toolbar, which is mainMenuControl.

  2. On the Vibe server, navigate to the directory where the style that you want to modify is located.

    See Table 4-1 for the file location on the Vibe server.

    For example, Table 4-1 shows that the mainMenuControl selector for the Action toolbar is located in the apache-tomcat/webapps/ssf/static/version/js/gwt/gwtteaming directory, in the GwtTeaming.css file.

  3. Open the appropriate file in an editor, then search for the selector name.

    For example, to customize the color of the Action toolbar, open the GwtTeaming.css file, then search for mainMenuControl.

    If the appropriate file is a JSP file, you first need to locate the appropriate JSP file.

  4. Make your desired style modifications in one of the following ways:

    • In the CSS style sheet, modify the value of the CSS definition that you want to customize, add a new CSS definition, or delete an existing CSS definition.

    • Modify any images that are referenced in the CSS style sheet by navigating to the directory where the images reside and making changes there.

      If you modify an image that is not referenced in the CSS style sheet, your modifications are not reflected in the Vibe interface.

  5. Save your changes on the Vibe server, then clear the browser cache and refresh the browser to see the changes.

    Following are examples of color and font changes to the Action toolbar:

    The Action toolbar has been changed to red.

    The font of the Action toolbar has been changed.