Uptime Kuma CSS: Customize Your Uptime Monitoring Dashboard With This Styling Guide

ByVictor

Uptime Kuma CSS turns a plain status page into a trust signal — when uptime is on the line, a clean, branded view helps customers judge reliability in seconds.

You use Uptime Kuma CSS to make critical states pop, reduce clutter, and keep eyes on what matters during incidents or at 2 a.m. on-call moments.

With Uptime Kuma CSS, you paste simple rules into the Custom CSS box — no templates, no rebuilds — then shape colors, grids, badges, and typography to match your brand.

You’ll see quick wins fast:

  • Sharper readability: better contrast, clearer badges, calmer spacing.
  • Brand alignment: colors and fonts that match your site.
  • Wallboard-ready layouts: dense, consistent cards that scan well on 4K.

You can keep a friendly public theme for customers and a high-contrast wallboard theme for the NOC, each tuned to how people actually view the page.

You don’t need a design degree to make Uptime Kuma Dashboard work for you. Start with a small palette, set a few tokens, and apply focused rules that improve clarity without adding noise.

Ready for a status page that reads at a glance and feels like part of your site? You’ll get copy-paste snippets, a one-file theme, and a simple checklist to test across mobile, laptop, and 4K—so you ship with confidence.

What You Can Change With CSS

You control the entire presentation layer:

  • Colors: backgrounds, surfaces, text, links, and badges
  • Spacing: padding, margins, gaps, and card density
  • Typography: font family, size, weight, and letter spacing
  • Layout: grid columns, card width, and wrapping behavior
  • Decor: gradients, shadows, and hero images
  • Accessibility touches: focus outlines, motion preferences, and contrast

You don’t change the HTML from the UI. You style what’s already there.

Aim for clarity first. Fancy visuals come after people can read the page quickly.

Where To Add Your CSS In Uptime Kuma

  1. open your dashboard and select status pages.
  2. choose the page you want to theme and click edit.
  3. scroll to custom css.
  4. paste your stylesheet, save, then hard-refresh the public page.
  5. verify on desktop, mobile, and a large monitor or TV.

Create a second status page for experiments so production stays clean.

Create A Consistent Brand Layer

Create A Consistent Brand Layer Uptime Kuma CSS

Define brand tokens in one place

Put your brand values in :root{} so every rule reuses the same tokens.

:root{
  --bg:#0f1115;           /* canvas */
  --surface:#151923;      /* cards */
  --text:#e9eef5;         /* default text */
  --muted:#9aa4b2;        /* subtle labels */
  --link:#0ea5e9;         /* links and accents */
  --ok:#16a34a;           /* up */
  --warn:#f59e0b;         /* maintenance / pending */
  --down:#ef4444;         /* down */
  --radius:12px;          /* corners */
  --pad:.75rem;           /* card padding */
  --gap:.75rem;           /* grid gap */
  --title:1.06rem;        /* card title size */
}

Then map those tokens to the page surfaces:

body{background:var(--bg); color:var(--text)}
a{color:var(--link)}
.item{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:var(--pad)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.wrap>.d-flex{color:var(--muted)}

Map uptime states to clear badges

Make Up, Warning, and Down instantly readable.

.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}
.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}
.badge.bg-danger,.text-bg-danger {background-color:var(--down)!important}

You want a viewer to know the state in one glance from five meters away.

Build A High-Density, Readable Layout

A responsive grid gives you more monitors per row—ideal for wallboards.

.container{max-width:98%} /* more breathing room edge-to-edge */

.monitor-list>.monitor-list{
  display:grid;
  grid-template-columns:repeat(auto-fit, minmax(28ch, .5fr));
  gap:var(--gap);
}

/* card internals stack nicely on narrow screens */
.item>.row{flex-direction:column}
.row>div{width:100%}
.item-name{font-weight:700; font-size:var(--title); letter-spacing:.2px}

.overall-status{padding:.5rem 0!important}

Why it works: you control minimum card width and let the grid auto-wrap. Cards never crush into unreadable columns.

Tighten Card Content And Hierarchy

Use spacing to guide the eye.

.item .badge{font-size:.9rem; line-height:1.2}
.item .progress{margin-top:.25rem}
.item .list-inline{margin:.25rem 0}

Short lines read faster. A subtle shadow helps separate layers without heavy borders.

Typography That Scales

Choose a solid system stack

Pick a robust, legible stack before importing any web font:

:root{
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body{font-family:var(--font-sans)}

If you must use a custom font

Self-host where possible, and allow graceful fallbacks.

@font-face{
  font-family:"InterVar";
  src:url(/assets/fonts/Inter-roman.woff2) format("woff2");
  font-weight:100 900; font-style:normal; font-display:swap;
}
body{font-family:"InterVar", var(--font-sans)}

Keep headings moderate. Oversized headings force more scrolling and hide active alerts.

Color, Contrast, And Accessibility

Good status pages feel calm and legible.

  • aim for AA contrast: 4.5:1 for normal text and 3:1 for large text.
  • make links distinct using color and a subtle underline on hover or focus.
  • avoid low-contrast “muted on muted” patterns for secondary text.
a:hover{text-decoration:underline}
a:focus{outline:2px solid currentColor; outline-offset:2px}

Respect motion preferences:

@media (prefers-reduced-motion: reduce){
  *{animation:none!important; transition:none!important}
}

Add a tiny focus ring. Keyboard users will thank you.

Backgrounds And Hero Treatments

You can keep it minimal with a soft gradient, or bring a photo in for a “status hero.”

/* gradient canvas */
body{
  background:
    radial-gradient(1200px 600px at 20% -10%, rgba(14,165,233,.16), transparent 60%),
    radial-gradient(900px 500px at 120% 10%, rgba(99,102,241,.12), transparent 60%),
    var(--bg);
}

/* optional full-bleed image */
body.with-bg{
  background: url('https://cdn.example.com/ops-hero.jpg') center/cover no-repeat;
}

If you add a photo, keep the rest of the palette simple so alerts remain the most saturated elements.

Responsive Behavior That Feels Natural

On phones

  • stack card content vertically.
  • bump the base font to 16–17px.
  • make tap targets at least 40px tall.
@media (max-width:480px){
  :root{--title:1.02rem}
  .item{padding:.85rem!important}
}

On 4K dashboards

  • increase title size slightly; avoid giant text.
  • space grid columns evenly and keep badge text near 0.95–1rem.
@media (min-width:2560px){
  :root{--title:1.15rem}
  .item .badge{font-size:.95rem}
}

Per-Page Themes For Different Audiences

Keep multiple status pages:

  • a public page with friendly branding and generous spacing.
  • a noc wallboard page with maximum density and high-contrast badges.
  • a sandbox page where you test changes first.

Each page has its own custom css field. Store each theme in a small repo so you can version, diff, and roll back.

Testing And QA Workflow

  1. create or pick a sandbox status page.
  2. paste your CSS, save, then open the public URL in a private window.
  3. check mobile, laptop, and 4K quickly with your browser’s responsive mode.
  4. scan the page from a distance. if down doesn’t jump out, adjust your red.
  5. run a contrast check on text color pairs you introduced.
  6. toggle reduced motion in devtools to confirm nothing animates unnecessarily.
  7. verify badge labels and card titles don’t wrap into awkward two-line stacks.

The goal is a quiet page that makes incidents loud.

Troubleshooting Common Issues

  • changes don’t show: you’re likely hitting cache. save, then hard-refresh.
  • logo or hero looks off-center: adjust margins in CSS; avoid editing HTML.
  • a rule “does nothing”: increase selector specificity or target the correct parent + child combo.
  • third-party theme clashes: paste your overrides at the very bottom so they win.

Security And Reliability Notes

  • keep the CSS small; don’t pull heavy external assets.
  • if you embed the status page in another site, review clickjacking settings and only frame pages you control.
  • test your theme after app updates in case class names change.

Maintainability And Versioning

  • keep a tiny overrides section separate from the base theme.
  • comment brand tokens with hex and plain-english names.
  • name files by audience: public.css, noc-4k.css, sandbox.css.
  • record badge mappings (up/warn/down) in a short readme so future you knows the logic.

Copy-Paste Starter Themes

A) Dark Pro (brand-forward, calm)

:root{
  --bg:#0f1115; --surface:#161b25; --text:#e9eef5; --muted:#9aa4b2; --link:#5cc8ff;
  --ok:#22c55e; --warn:#f59e0b; --down:#ef4444; --radius:12px; --pad:.8rem; --gap:.8rem; --title:1.08rem;
}
body{background:var(--bg); color:var(--text)}
a{color:var(--link)}
.container{max-width:98%}
.monitor-list>.monitor-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(28ch,.5fr)); gap:var(--gap)}
.item{background:var(--surface); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:var(--pad)!important; box-shadow:0 8px 20px rgba(0,0,0,.28)}
.item-name{font-weight:700; font-size:var(--title)}
.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}
.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}
.badge.bg-danger,.text-bg-danger{background-color:var(--down)!important}
.wrap>.d-flex{color:var(--muted)}
@media (min-width:2560px){:root{--title:1.16rem}}

B) Light Clean (crisp, print-friendly)

:root{
  --bg:#f8fafc; --surface:#ffffff; --text:#0b1220; --muted:#5b6472; --link:#0b73e0;
  --ok:#15803d; --warn:#b45309; --down:#b91c1c; --radius:10px; --pad:.9rem; --gap:.9rem; --title:1.04rem;
}
body{background:var(--bg); color:var(--text)}
a{color:var(--link)}
.monitor-list>.monitor-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(30ch,.55fr)); gap:var(--gap)}
.item{background:var(--surface); border:1px solid #e5e7eb; border-radius:var(--radius); padding:var(--pad)!important; box-shadow:0 6px 14px rgba(15,17,21,.06)}
.item-name{font-weight:700; font-size:var(--title); letter-spacing:.15px}
.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}
.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}
.badge.bg-danger,.text-bg-danger{background-color:var(--down)!important}

C) TV Wallboard (maximum density, high contrast)

:root{
  --bg:#0b0e14; --surface:#121722; --text:#edf2f7; --muted:#93a1b2; --link:#7dd3fc;
  --ok:#22c55e; --warn:#f59e0b; --down:#fb7185; --radius:10px; --pad:.6rem; --gap:.6rem; --title:1.02rem;
}
body{background:var(--bg); color:var(--text)}
.container{max-width:99%}
.monitor-list>.monitor-list{display:grid; grid-template-columns:repeat(auto-fit,minmax(26ch,.45fr)); gap:var(--gap)}
.item{background:var(--surface); border:1px solid rgba(255,255,255,.08); border-radius:var(--radius); padding:var(--pad)!important}
.item .badge{font-size:1rem}
.item-name{font-weight:800; font-size:var(--title)}
.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}
.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}
.badge.bg-danger,.text-bg-danger{background-color:var(--down)!important}

Pick one, change the hex values, and move on.

Example Table: Before/After Impact

areadefault experiencewith a tuned uptime kuma css
badge claritycolors vary by theme; sometimes low contraststrict, brand-mapped up/warn/down with strong contrast
scanning speedmany lines wrap across columnsgrid keeps cards consistent; titles bold; badges sized for distance
wallboard densitycards break into uneven stacksrepeatable minmax() columns reduce visual jumps
focus visibilitydefault outlines may blendexplicit focus ring and hover underline aid keyboard users
motionanimations may distract some usersprefers-reduced-motion respected; transitions removed
themingone look fits allseparate public and noc themes, each tuned to context

Practical Styling Recipes

Make links obvious without being loud

a{color:var(--link)}
a:hover{text-decoration:underline}

Soften card borders

.item{border:1px solid rgba(255,255,255,.08)}

Keep the hero subtle

.main{position:relative}
.overall-status{padding:.5rem!important}

Improve small meta text readability

.wrap>.d-flex{font-size:.95rem; color:var(--muted)}

Ready-To-Use One-File Theme (Paste And Tweak)

/* === Uptime Kuma: One-file Brand Theme === */
:root{
  --bg:#0e1015; --surface:#151a23; --text:#e8eef5; --muted:#9aa4b2; --link:#0ea5e9;
  --ok:#16a34a; --warn:#f59e0b; --down:#ef4444;
  --radius:12px; --pad:.75rem; --gap:.75rem; --title:1.06rem;
  --font-sans: ui-sans-serif, -apple-system, "Segoe UI", Roboto, "Helvetica Neue",
               Arial, "Noto Sans", "Liberation Sans", sans-serif, "Apple Color Emoji",
               "Segoe UI Emoji", "Segoe UI Symbol", "Noto Color Emoji";
}
body{background:var(--bg); color:var(--text); font-family:var(--font-sans)}
a{color:var(--link)}
.container{max-width:98%}
.monitor-list>.monitor-list{
  display:grid; grid-template-columns:repeat(auto-fit, minmax(28ch, .5fr)); gap:var(--gap)
}
.item{
  background:var(--surface);
  border:1px solid rgba(255,255,255,.08);
  border-radius:var(--radius);
  padding:var(--pad)!important;
  box-shadow:0 6px 18px rgba(0,0,0,.25);
}
.item-name{font-weight:700; font-size:var(--title); letter-spacing:.2px}
.badge.bg-success,.text-bg-success{background-color:var(--ok)!important}
.badge.bg-warning,.text-bg-warning{background-color:var(--warn)!important}
.badge.bg-danger,.text-bg-danger {background-color:var(--down)!important}
.wrap>.d-flex{color:var(--muted)}
.overall-status{padding:.5rem 0!important}
@media (prefers-reduced-motion: reduce){*{animation:none!important; transition:none!important}}
a:focus,button:focus{outline:2px solid currentColor; outline-offset:2px}
@media (max-width:480px){:root{--title:1.02rem} .item{padding:.85rem!important}}
@media (min-width:2560px){:root{--title:1.15rem} .item .badge{font-size:.95rem}}

Paste the block, change the hex values to your brand palette, and you’re live.

Final Checklist Before You Ship

  1. set color tokens in :root{} (background, surface, text, link, up/warn/down).
  2. confirm badge colors meet AA contrast on both light and dark backgrounds.
  3. test mobile, laptop, and 4K; adjust --title and grid columns as needed.
  4. toggle reduced motion and verify no distracting animation remains.
  5. keep a sandbox page for experiments; promote to public or noc after QA.
  6. version your CSS in a repo and keep a tiny overrides section for future updates.

A clean status page reduces stress during incidents. Clarity pays for itself every single time.

Similar Posts