Creating custom CSS classes

This section walks through the process of making a small change, but larger changes work essentially the same way. For more information on how to map your themes, see Mapping custom themes to UI.

If you create new CSS classes, you also need to update page-specific theme files to use the classes you define. For information, see Customizing UI page structure.

How you map your theme determines the scope of the changes applied. This makes planning the scope and the details of the customizations a necessary step in creating your theme.

To create custom CSS classes:

1. Create a new theme. In the Admin Console, go to System > Settings > Themes.
2. Click Create New Theme. Give the new theme a name and description, then click Create Theme.
   
   
3. Clicking the Edit icon to start editing the theme.
4. Under Create Custom Template, select /soy/template/css-custom.soy, then click Create New Template.

   This creates a custom template to which you can add CSS classes.

   Note: When you save your CSS custom template, the application copies it as <jive.instance.home>/themes/<theme_name>/global/custom-css.ftl in your installation. You can create and save the template, then open the saved template in another editor.
5. Using a tool, such as Firebug, figure out the styles you want to add or override.
6. To override the style you've identified, add a class of the same name to your custom CSS template.
   You can even start by copying the classes from the instance, then pasting them into your custom CSS template. The following example shows the user bar style updated with a different color and no background image.
   
   
7. Save the template when you've added the classes you want.

To see your changes, you need to map the new theme to some aspect of the user interface. For example, if you want the your theme to impact UI everywhere in your community, you need to set it as the global theme, as shown below.