This documentation relates to RefinedWiki Original Theme 1.x - 2.x
View the current documentation.

Style the theme with custom CSS

Comment: Migrated to Confluence 4.0

A good tool for working with CSS is Firebug which is a plugin for Firefox

Global level

Go to: Confluence Admin > Look and Feel > Stylesheet > Edit
This will affect all pages in the entire wiki.

Space level

Go to: Browse > Space Admin > Look and Feel > Stylesheet > Edit
This will affect all pages in the active space.

Examples

Example: Change the text font-size and color of a page

Now the color of the text is gray and the font-size is 13px.

Example: Change font-size and color of headings

Example: Remove the top menu with css

Example: Remove the dashboard tab

This work with Original Theme 1.4 and above.

Example: Remove the breadcrumbs

Example: Remove the power by fotter

Labels
  • No labels

41 Comments

Hide/Show Comments

  1. Anonymous

    Right now, any changes I make to the global stylesheet only affect dashboards -- spaces ignore it. The on-line help text in fact says this is what will happen -- that the global stylesheet is not applied to any space using a theme. Do I really need to copy my CSS changes into each space? (I'm hoping not :->)

    -- Steve Lane

  2. Anonymous

    My mistake -- it appears to be only personal spaces that ignore the global stylesheet. Does that sound correct?

    -- SL

    1. Emil Sjödin

      Hi Steve,

      The global Stylesheets affect all spaces (Global and Personal).

      If you have changed a stylesheet on a space level it will overrule the global stylesheet. So check if there is any stylesheets set on space level for those space where it doesn't work.

      1. Anonymous

        Thanks for providing this "get rid off" CSS, verry usefull if someone wants to add calendars or large drawings using gliffy plugin. Prior I needed to use other themes to do so.

        Cheers

  3. Anonymous

    Hiya,

    Thanks for the fantastic skin, I am hoping it will increase adoption of Confluence throughout my organisation.

    Quick question - is it possible to remove the icon and "News" title from the rw-news macro?  I have tried numerous CSS approaches but none seem to work...

    Huge thanks...

    Wayne

    1. Emil Sjödin

      Hi Wayne,

      This code should remove the title and icon from the news macro:

      Cheers

      Emil

      1. Wayne

        Hey Emil,

        It worked perfectly!  I must brush up on my CSS....

        Wayne

  4. Andreas van Rienen

    Hi Emil -

    Is there any way to change the size/width of the left and right "outer columns" (ie. everything left and right beyond the "greenish" frame around this page)?

    In the admin console, the "site width mode" is set to "dynamic". Yet it seems as if the theme "wastes" quite some space by default.

    Since it was a common request during our evaluation period to "regain" this space: is there any way to change this "behaviour" (eg. via CSS)?

    Best regards,
    Andreas

    PS: I have also created an issues for this potential feature request. A screenshot can be found there as well.

    1. Emil Sjödin

      Hi Andreas,

      Yes this can be done with CSS.

      Go to: Browse > Confluence Admin > Stylesheets and add this code:

      1. Andreas van Rienen

        Emil - thanks for the swift reply. That did the trick ... :-)

      2. Clyde Moseley

        Emil - It looks like the CSS to override the width setting on the side borders no longer works with 3.x?

        1. Emil Sjödin

          Hi Clyde,

          We have done some changes to the front-end elements. The new documentation is on it's way. Here is the new CSS code that will fix your problem.

  5. Anonymous

    Hi,

    Thanks for that theme : it basically mades my boss switch his mind about confluence (smile)

    One question : do you guys

  6. Anonymous

    have an idea on how to make tab title display on two lines ? I have very long category names to deal with, so third of my tabs haven't place enough to be seen....

    Thanks for any tips !

    1. Emil Sjödin

      Hi,

      We are aware of this problem and are working on a solution. But for now there is no fix except using shorter category names.

      Cheers

  7. Geert Peter de Oude

    Hello Emil,

    Is it possible to eliminate the "attachment line" in the Page Meta Data area?

    Regards,

    1. Emil Sjödin

      Hi,

      Use this CSS code to remove the line:

      1. Geert Peter de Oude

        I have added this to the Theme in the space but it is still present. What am I doing wrong?

        I would like to remove the complete line :

        E.g. ""Paperclip" 4 Added by Geert Peter de Oude, last edited by Ilona Eeckhout on Oct 27, 2010."

        Thanks.

        1. Emil Sjödin

          Hi,

          This CSS code should remove "4 added by Geert...":

          1. Klaus Feldmann

            in addition to that, how can I disable the "show-comments" in the heading of a page?

            Cheers.

            1. Emil Sjödin

              Use this code:

  8. Klaus Feldmann

    Hi Emil,

    With confluence 3.0 stylesheet did change its way to embed dynamic content into a stylesheet. Within RefinedWiki, dynamic content could be easily added by placing macros into space layout. I could use reporting plugin to get current user, current date and copyright informations printed out on every page if I would export a space to PDF. I would like to achieve this directly on PDF stylesheet, as it was possible prior Confluence 3.0. I could not find any hint within confluence documentation and forums and all topics regarding this are without any solution.

    Do you know what code to apply to get dynamic content  e.g. name of current user and current date printed out on every page as a footer?

    Thanks in advance.  

  9. ruchita

    Hi Emil,

    I tried removing the dashboard tab but it does not work.

    Then I tried customizing the dashbaord to make it look as good as your demonstration wiki :(

    It doesnt work either.. :( I also tried using the

    Error rendering macro 'include' : com.atlassian.renderer.v2.macro.MacroException: No page title provided.
    macro to include content from other page on my dashbaord.

    But even that does not render my page :(

    Please Help!

    1. Emil Sjödin

      Hi, the code to remove the dashboard tab should work. Did you add this code:

      at (Browse > Confleunce admin > look and feel > Stylesheet)?

      Our demo wiki is just using the default macro with a info macro on top of it:

      The include macro also work on the dashboard.

      If you want me to take a look on your wiki please send me an email.

      Cheers

      1. Felipe

        Above CSS to hide dashboard FAILED.

         

        However, this one worked for me.

        1. Emil Sjödin

          Hi Felipe,

          I think you are using RefinedWiki Original Theme 3.0.2. This is the documentation for 2.x.

          Thats why the above CSS code didn't work.

           

  10. ruchita

    Hi Emil,

    Thanks for the info.

    I have one more question about the font styling.

    I am trying to change the font face .. but so far no luck.

    It would be great if you can share the css / wikimarkup code for doing this :)

    1. Emil Sjödin

      Hi Ruchita, do you want to change the font on all text or just on the pages?

  11. Mike Rogers

    Hi,

    Using Confluence for our company's help documentation, we are using a lot of permissions to not allow our clients (the Anonymous Group) from viewing anything we don't want them to until we tell them to. However the Browse button still shows up even when you aren't logged in. Is there a way to turn this off for people who are not signed in? They are able to view every page in a Space, see history, etc. I also don't like half the options in the Tools button, but I feel I won't be able to pick and choose those.

    1. Emil Sjödin

      Hi Mike, we are displaying the tools and browse menu in the same way as the default confluence theme. We haven't change any of the functionality because we want to make sure that other plugins and macros also are compatible with our theme. So I think this question is better directed to support.atlassian.com.

  12. Sebastien Close

    Hi,

    i'm new with CSS and i'm trying to change the color of the pagetitle:

    <h1 id="title-heading" class="pagetitle">
    <span> Dashboard </span>
    </h1>

    I tried the following with no success:

    Any idea?

    Thanks for your help

    1. Sebastien Close

      Just go it, thanks to Firebug ;-)

      1. Emil Sjödin

        Perfect, we will improve this documentation.

        Cheers

  13. chitra patil

    Hi,
    I am trying to add a banner and the logo on top where the logo is present; I am trying to upload the combined banner+logo and uploaded. However, the banner is squished and appears distorted. I added the following code in CSS stylesheet:

    img.global {  
   height:300px;  
   width:200px;  
}  
h1.pagetitle img {  
     max-height:300px;  /* Should be the same than the previous height */  
}

    It still doesn't change–what should I change here img.global to img.space? is pagetitle.img a variable that needs some value? Appreciate any help here.

  14. Craig Hylwa

    .wiki-content h3   

    {   

    text-decoration:underline;   

    }  



    I have added this to the global stylesheet section but it has not caused the h3 to have an underline

    1. Emil Sjödin

      It should work, when I tried your code it worked fine.

      Please make sure that there is no other code in the custom section that could cause an error.

  15. Michael Roff

    Emil,

    When zooming out on a Confluence page that is using Refined Wiki, you get to a point where the page ceases to dynamically resize and you get big side bars on either side of the page.

    Is there a way to increase the amount of zoom supported within RefinedWiki so that the page can be viewed at a higher zoom level than currently?

    The reason for this is when viewing large drawings or diagrams, you can fully utilise large panel monitors to get a better overall view of the page rather than having to scroll.

    Thanks, Mick

  16. Florent Girard

    Hi,

    I would like to change the style (color and size) of the pagetree in the left column of every space.

    I am new to CSS. What should I do ?

    Best regards,

     

    Florent 

    1. Emil Sjödin

      Which version of the theme are you using?

  17. Florent Girard

    I also would like to change the name "Dashboard"  in the top menu. How shoult I proceed ?

    Best regards,

    F.

    1. Emil Sjödin

      Hi Florent,

      You find more information about changing the dashboard name here: https://confluence.atlassian.com/display/DOC/Modify+Confluence+Interface+Text