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?

 

Thanks!

2 answers

This widget could not be displayed.

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

https://confluence.atlassian.com/doc/styling-confluence-with-css-166528400.html

 

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

This widget could not be displayed.
Steven Behnke Community Champion 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 Champion 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 – 

.panelHeader{
    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 Champion 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 Champion 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 Champion 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 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
Community showcase
Posted Monday in Confluence

Why start from scratch? Introducing four new templates for Confluence Cloud

Hi my Community friends!  For those who don't know me, I'm a product marketer on the Confluence Cloud team - nice to meet you! For those of you who do, you know that I've been all up in your Co...

496 views 7 6
Join discussion

Atlassian User Groups

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

Find a group

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

Find my local user group

Unfortunately there are no AUG chapters near you at the moment.

Start an AUG

You're one step closer to meeting fellow Atlassian users at your local meet up. Learn more about AUGs

Groups near you