Confluence CSS site-wide style sheet

Still need help?

The Atlassian Community is here for you.

Ask the community

Platform Notice: Server and Data Center Only - This article only applies to Atlassian products on the server and data center platforms.

 

Summary

You need to customize the CSS stylesheet of multiple spaces and don't want to rely on manually editing each color field in the Space Tools > Look and Feel Color Scheme page. This article may help you to achieve this.

Solution

This is a comprehensive CSS style sheet that compiles most of the color fields from that page and includes the CSS block to also customize sidebar color. It can be used in the Space Tools > Look and Feel Stylesheet page:

Space's CSS Stylesheet
/*Top Bar*/
#header .aui-header {
    background-color: #bb2222;   
}
/*Top Bar Text*/
.aui-header .aui-dropdown2-trigger, #header .aui-header .aui-nav-link, #header .aui-header .aui-nav-imagelink, #header .aui-header a {
    color: #00cc00;   
}
/*Header Button Background*/
#header .aui-header .aui-nav .aui-button-primary{
    background-color: #FF4444;
}
/*Header Button Text*/
#header .aui-header .aui-nav .aui-button-primary{
    color: #00cc00;
}
/*Top Bar Menu Selected Background*/
#header .aui-header a:focus, #header .aui-header a:hover, #header .aui-header .aui-nav-imagelink:hover, #header .aui-header a:active {
    background-color: rgba(100, 9, 9, 0.48);
}
/*Top Bar Menu Selected Text*/
#header .aui-header a:focus, #header .aui-header a:hover, #header .aui-header .aui-nav-imagelink:hover, #header .aui-header a:active {
    color: #FF0000;
}
/*Top Bar Menu Item Text*/
.aui-dropdown2-in-header.aui-style-default a, .aui-dropdown2-in-header.aui-style-default a:visited, .aui-dropdown2-in-header.aui-style-default a:link, .aui-dropdown2-in-header.aui-style-default:hover a, .aui-dropdown2-in-header.aui-style-default:hover a:visited, .aui-dropdown2-in-header.aui-style-default:hover a:link {
    color: #00FF00;
}
/*Menu Item Selected Background*/
.aui-dropdown2.aui-style-default:hover a:not(.aui-dropdown2-disabled):focus, .aui-dropdown2.aui-style-default:hover a:not(.aui-dropdown2-disabled):hover, .aui-dropdown2.aui-style-default:hover a.active:not(.aui-dropdown2-disabled), .aui-dropdown2.aui-style-default:hover .aui-dropdown2-radio:not(.aui-dropdown2-disabled):hover {
    background-color: #000044;
}
/*Menu Item Selected Text*/
.aui-dropdown2.aui-style-default:hover a:not(.aui-dropdown2-disabled):focus, .aui-dropdown2.aui-style-default:hover a:not(.aui-dropdown2-disabled):hover, .aui-dropdown2.aui-style-default:hover a.active:not(.aui-dropdown2-disabled), .aui-dropdown2.aui-style-default:hover .aui-dropdown2-radio:not(.aui-dropdown2-disabled):hover {
    color: #FF00FF;
}
/*Search Field Background*/
.aui-header .aui-quicksearch input[type='text']{
    background-color: rgba(100, 9, 9, 0.48);
}
/*Search Field Text*/
.aui-header .aui-quicksearch:after, .aui-header .aui-quicksearch input[type='text'][type='text']:focus {
    color: #FF0000;
}
/*Heading Text*/
h1, h2, h3, h4, .wiki-content h1, .wiki-content h2, .wiki-content h3, .wiki-content h4{
    color: #888800;
}
/*Links*/
.wiki-content a, .wiki-content a:link, .wiki-content a:visited, .wiki-content a:focus, .wiki-content a:hover, .wiki-content a:active {
    color: #CC00CC;
}
/*Sidebar*/
.acs-side-bar {
    background-color: #f4f5f7;
}
Last modified on Mar 30, 2021

Was this helpful?

Yes
No
Provide feedback about this article
Powered by Confluence and Scroll Viewport.