Migrate Statuspage to use Atlassian accounts
Learn everything you need to know to migrate you and your team to Atlassian accounts.
Use custom CSS on a status page
You must set up a custom domain (e.g. status.companyname.com) in order to publish custom CSS.
Where Custom CSS Gets Inserted
Anything entered into the custom CSS field gets put into an external style sheet that will be included in the <head> of the document. This external stylesheet is inserted after the main stylesheet so that you can override styles as you see fit.
Check out our Customizations cookbook for helpful code snippets to customize your page!
Security headers such as X-Frame-Options are not allowed in status pages to enable cross-origin requests.
Notable Existing CSS Classes
There are several CSS classes defined by default that you'll want to be aware of
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
// defines the width of the content
.container {
width: 90%;
max-width: 850px;
}
// the default font-size used on the page
.font-regular {
font-size:1rem; // 16px
line-height:1.5rem;
@media screen and (max-width: 650px) {
font-size:.875rem; // 14px
line-height:1.3125rem
}
}
.font-large {
font-weight:500;
font-size:1.25rem; // 20px;
line-height:1.875rem;
@media screen and (max-width: 650px) {
font-size:1.125rem; // 18px;
line-height:1.6875rem;
}
@media screen and (max-width: 450px) {
font-size:1rem; // 16px
line-height:1.5rem;
}
}
.font-largest {
font-weight:500;
font-size:1.75rem; // 28px;
line-height:2.625rem;
@media screen and (max-width: 650px) {
font-size:1.375rem; // 22px;
line-height:2.0625rem;
}
@media screen and (max-width: 450px) {
font-size:1.125rem; // 18px;
line-height:1.6875rem;
}
}
Was this helpful?
Still need help?
The Atlassian Community is here for you.