Showing results for 
Search instead for 
Did you mean: 
Sign up Log in

Next challenges

Recent achievements

  • Global
  • Personal


  • Give kudos
  • Received
  • Given


  • Global

Trophy case

Kudos (beta program)

Kudos logo

You've been invited into the Kudos (beta program) private group. Chat with others in the program, or give feedback to Atlassian.

View group

It's not the same without you

Join the community to find out what other Atlassian users are discussing, debating and creating.

Atlassian Community Hero Image Collage

Can I use CSS to style Panels and Section?

it's great that we have the ability to add CSS code to a Space.

Is there a reference that will tell me what selectors to use to style Panels and Sections so we can modify a style sheet rather than update dozens of pages of panels and sections just to change a header color?



2 answers

Hi Allan,

 You can change you space look and feel using CSS code

Go to the space -> in left sidebar you can find the Space Tools tab image2016-2-5 22:22:36.png

In that tools there is Look and Feel tab, there you can change header directly from Colour Scheme tab or you can add CSS code in Stylesheet tab.


image2016-2-5 22:21:54.png


To add css code please refer below link


already did that.  it's a bit useless if I don't know the selectors to style, eh? (hence the question here).

0 votes
Steven Behnke Community Leader Feb 05, 2016

There is no reference. Use your browsers Inspect function to find the appropriate selectors.

did that.  I got 'div' and 'panel'.  didn't work.  Which is why I'm asking here.

No reference?  Then why give us the option?  Seems like an unusual option to have if I can't find/determine the selectors I want to style.

Steven Behnke Community Leader Feb 05, 2016

No offense intended, but you don't know what you're doing. Please be careful when making modifications but I'll let you know what you're doing wrong. Let me repeat – There is no reference. You need to find the selectors yourself. No one who knows how to use a Browser Developer Tools would complain so it sounds like you're not familiar.

You mention you found "div" and "panel" but you make no distinction. DIV is an element. DO NOT TARGET DIRECT ELEMENTS! :smile: Panel is a styling class that can be applied to many elements. We should target classes!

Inspecting right on the panel header shows me this – 

<div class="panelHeader" style="border-bottom-width: 1px;"><b>Title</b></div>


I should NOT select DIV, I should select the panelHeader class to change the header background. Selecting div.panelHeader would also be safe. Further inspecting the CSS, I can see that .panelHeader has the following styles – 

    padding: 10px;
    border-bottom: 1px solid #ddd;
    background-color: #f7f7f7;


Obviously if I want to override the header background, I should override the panelHeader class's background-color property.

For instance, I input this CSS into my Space Stylesheet – 

.panelHeader {
    background-color: #205081;


This is the result – 

image2016-2-5 11:5:47.png

Steven Behnke Community Leader Feb 05, 2016

One last tip – CSS is based off specificity. If you aren't being more specific than other CSS, your new style may not affect anything. To boost your specificity, you can more directly target the element though the use of multiple selectors or ID selectors, or you can add !important to your style like so – 


.panelHeader {
    color: #205081 !important;

No offense intended but I do know what I'm doing.  Been doing it for nearly 10 years thanks.  I found the CORRECT reference with the correct properties for the selector.  The first reference I came across was a fat mistake, which is why nothing was working.  Yes, I found the tags after i read your post using developer tools.  I had the correct selectors (.panelHeader), justt not the right properties.  I was able to change the panel macro display.


Now, if Confluence used 'Master page" concepts for the templates this would be a lot easier, meaning, I could update a template and all pages that used that template would also update.  I'm trying to 'replicate' the effect via CSS.  Now I can change the CSS and boom...pages update.


thanks for your help.  and the example.

Steven Behnke Community Leader Feb 05, 2016

Sorry, I was trying to be polite but sometimes over text it's not so easy. :wink:

I think some add-on providers are close to providing "master pages" but they seem to be relegated to theming add-ons. Not sure what options there are out there.

It sounds to me like you'd like to set a new default behavior or overwrite the default style but this isn't 'easy.'

I get it.  You're kinda right.  I don't know what I'm doing in regards to using CSS in a Confluence sense not knowing the right selector names.  But i got it.

Steven Behnke Community Leader Feb 06, 2016

Feel free to ask more questions! I'm here a lot. Good luck regardless and good day!

Old discussion, however, I was trying to do the same thing. I found the selectors for both parts of a panel. Using the browsers source inspector I found that the selectors used for a panel are 'panelHeader' and 'panelContent'.

I am simply blown away that the default selectors for Confluence aren't part of official documentation. Additionally, I can't find any books on SafariBooks or Amazon for Confluence that has been published in the last 5 years.

Looking for the same things! It is a shame that the default selectors for Confluence are not available in the documentation.

Suggest an answer

Log in or Sign up to answer
Community showcase
Posted in Confluence

What do you think is the most *delightful* Confluence feature? Comment for a prize!

- Create your own custom emoji 🔥 - "Shake for Feedback" on mobile 📱 - An endless supply of GIFs via GIPHY 🤩 Is there anything quite as nice as a pleasant surprise? Comment below with what...

335 views 23 8
Join discussion

Community Events

Connect with like-minded Atlassian users at free events near you!

Find an event

Connect with like-minded Atlassian users at free events near you!

Unfortunately there are no Community Events near you at the moment.

Host an event

You're one step closer to meeting fellow Atlassian users at your local event. Learn more about Community Events

Events near you