Creating Custom CSS Classes

You can customize your community's CSS by adding or overriding CSS classes in a custom CSS FTL template file. You create a theme, create the custom template, add your CSS classes to the template, then map the theme to the UI.

This section walks through the process of making a small change, but larger changes work essentially the same way. Be sure to read Mapping Themes to the UI for more information on how to map your themes.

If you create new CSS classes, you'll also need to update page-specific theme files to use the classes you define. See Customizing UI Page Structure for information.

Note: It's a good idea to plan your customizations ahead of time -- their scope as well as the details of the customizations themselves -- because how you map your theme determines the scope of the changes applied. With those plans in hand, a good way to start is by creating your theme.

1. Create a new theme. In the admin console, go to System > Settings > Themes, then click Create New Theme. Give the new theme a name and description, then click Create Theme.

   

2. Begin editing the theme by clicking its edit icon.
   
3. 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 will copy as <jive.instance.home>/themes/<theme_name>/global/custom-css.ftl in your installation. You might find that it's easier to simply create and save the template, then open the saved template in your favorite editor.

4. Using a tool such as Firebug, figure out the styles you want to add or override. For example, the following illustration shows Firebug focused on the user bar (the part with the menus in it), where the jive-userbar CSS class is applied.
5. To override the style you've identified, simply 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.

   

6. Save the template when you've added the classes you want.
7. To see your changes, you'll 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'll want to set it as the global theme as shown below. Note that you can have only one global theme, so plan to add all of your global template changes to a single theme for global mapping.