Customizing content styles

Getting started

First, locate what skin and template you are using. This is most easily done by going to your Control Panel, clicking "Visual appearance", and looking at your styles:

In this example, the template is "ace", while the skin is "neutral."

Find your existing styles

Go to your filesystem and locate the folder /skins/{template}/{skin}. In that folder, you should find a CSS file that is named _content.css or content.css. Load this up. These are the styles currently being used on the site; you can review the CSS selectors and styles in use.

Changing your styles

To update your styles, you must override the existing CSS styles in the "Customize content styles" box in the Visual appearances screen. It is not recommend you edit the CSS files directly. Because of the way CSS selectors work, you must be very specific in targetting the content. For example, if you want to change the paragraph styles of your content, it is not enough to do:

p {
	color: #f00; /* red */
}

You must target more specifically:

 #topic p {
	color: #f00; /* red */
}

If you want to change the style of your <h2> headers, take a look at _content.css (assuming you're using the neutral skin for the Ace template):

#topic h2,
.header_2 {
    font-size: 16pt;
}

To add a border to this style, you'd add this to your "Customize content styles" box:

#topic h2,
.header_2 {
    border-bottom: 1px solid #000;
}

Notice that due to the way CSS cascades, you do not need to redefine the font-size; it will be inherited from the original stylesheet.