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?

Allan Engle Feb 05, 2016

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

0 votes
Siddheshwar mhetre Feb 05, 2016

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


Allan Engle Feb 05, 2016

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.

Allan Engle Feb 05, 2016

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.

Like Khartuev Dmitry likes this
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;
Allan Engle Feb 05, 2016

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

Allan Engle Feb 06, 2016

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!

Zack Fair May 14, 2018

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

Suggest an answer

Log in or Sign up to answer
This widget could not be displayed.
This widget could not be displayed.
Community showcase
Published in Confluence

6 Awesome Ways to Apply Trello, JIRA and Confluence to your Project

I attended  Atlassian Summit 2019  and learned a lot from the presenters, attendees and knowledgeable Atlassian product managers. The presentations I attended focused on applying Agile, pla...

1,296 views 8 19
Read article

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