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.
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
- 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
- Begin editing the theme by clicking its edit icon.
- 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
Note: When you save your CSS custom
template, the application will copy as
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
- 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.
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.
- Save the template when you've added the classes you want.
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