Styling Pages with CSS

To create a CSS file, go to the Structure > CSS control panel and click the button labeled Add CSS File.

You may find it easier to create your CSS files offline, using whatever CSS editor you like, and then cut and paste the contents into the New CSS File screen.

Alternatively, you can upload a CSS file just like an image or other file, but then you won’t be able to edit it through the browser.

When you are refining your CSS, it is helpful to keep the Edit CSS screen open in one browser tab, while viewing your site in another browser tab. If you click the Quick Save button, the CSS will be updated, but the Edit CSS screen will remain displayed. To go back to the list of CSS files, click Save & Return to List instead.

If you’re trying to determine what style you need to modify to affect something on your site, you’ll find the Firebug extension for Firefox to be invaluable. You can just point at an item on the page, and Firebug will show you what CSS rules are affecting it, and in which style sheet each rule is located.

In our standard CSS file, we’ve used global settings for many of the color values. You can use this same technique if you have parameters in your CSS that you want to make it easy for others to change without exposing all of the CSS code to change. Just insert the statement:

 <w:data name='setting_name' />

in place of the actual value, and then go to Settings > Global Settings and click Add Configuration Setting to define the value.