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

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

0 vote
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!

Suggest an answer

Log in or Sign up to answer
Atlassian Community Anniversary

Happy Anniversary, Atlassian Community!

This community is celebrating its one-year anniversary and Atlassian co-founder Mike Cannon-Brookes has all the feels.

Read more
Community showcase
Published yesterday in Confluence

Think you know shares vs. @mentions in Confluence? Take this collab quiz.

To anyone who doubts that Atlassians are a little too obsessed with collaboration, and tools related thereto, let me describe a recent discussion we had (which took place on our internal Confluence, ...

108 views 2 4
Read article

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