October DealsAmazon USOctober deal check: compare before you payAmazon US: current deals, useful picks and tech finds.Check DealsSlow PC?RecommendedPC slow today? Run a repair scan before it gets worseResolve common Windows issues and optimize system performance.Scan NowOctober DealsAmazon USDeal season is back - check today's better picksAmazon US: current deals, useful picks and tech finds.See Picks×
Skip to content
World desk10 min

How to Customize Uptime Kuma Status Pages With Custom CSS

A practical guide to styling Uptime Kuma status pages with Custom CSS, including the exact editor path, responsive layout examples, five-minute cache behavior, version-specific troubleshooting, theme maintenance, and iframe security cautions.

Free tools Windows power users keep installed

One-click scans. No signup required.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Uptime Kuma lets you style each status page from its own editor: open Dashboard → Status Pages, choose a page, select Edit Status Page, scroll to Custom CSS, paste your stylesheet, and click Save. Then test the public /status/<slug> address in a new tab. Status-page results are cached for five minutes and the page refreshes every five minutes, so a saved rule may not appear immediately.

Custom CSS can change colors, typography, spacing, columns, visibility, and other presentation details, but only when your selectors match the HTML rendered by your installed Uptime Kuma release. The reliable workflow is to start with one obvious rule, verify it on the public page after the cache interval, and add the rest of the design incrementally.

As an Amazon Associate I earn from qualifying purchases.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Where to paste custom CSS in Uptime Kuma

Custom CSS is configured per status page rather than as a dashboard-wide preference. Repeat the procedure for every page that needs styling.

  1. Sign in to the Uptime Kuma dashboard.
  2. Open Status Pages.
  3. Select the status page you want to change.
  4. Click Edit Status Page.
  5. Scroll to the Custom CSS text area.
  6. Paste valid CSS into the field and click Save.
  7. Open the page’s public /status/<slug> path in a fresh browser tab.

Do not judge the result solely from the editor view. The editor and the public route can render differently, and the public route is subject to Uptime Kuma’s documented five-minute result cache and five-minute page-refresh interval. Keep the tab open long enough for both the cache and refresh cycle to pass before deciding that a rule failed.

#1 Best Overall
Sale
TOZO A1 Wireless Earbuds Bluetooth 5.3 Light Weight in Ear Headphones | IPX5 Waterproof,2 Mics for AI Calls,Immersive Premium Sound Bass Headset with Charging Case,32 EQ via App Black
  • [Ultra-Lightweight Ear Buds Designed for Small Ears] Each earbud weighs only 3.7g and features a compact, ergonomic in-ear design made especially for small ears. Secure, low-profile, and comfortable for workouts, all-day wear or overnight sleeping.The ultra-slim profile sits flush in your ear with no hard edges poking or rubbing, so you can even sleep on your side without discomfort.
  • [Immersive Stereo Sound with TOZO OrigX Technology] TOZO OrigX tuning delivers clear vocals, balanced mids, and natural stereo sound for music, podcasts, and videos.
  • [Long Battery Life for Daily Use] Get up to 7 hours of playtime on a single charge, with up to 32 hours total using the charging case—ideal for workdays, commuting, and extended listening sessions.
  • [Bluetooth 5.3 & Stable Connection] Bluetooth 5.3 provides fast pairing, stable wireless performance, and reduced dropouts as you move around home or office.
  • [Deep Bass with Clear Vocals] High-performance drivers produce punchy bass while keeping vocals clean and detailed for everyday listening.

What custom CSS can change

CSS changes presentation; it does not alter monitor checks, notification logic, incidents, or the data returned by Uptime Kuma. In practice, a stylesheet can control four broad areas.

Brand colors and typography

You can set page and text colors, border colors, spacing, and font stacks. A font must already be available to the browser or be loaded by the page; specifying a family that visitors do not have simply causes the browser to fall back to the next family in your stack.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
:root {
  --brand-blue: #165d9c;
  --brand-ink: #1f2933;
  --brand-surface: #f5f7fa;
  --brand-border: #d7dee7;
}

body {
  background: var(--brand-surface);
  color: var(--brand-ink);
  font-family: Inter, system-ui, -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
}

The custom properties above are only variables. They affect the page when your later rules use them, and a community theme may define its own variable names. When adapting a theme, inspect its :root {} block first and change the values there instead of hunting through every declaration.

Layout and spacing

Selectors that match the rendered status-page markup can change widths, gaps, padding, alignment, and column behavior. A community theme demonstrates a two-column layout on wide screens and a single column on narrow screens. If monitor tags are enabled, its author recommends staying with one column because tags can make multi-column cards harder to scan.

/* Illustrative layout rule: confirm the container selector in your page first. */
@media (min-width: 900px) {
  .status-list {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 1rem;
  }
}

@media (max-width: 899px) {
  .status-list {
    display: block;
  }
}

.status-list is an example selector, not a guaranteed Uptime Kuma API. Replace it with the class or element you see in your own page’s markup. Comment out the wide-screen grid rule when you want one column at every width.

Rank #2
Sale
Smart Watch for Men Women Compatible with iPhone Samsung Android Phone 1.69 inch Full Touch Screen IP68 Waterproof Bluetooh Fitness Tracker Heart Rate/Sleep Monitor (Black)
  • 【IP68 Waterproof Multifunctinal Smart Watch】Torjalph fitness activity tracker smart watch is IP68 waterproof technology ,you can wear it when swimming,handwashing,it's rain-proof which means that you perform multiple exercise modes outside without worrying about sweat or rain corroding your fitness smart watch,and this watch equipped with a 230 mAh large capacity battery magnetic charging ,and this sports activity tracker watch can be used 5-7 days If fully charged.
  • 【Larger 1.83'' Full Screen Watch & Multi-dial Selection】1.83 inch full HD color touch screen smart watch for men / women provides excellent 240*284 resolution image quality ,This Bluetooth smart watch offers a better touch experience and remarkable immersion and ,more than 200 watch faces for you to choose from App"Da Fit ", you can change the dial style according to your mood to wear keeping the world on your wrist
  • 【Accurate Activity Tracker Smart Watch 】sports watch activity tracker uses sweat and dust resistant breathable silicone strap, our Fitness Tracker Smart Watch for Android iOS Phones supports 12 sports modes,walking,running,bicycle,swimming,badminton,basketball,football,rope skipping. This bluetooth calls smart watch for men women is lightweight and stylish, bringing more convenient and relaxing sports experience while also providing more protection.
  • 【Your 24 Hour Personal Daily Health Monitor】Fitness watch for women men full touch screen IP67 waterproof bluetooth smartwatch for Android iOS Phones with heart rate blood pressure monitor multifunction Andriod smart watch with steps counter sleep monitor sports fitness watch, monitoring blood oxygen saturation allows you to understand your physical condition in real time to track fitness progress ,to know your health status in time.
  • 【More Functions Bluetooth Call Smart Watch】This fitness activity smart watch full screen for iPhone and Android phones includes a bunch of new features including:The bluetooth smart watch can hang up the phone, receive and display WhatsAPP /Text /Facebook /Twitter /Messenger reminder.Support sedentary reminder, alarm clock, stopwatch, timer,weather information,music control, remote camera control compatible with Android 5.0 and above or iOS 9.0 and above smartphones.

Visibility

To hide an item, target a specific class or element rather than using a broad rule that could remove unrelated content. For example, a historical issue used .overall-status { display: none; } as a reproduction. That issue concerned version 1.18.4 and should not be treated as proof that the same selector or behavior is current in every release.

What’s actually slowing this PC down?

Pick the symptom - the matching free tool is one click away.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
/* Verify this class in developer tools before using it. */
.overall-status {
  display: none;
}

Hiding a summary can remove context that visitors need, so consider reducing its size or changing its colors before removing it entirely.

Refresh-timer presentation

The Cute Kuma community theme hides the refresh message by default. Its documentation says to remove or comment out display: none; from .refresh-info when you want the timer visible again.

/* Restore the timer if your theme hid it. */
.refresh-info {
  display: block;
}

As with every class-based example, confirm that your installed page actually renders .refresh-info before relying on the rule.

A safe way to build your stylesheet

Large pasted themes are difficult to debug. Build a small, reversible stylesheet and keep a copy outside Uptime Kuma so you can restore it after an edit.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.
Rank #3
New Bee Guitar Cable 10ft Electric Instrument Bass AMP Cord
  • [Low Noise High Fidelity] New bee guitar cord with 22AWG oxygen-free-copper center conductors provides enhanced signal transfer, the PVC insulation material and the high-density stranded copper double shield provide noise rejection for quiet operation
  • [Ideal for Choice] New bee 1/4 straight and right angle metal connectors, ensures a secure connection in any instrument, pedal, or amp jack. L shape great fro on stage guitar stands
  • [Wide Compatible] Suitable for mixer, power amplifier, microphone, effector, decoder, equalizer, electoronic organ, electric guitar, electric bass and other electronic equipments. Widely used in the installation of smart home, karaoke speaker, professional stage audio, etc
  • [Easy Disassemble] Making incidental repairs quick and easy! Very nice, flexible cable
  • [Dont Hesite to Order] 24 hours customer services and professional technology team are standing by
  1. Start with one visible test. Change a page background or heading color. Save, open the public route, and wait through the cache/refresh interval.
  2. Inspect the rendered markup. Use your browser’s developer tools on the public page to identify the element, class, and computed styles you need. Check whether your rule appears in the loaded styles and whether another rule has greater specificity.
  3. Add a base layer. Define colors, font stacks, border treatments, and spacing in a :root block and a few focused selectors.
  4. Add responsive rules. Use media queries for wide and narrow screens. Test a phone-sized viewport as well as a desktop window.
  5. Add visibility changes last. Hiding status summaries, tags, or timers can make the page less informative; make those changes only after the basic design is stable.
  6. Save a known-good copy. Keep the exact CSS in version control or a dated text file. If a later edit breaks the page, replace the field with that copy and save.

A minimal test might look like this:

body {
  background-color: #f2f6fa;
}

If this does not appear on the public page after the documented interval, stop adding rules and troubleshoot the delivery path first.

Adapting a community theme

Cute Kuma documents light and dark themes, responsive columns, and a refresh-timer rule. You can copy a theme into the Custom CSS field and then customize its :root {} variables. This is faster than designing every component yourself, but it creates a larger block of CSS that must be kept compatible with your Uptime Kuma version.

Change variables before selectors

Find the theme’s variable declarations and change the color, surface, border, radius, and spacing values there. This preserves the theme’s relationships between components. Editing dozens of individual declarations can leave cards, headings, and hover states with inconsistent colors.

Choose columns deliberately

Two columns can reduce scrolling on a wide monitor, while one column is easier to scan on phones and when monitor tags are displayed. Keep the theme’s media-query breakpoints only if they match the screen sizes your audience uses. If tags make cards tall or uneven, use one column rather than forcing a dense grid.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Keep a local source copy

Because the CSS is pasted into a text area, Uptime Kuma is not a substitute for source control. Store the original theme, your variable changes, and a short note about the Uptime Kuma version you run. When you upgrade Uptime Kuma, recheck selectors and responsive behavior on the public page.

Rank #4
BSIMB 15.6" Digital Family Calendar & Chore Chart, No Subscription Fees
  • Digital Family Calendar: BSIMB digital calendar wall touch screen puts an end to your chaotic life. Designed for busy families, the digital calendar keeps you organised and in step with your family. Assign different colours and tasks to each family member to make family scheduling easier and more intuitive.
  • Easy Setup and Auto-Sync: Plug in, connect to WLAN and auto-syn your electric calendar in minutes. Digital wall calendar compatible with Google calendar, iCloud calendar, Outlook calendar, Cozi calendar and Yahoo calendar. Add events directly on the device or through the ecalendar app. Electronic calendar stays current whether you're at work or traveling—no manual updates needed.
  • All-In-One Home Assistant: Smart calendar builds habits and encourage independence with personalised chores. Display daily meal plan to reduce the daily ‘What's for dinner?’ stress. To-do lists keep track of everything you want. Turning chores into valuable achievements with stars and rewards, making life easier and more enjoyable.
  • Manage Anytime Anywhere: BSIMB electronic calendar for family stay connected with the powerful ecalendar app. Access and manage your digital wall calendar anytime, anywhere with free features like stars & rewards, photo screensaver, chore charts, meals plans, to-do lists etc. Electronic planner paid features like Magic Import tailor advanced tools for users with special needs.
  • Stay in Touch with Loved Ones: Share photos or videos from your phone to electronic wall calendar with app, instantly update your life moment, and keep in touch with your family, especially those who are far away; you can also surprise your smart calendar digital wall by sending him a wish card; it's also great for keeping tech-illiterate elders in touch with the youngsters.
Independent reader supportYour contribution helps us test, update, and keep practical guides available for everyone.Support on Ko-Fi

Why a rule can work in edit mode but not on the public page

This symptom has several possible causes. Work through them in order instead of rewriting the whole stylesheet.

1. The CSS was saved on a different page

Custom CSS belongs to the selected status page. Return to Status Pages, open the intended page, choose Edit Status Page, and confirm that the rule is in that page’s Custom CSS field. There is no documented dashboard-wide field that automatically styles every status page.

2. The public page has not refreshed yet

Uptime Kuma’s wiki states that status-page results are cached for five minutes and that the page refreshes every five minutes. After saving, open the public route in a fresh tab and allow that interval to elapse. A hard reload before the server-side cache expires cannot force a newer result.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

3. The selector does not match the public markup

The editor may contain a different wrapper or state than the public route. Inspect the public page, find the element that should change, and copy its actual class or element relationship into your rule. Avoid relying on a class copied from an old screenshot or a different theme.

4. A more-specific rule wins

Developer tools show which declaration is active and which ones are crossed out. Increase specificity only as much as necessary, or place your rule later in the stylesheet. Avoid using !important everywhere; reserve it for a deliberate override when normal cascade order cannot express your intent.

5. A release-specific regression is involved

Issue 2207 recorded a historical case in which CSS worked on version 1.18.3 but failed on the public page after an upgrade to 1.18.4. That report is from 2022 and does not establish a current universal bug, but it demonstrates why the running version matters. Record your Uptime Kuma version, reproduce the problem with a one-rule stylesheet, and check release-specific issue reports before assuming your CSS is wrong.

6. The CSS itself is invalid

One missing brace or malformed declaration can invalidate a section of the stylesheet. Use a CSS linter or browser developer tools to find parse errors. Temporarily remove everything except a single background-color rule, confirm that it works publicly, and add blocks back one at a time.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

A practical troubleshooting checklist

  • Confirm the rule is in the selected page’s Custom CSS field.
  • Click Save and verify that the field still contains the text after navigating away and back.
  • Test the public /status/<slug> URL, not only the edit screen.
  • Allow the five-minute cache and five-minute refresh cycle to complete.
  • Check the running Uptime Kuma version, especially after an upgrade.
  • Reduce the stylesheet to one unmistakable rule.
  • Inspect the public markup and computed styles in developer tools.
  • Look for a selector mismatch, a specificity conflict, or a parse error.
  • Restore your last known-good copy if the page becomes unreadable.

Can one external stylesheet style several Uptime Kuma pages?

There is no documented external-stylesheet field for status pages. Issue 7339 describes the current model: users paste raw CSS into a text area, and the entire CSS must be duplicated for each status page. The request to support @import url(...) or a dedicated external-CSS field is marked Closed as not planned.

For several pages, the practical options are:

  • Duplicate a maintained source file. Keep one master CSS file outside Uptime Kuma, paste the same contents into each page, and update every page when the master changes.
  • Use a shared theme as a starting point. Copy the same community theme into each page and change only the variables that differ.
  • Limit page-specific overrides. Put common rules first and a short page-specific section at the end, with comments identifying the page.

These approaches reduce design drift, but they do not create live linking. If you change the master file, the pasted copies remain unchanged until you paste and save them again.

Embedding a status page in an iframe

Styling the page directly is different from placing it inside another site’s layout. The official wiki documents an iframe workaround that requires the environment variable UPTIME_KUMA_DISABLE_FRAME_SAMEORIGIN=true. This disables the same-origin framing protection so the status page can be embedded.

The wiki also warns that enabling this setting permits framing and makes the deployment vulnerable to clickjacking. Treat it as a security exception, not as a normal way to share CSS. Evaluate who can frame the page, where it will be embedded, and whether the surrounding application has its own anti-clickjacking controls. If you only need brand colors or a different column layout, keep the status page on its own URL and use Custom CSS instead.

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

Version and feature context

Uptime Kuma’s wiki documents multiple status pages from version 1.13.0 and domain-name status pages from version 1.14.0. Those milestones explain why older installations may not expose the same status-page controls or URL behavior as current releases. Check your installed version before following a guide written for a different release.

Selectors are not presented as a guaranteed, version-independent API in the available documentation. A class that works today can move or be renamed after a frontend change. Keep your rules focused, avoid unnecessary dependence on deeply nested selectors, and retest after upgrades.

Choosing an approach

Approach Best for Maintenance Main trade-off
Small inline stylesheet per page A few brand colors, spacing changes, or a simple responsive adjustment Low while there are only one or two pages Rules must be copied when several pages share a design
Copied community theme with edited variables A complete light/dark treatment, cards, columns, and typography Moderate; keep a source copy and retest after upgrades More selectors mean more exposure to markup changes
One master CSS file pasted into multiple pages Several pages that should look identical Moderate to high; every page must be updated manually No live external reference exists, so copies can drift
Iframe embedding A site that must show the status page inside a surrounding layout High; requires an environment change and security review Disables same-origin framing protection and introduces clickjacking risk

Maintenance checklist for production pages

  • Keep the CSS in a separate, dated file with the Uptime Kuma version noted.
  • Use comments to mark page-specific overrides and explain non-obvious visibility rules.
  • Test desktop, tablet, and phone widths, especially when using two columns.
  • Check a page with monitor tags enabled if your deployment uses tags.
  • Verify the public URL after every significant CSS edit, not just the editor preview.
  • After an Uptime Kuma upgrade, retest colors, columns, hidden elements, and the refresh timer.
  • Do not enable iframe framing solely to make CSS easier; use the direct Custom CSS field whenever it meets the requirement.

Product prices and availability are accurate as of the date/time indicated and are subject to change. Any price and availability information displayed on Amazon at the time of purchase will apply.

Leave a Reply

Your email address will not be published. Required fields are marked *

Special offer. See more information about Outbyte and uninstall instructions. Please review EULA and Privacy policy.

More from the Wire

  1. World desk4 min
    How to Spot an AI Voice Scam Before Sending MoneyDon’t rely on how a caller sounds. Pause, call back through a known number, and verify the emergency with another trusted person before sending money.
  2. Mountain View desk4 min
    Google’s SynthID Detector: How to Check AI-Generated Images, Video and AudioGoogle’s SynthID Detector looks for an embedded watermark in supported images, video and audio. Here is what its results do—and do not—show.
  3. Redmond desk20 min
    How to create a link to File or Folder in Windows 11Windows 11 gives you several ways to point to a file or folder without moving or duplicating it. You can create a desktop shortcut,…
Recommended PC Tool
Recommended PC Tool
Outdated Drivers Are Slowing You DownFree scan - exact matches
PC Slower Than It Used to Be?Free scan - under a minute

Two free Windows tools

One Free Minute Could Fix That PC

Before you go - each of these free tools takes about a minute and tackles what quietly slows a Windows PC down.

Special offer. View Outbyte info, uninstall instructions, EULA, and Privacy Policy.