Custom CSS

You can change the look of your status page by editing the custom CSS code for that page.

1. Edit one of your status pages and scroll down to the tab "Customizations"

2. Find the CSS editor:

Below, you can find an example code you can copy and paste into the custom CSS input:

/* Theme by Uptime.Domains */

/* Change the HEX color codes below to fit your branding */
:root {
  --main-color: #0077FF;
  --sub-color: #E3EDE8;
  --dark-color: #0C431F;
  --danger: #FA3134;
  --white: #FFF;
  --black: #000;
  --background-color: #F5F5F7;
  --grey-light: #8e8e8e;
}

/* Hide darkmode - If you want to use darkmode delete this part and use: [data-theme-style="dark"] to style the darkmode*/
body > footer > div > div.mb-0.mb-lg-0 > a:nth-child(1) {
  display: none;
}

/* background color */
body{
	 background-color: var(--background-color); 
	 color: var(--black);
}

.btn-blue-50:hover{
	color: #FFF;
	background-color: var(--main-color);
	border-color: var(--main-color);
	transition: all 0.2s ease-in-out;
}
@media (max-width: 620px) {
	.d-flex{
	display: inline-block !important;
}
}

/* Icons */
.bg-blue-50{
	background-color: var(--white)!important;
	border-color: var(--sub-color);
	transition: all 0.2s ease-in-out;
}

.text-blue-800{
	color: var(--main-color) !important;
	transition: all 0.2s ease-in-out;
}

/* Navbar border on Mobile */
.status-page-navbar {
	border-bottom: 1px solid var(--white);
}

/* Navbar custom Logo mobile */
.status-page-navbar-logo {
	max-height: 2.5rem;
}

/* Navbar custom Logo desktop */
.status-page-logo {
	width: 4rem;
	max-width: 4rem;
}

/* Title */
.status-page-title {
	color: var(--black);
}

/* Other texts */
.text-muted {
	color: var(--black) !important;
}

/* Breadcrumbs menu */
.custom-breadcrumbs > li > a {
	color: var(--black);
	transition: all 0.2s ease-in-out;
}
.custom-breadcrumbs > li.active {
	color: var(--main-color);
	transition: all 0.2s ease-in-out;
}
.custom-breadcrumbs > li > a:hover {
	color: var(--main-color);
	transition: all 0.2s ease-in-out;
}

/* Header card */
.bg-blue-900{
	background-color: var(--black)!important;
}

/* Header sub title */
.text-gray-400{
	color: var(--grey-light)!important;
}

/* Check icon */
.text-primary-400{
	color: var(--main-color) !important;
}
.text-primary{
	color: var(--main-color) !important;
}

/* Trouble icon */
.text-danger{
	color: var(--danger) !important;
}

body > main > div.container.mt-4 > div.row.justify-content-between.my-4 > div:nth-child(3) > div > div > div:nth-child(1) > div > div > div{
	color: var(--danger) !important;
}

/* Title */
.status-page-title{
	color: var(--black);
	transition: all 0.2s ease-in-out;
}
.status-page-title:hover{
	color: var(--main-color) !important;
	transition: all 0.2s ease-in-out;
}


/* Cards */
.card{
	border: 1px solid var(--white)!important;
	background-color: var(--white);
	border-radius: 10px;
}

/* Insidents table */
.table-custom-container{
	background-color: #fff;
	border: 1px solid #fff!important;
}

.table-custom tr:nth-child(even){
  background-color: #fff;
}

.table-custom tbody tr td{
		border: 1px solid #fff!important;
}

tr{
	border-bottom-color: var(--background-color);
	border-bottom-width: 1px;
	border-bottom-style: solid!important;
}

th{
	color: #000!important;
}

/* Share buttons */
.btn-blue-50{
	color: var(--main-color);
	background-color: var(--white);
	border-color: var(--white);
	transition: all 0.2s ease-in-out;
	
}
/* Date picker */

/* Date button */
.btn-outline-secondary{
	color: var(--black);
	background-color: var(--white);
	border-color: var(--white);
	transition: all 0.2s ease-in-out;
}
.btn-outline-secondary:hover{
	background-color: var(--main-color);
	border-color: var(--main-color);
	transition: all 0.2s ease-in-out;
}
.btn:focus, .btn.focus{
   box-shadow: none !important;
}

/* Button */
.btn-primary{
	background-color: var(--main-color);
	color: var(--white);
	border-color: var(--main-color);
	transition: all 0.2s ease-in-out;
}
.btn-primary:hover{
	background-color: var(--black);
	color: var(--white);
	border-color: var(--black);
	transition: all 0.2s ease-in-out;
}

.cancelBtn:hover{
	color: var(--danger);
}

/* Days hover */
.daterangepicker td.available:hover,
.daterangepicker th.available:hover {
    background-color: var(--background-color)!important;
    border-color: transparent;
    color: var(--black)!important;
}
/* Days active */
.daterangepicker td.active,
.daterangepicker td.active:hover {
    background-color: var(--main-color)!important;
    border-color: transparent;
    color: var(--white)!important;
}

/* Days not available */
.daterangepicker option.disabled,
.daterangepicker td.disabled {
    color: var(--background-color);
    cursor: not-allowed;
    text-decoration: line-through;
}
/* Days background */
.daterangepicker .calendar-table {
    border: 1px solid var(--white)!important;
    background-color: var(--white)!important;
}

/* pointer background */
.daterangepicker:after,
.daterangepicker:before {
    position: absolute;
    display: inline-block;
    border-bottom-color: var(--white)!important;
    content: "";
}
/* Date picker open background */
.daterangepicker {
    position: absolute;
    color: inherit;
    background-color: var(--white);
    border-radius: 6px;
    border: 1px solid var(--white);
}

/* Custom time period */
.daterangepicker .ranges li:hover {
    background-color: var(--background-color);
    color: var(--black);
}
.daterangepicker .ranges li.active {
    background-color: var(--main-color)!important;
    color: var(--white)!important;
}