Confluence CSS site-wide style sheet
Platform Notice: Data Center Only - This article only applies to Atlassian products on the Data Center platform.
Note that this KB was created for the Data Center version of the product. Data Center KBs for non-Data-Center-specific features may also work for Server versions of the product, however they have not been tested. Support for Server* products ended on February 15th 2024. If you are running a Server product, you can visit the Atlassian Server end of support announcement to review your migration options.
*Except Fisheye and Crucible
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:
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
/*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;
}Was this helpful?