nav[aria-label="Primary Navigation"] { padding: 0; & ul { list-style: none; width: 100%; display: flex; flex-direction: row; justify-content: start; align-items: start; gap: 30px; padding: 0; & li { margin: 0; } & ul li { list-style: none; } } }

Can I use CSS to style Panels and Section?

unknown

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!

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

Accepted answers

All comments

Siddheshwar mhetre_l4zeyg

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

image2016-2-5 22:22:36.png

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

Steven F Behnke

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

unknown

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

unknown

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 –

&lt;div class="panelHeader" style="border-bottom-width: 1px;"&gt;&lt;b&gt;Title&lt;/b&gt;&lt;/div&gt;

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