Can I use CSS to style Panels and Section?

[[deleted]]

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!

[Steven F Behnke]

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

[[deleted]]

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 F Behnke]

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 F Behnke]

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;
}

[[deleted]]

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 F Behnke]

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

[[deleted]]

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 F Behnke]

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

[Steve Behnke [D1]

@Allan Engle, I found this resource on the knowledgebase – https://confluence.atlassian.com/display/CONFKB/How+to+hide+elements+in+Confluence+using+CSS+or+JavaScript

[Zack Fair]

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.

[Elena_Lurye]

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

[Siddheshwar mhetre]

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

[[deleted]]

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