Confluence Docs 2.10 : Basic Styling Tutorial
This page last changed on Dec 02, 2008 by edawson.
This page contains instructions on how to get started with custom CSS styling in Confluence. On this page: Error formatting macro: toc: java.lang.NullPointerException
CSS Editing Quick-Start
Tutorial: Changing the Header BackgroundThe header is the menu area at the top of a default Confluence page where the Breadcrumb Links, Browse menu, User menu and the Quick Search box reside. In this example, we are going to change the background of the header to include a custom graphic.
CSS Editing TipsBegin With a Space StylesheetA space stylesheet is a good starting point for CSS customisation, as it already includes all of the elements that can be changed. When you work on the space stylesheet it styles all content pages in the space. Build and test it at space-level, before considering applying the new stylesheet to your entire site. Once you are satisfied with your space design, test it thoroughly until you are confident that it has no problems. Then, you can look into advanced customisation of the Confluence CSS such as adjusting the Search page, the Dashboard and other integral pages. Use the Right ToolsAs the Confluence CSS is reasonably sophisticated, web development applications will help you to understand how the page styles have been created. In particular, you will need to view the existing source for the pages you're starting to work on. If you don't already have some, tools such as the following free applications will allow you to do this. 1. Firebug 2. Web Developer 3. CSS Edit Edit Simple Elements FirstBegin by editing simple elements and checking that they work. By making changes, then checking that each one worked, you can easily isolate any CSS code that is causing problems. Be aware that some page elements are more suited to customisation than others. For example, adding a gradient to the toolbar is less likely to 'break' the page than changing the page width. Editing reasonably static elements such as background graphics will render more predictably than designs which attempt to completely change the user interface or the Javascript-powered drop-down menus (which we don't recommend editing). RELATED LINKSStyling Confluence with CSS |
![]() |
Document generated by Confluence on Dec 03, 2008 15:04 |