Documentation for Confluence 5.4.
Documentation for Confluence OnDemand and earlier versions of Confluence is available too.

Skip to end of metadata
Go to start of metadata

This page contains instructions on how to get started with custom CSS styling in Confluence.

CSS Editing Quick-Start

To edit a space's CSS style sheets:

  1. Go to the space and choose Space tools > Look and Feel on the sidebar.
  2. Choose Stylesheet then Edit.
  3. Paste your custom CSS into the text field.
  4. Save your changes. The new CSS will be visible on all content pages in the space.

If your space uses the Documentation theme:

  1. Choose Browse > Space Admin at the top of the screen.
    Note: The 'Space Admin' option appears only if you are a space administrator for the space or you are a super user (a member of the confluence-administrators group).
  2. Click Stylesheet in the left-hand panel under the heading 'Look and Feel'.
  3. Choose  Edit.
  4. Paste your custom CSS into the text field.
  5. Save your changes. The new CSS will be visible on all content pages in the space.

On this page:

Related pages:

(warning) The information on this page does not apply to Confluence OnDemand.

Tutorial: Changing the Header Background

The 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.

  1. Create a custom graphic. For this example, we created a custom header graphic of 1046 x 61 pixels.
  2. Upload the custom graphic to a page in the space that you are customising.
  3. Note the page ID of the page where you uploaded the new graphic. (in this example, the page ID was '658833839'.
  4. Compose your custom CSS for the header. The example below loads the new graphic (called 'header.png') from a specific page (denoted by page ID '658833839') in the same space.

     #header .aui-header  {
           background-image:url('../download/attachments/658833839/header.png');
           background-repeat: no-repeat;
        }
    
  5. Log in as the Space Administrator.
  6. Open the Space Admin page.
  7. Click Stylesheet.
  8. Click Edit to change the code in the text field.
  9. Paste your custom CSS into the text field.
  10. Click Save and then reload the page (you may have to shift-reload). The background of the header will change.
  11. The custom header will be visible on all content pages in the space. To revert your change, simple delete the custom code from the 'Stylesheet' page and click Save.

CSS Editing Tips

Begin With a Space Stylesheet

A 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 Tools

As 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
Firebug, a plugin for the Firefox web browser, allows you to take a look at the style of each element on your page. This is very useful to see what styles are currently applied, for example styles applied to the header only.

2. Web Developer
The Web Developer plugin for Firefox allows you to edit CSS inline and create new page designs.

3. CSS Edit
CSS Edit is a stand-alone CSS editor for Macintosh that extracts all existing styles from a given page and allows you to overwrite these.

Edit Simple Elements First

Begin 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).

Notes

Notes:

  • You need system administrator permissions to edit the CSS for a space or for the site.
  • This function is turned off by default. To turn it on, go to Confluence Admin > Security Configuration and choose Custom Stylesheets for Spaces.

  • No labels

25 Comments

  1. Running 2.10.1.
    I have enabled the custom CSS feature in the genaral configuration.
    When I activate the "Stylesheet"-Link under the Space Admin and press the Edit - Button, the edit window is completely empty. I thought that the Space Stylesheet (at least the default one) was to be found here. How can I get that?

    1. Hi Erik,

      By default, you will get an empty box. The feature is to allow you to overwrite the current styles of Confluence, spread across different stylesheets. You can learn more by looking at the CSS includes in the HTML source or you can use the suggested tools above to help you identify the elements/styles of a Confluence page. Hope that helps!

      Cheers,
      Azwan

      1. Anonymous

        "You can learn more by looking at the CSS includes in the HTML source or you can use the suggested tools " - Can you be more specific? Where is the CSS includes (sic) in the HTML source? What are the suggested tools?

        Ron

        1. Hi Ron,

          You can take a look into the normal HTML generated by Confluence; whereby some elements may have tags and ids. This would be pretty tedious and confusing, hence, using the tools suggested in the "Use the Right Tools" section on this page would be of much help.

          Cheers,
          Azwandi

      2. Well then you ought to fix the language on this page where it says:  

        "A space stylesheet is a good starting point for CSS customisation, as it already includes all of the elements that can be changed."  

        That clearly implies that there exists a space stylesheet someplace that contains all of the elements that can be changed.  There is no other way to interpret those that sentence.  

        But in Mr. Aris's comment above, he clearly says the current styles of Confluence are "spread across different stylesheets."

      3. Hi Azwandi, I understand the concept. However, I cannot overwrite the default style of h1, h2, h3, ..., h7 via Space Admin >> Stylesheet.

        If I write:

        It does not overwrite the default style, the h1 texts are still black.

        But if I write:

        Then it works.

        B.t.w. I'm using Confluence 3.5. 

        How comes this "Overwrite" doesn't happen?

        1. Anonymous

          Use wiki-content

           


          1. Anonymous

            there is a spelling error in your code:

            use .wikicontent not .wikicontext! (wink)

            1. .wiki-content not .wikicontent

  2. I have found out of the following:
    If you are running Internet Explorer 8 and presses F12, you can see the stylesheet settings in use.
    In Firefox you can do some similar things - it requires a plugin, I think.

    I tried to edit some of the stylesheet settings and most of it worked. Using F12 again shows the changes.

    A small burp:
    But somehow the default Space Stylesheets should have been documented, so you don't have to find out of these things yourself.
    I refer to the section above: Begin with a Space Stylesheet. How to do that, if it is kept secret!!

  3. I'm trying to define classes for panels in the Space Stylesheet, but cannot get it to work. I assumed I could do the following in the Space Stylesheet:

    {style}

    .panel.active {background-color:#FF8500}

    {style}

    and reference in the page via {panel:class=active}some content{panel}

    This does not work, and defining background-color in a generic class and using {div} doesn't either, as it only shades a block of the panel.

    Any help? I'm familiar with CSS, but new to Confluence, so it may be an obvious answer.

    Thanks.

    1. Hi Lauren,

      I'm trying to define classes for panels in the Space Stylesheet, but cannot get it to work. I assumed I could do the following in the Space Stylesheet:

      Unknown macro: {style}

      .panel.active

      Unknown macro: {background-color}

      and reference in the page via

      some content

      This does not work, and defining background-color in a generic class and using

      Unknown macro: {div}
      doesn't either, as it only shades a block of the panel.

      Any help? I'm familiar with CSS, but new to Confluence, so it may be an obvious answer.

      Thanks.

      As far as I know, the {panel} macro do not have the class attribute define to it, as stated in this documentation:

      However, you might want to try to include the following code in the Space Stylesheet:

      Alternatively, you might want to change the panel color using the bgColor attribute.

      Hope that helps.
      Best rgds,
      Zed

      1. I was trying to follow this to change the font and link styles of the panel content.  This is the code I'm trying.  It had no effect at all.  Any ideas?:

        div.panel a,
        div.panel a:link,
        div.panel a:visited,
        div.panel a:focus,
        div.panel a:active {
        color: #a42c30;
        text-decoration: none;
        }
        div.panel a:hover {

        color: #000000;
        }


        div.panelContent p {
        font-family: "arial", "sans-seriph";
        font-size: 12px;
        font-style: normal;
        color: #333333;
        line-height: 16px;
        }

        div.panelContent a,
        div.panelContent a:link,
        div.panelContent a:visited,
        div.panelContent a:focus,
        div.panelContent a:active {
        color: #a42c30;
        text-decoration: none;
        }
        div.panelContent a:hover {

        color: #000000;
        }

    2. Hi,

      You can change text background color with Highlighter plugin. It allows to select text and change background of the selection to yellow (other colors will come later). Users can highlight text fragments without editing the page source.

      https://marketplace.atlassian.com/plugins/com.gebsun.plugins.confluence.highlighter

      Regards,
      Gebsun

  4. So at the space level I altered the css for blockquotes, because I wanted them to display in normal rather than italic font. In the stylesheet box, I entered

    This had the desired effect, but also some undesired effects. Now, inside a blockquote, if I make text italic, it is still rendered as normal text when I save. It renders as normal text in Preview as well. Oddly, though, it renders as italic in the Rich Text editor. The same is not true for bold text, which, when I save, accurately renders bold inside the blockquote (probably because I didn't fiddle with font-weight in the stylesheet).

    When I look at the html, the text I've tried to italicize is within <em></em> tags. Why is the blockquote styling overriding the em styling, and how do I change that?

    1. Well, here's the answer to my own question. The default stylesheet actually specifies font-style for <em> within <blockquote> as normal. (Duh.) So I added the following to the custom stylesheet and it solved the problem:

  5. Anonymous

    Hello all,

    I was having a hard time getting the custom css within the Space Admin to overwrite the global CSS (a problem I found a lot of other people had, but no solutions to). I found a very simple fix to this and thought I might share, hopefully save someone else the headache!

    Normally, to define a custom style for a particular space, you would go to Space Admin > Stylesheet and then enter your CSS, cross your fingers, hold your breath, and hope that it actually works. Well, if it doesn't, take that fancy custom CSS, and go to Space Admin > Edit Space Layout. In the Header section, paste in your CSS and add {style} open and close tags.

    {style}

    .myCoolThing {display: block;}

    {style}

    Works like a charm! Good luck all!

  6. Anonymous

    I im using confluence with the refined wiki plugin to provide a better theme in line with my current client. However for the life of me i can figure out how to change the left and top middle colors from white to black (ie the Area where the navigation tree and the page title lies). managed to change all the other elements like page bodies and boarders to black.. Any one got any ideas? 

     

  7. The style that Confluence is using as template for this page, is the CSS or the template available somewhere?

     

     

    1. Hi Maciej, 

      This space is using the Documentation theme with some custom CSS, which we hope to make available as a plugin in the future. The layout is achieved using the section and column macros.

      Hope this helps. Rachel

  8. Any update? When will you make the current Atlassian Confluence CSS style sheet available?

    1. Hi Lars, please see my comment here Re: Confluence 5.1 Release Notes about the custom CSS used in this space.  Note that this CSS is unsupported and not maintained, and that custom CSS is not available to OnDemand customers.  Rachel

  9. Thank you for publishing that once-off stylesheet, @Rachel Robbins.Going forward, it would be a tremendous help if Atlassian would make its default Global and Documentation stylesheets available within each new iteration of Confluence. Working blind is not fun.

  10. Hi, how I can configure the documentation theme on OnDemand version, to look like this page? (si all the content centered like this page (in my version the content is left aligned and it has no left margin to the left column. Thanks for your help

    1. Hi Oriol, check out my comment here about the custom CSS used in this space - Re: Confluence 5.1 Release Notes. Please note that this CSS is unsupported and not maintained.