CSS Custom Styles

Customise colours, fonts, headings, menus, and much more using CSS...

What are CSS Custom Styles?

All web pages can be customised using something known as

Unknown macro: {glossary}

CSS

(Cascading Style Sheets). The

Unknown macro: {builder}

theme allows you to inject your own custom styles in to all pages within a space in order to change the way those pages look.

The settings for the custom styles are accessed from the Theme Configuration screen:

null

Defining Styles

Due to the nature of

Unknown macro: {glossary}

CSS

, there are literally thousands of customisation options available.

For just about every thing that appears on a page, there is a wide variety of customisation options, including:

As such, it's impossible for us to list all of them, but the related tutorials section below offers some common examples that will help you make general Confluence look much cleaner.

Creating CSS Files

While it may be convinent to edit your stylesheets within the configuration screen, you should consider using a CSS file instead for the following reasons:

The CSS file can be edited in a wider range of software - anything from Windows Notepad to Macromedia Dreamweaver
The CSS file is easy to back-up - especially if it's attached to your home page as an attachment (in which case it is automatically backed up)
If you want multiple spaces to look the same, you can easily link to the same stylesheet

Creating a CSS file is easy - simply create a new text document, paste in your style sheets and save it with a .css extension. make sure you save the file as plain text though - some word processors compress files or add other information which would confuse the web browser.

Once you've created the CSS file, upload it as an [attachment] to your space home page

Unknown macro: {footnote}

When uploading a CSS file as an attachment, it's usually best to store it on a publicly available home page so that all spaces will be able to link to it.

and then right-click the attachment to display the pop-up contextual menu:

Depending on which browser you are using, you'll see an option like Copy Link Location or Copy Shortcut, etc. Select that link to copy the URL of the attachment to the clipboard.

Next, enter Theme Configuration and set focus to the CSS Custom Styles text box. If the old copy of your style sheet is stil in there, delete it and then paste

Unknown macro: {footnote}

To paste text from the clipboard, use either "Ctrl"+"V" (or "Option"+"V" on OS X) or right-click the text box and choose the Paste option.

in the URL to the new CSS file.

Unknown macro: {display-footnotes}

Now, add the following text to the start of the URL:

@import url(

And the following text to the end of the URL:

);

The end result will look something like this:

@import url(http://www.adaptavist.com/download/attachments/918/adaptavist.css);

The URL will obviously be specific to your server address and the location where you stored the attachment.

If you want to use the same stylesheet in other spaces, simply enter the same text in to the CSS Custom Styles text box for those spaces.

If you need to make changes to your style sheets, simply attach a new version

Unknown macro: {footnote}

Depending on your web browser settings, you might need to refresh the page or clear you cache for the changes to take effect.

of the same file to the same location.

Should you need any space-specific styles, those can be added below the @import... line - this allows you to create a general, reusable stylesheet that does the bulk of the cusotmisation for several spaces and then add space-specific styles within each space.

Page tree

CSS Custom Styles

What are CSS Custom Styles?

Defining Styles

Related Tutorials

Creating CSS Files