ThisCalculator

Everyday

Customize Uptime Kuma Status Pages with Custom CSS

Updated · Standard formula, shown below

Customize Uptime Kuma Status Pages with Custom CSS

This guide shows you how to apply custom CSS to your Uptime Kuma status pages, letting you match the look of your brand or personal site. You’ll edit the theme’s CSS directly in the Uptime Kuma dashboard—no coding experience needed beyond copying and pasting a few snippets. By the end, you’ll have a status page that feels like your own.

What You’ll Need

  • An Uptime Kuma instance you can access (self-hosted or on a VPS).
  • Admin or operator access to the dashboard.
  • A basic understanding of CSS (optional but helpful).

Step-by-Step

  1. Log in to your Uptime Kuma dashboard. Open your Uptime Kuma URL in a browser and sign in with your admin credentials.
  2. Go to the status page you want to customize. In the left sidebar, click on “Status Pages.” If you don’t have one yet, create a new one by clicking “New Status Page” and filling in the required fields (name, slug, etc.).
  3. Open the status page editor. Click the pencil icon (Edit) next to the status page you want to modify.
  4. Find the custom CSS field. In the editor, scroll down to the section labeled “Custom CSS.” It’s usually below the “Description” field and above the “Footer Text” field.
  5. Write or paste your CSS. This is where you add your custom styles. For example, to change the background color to a dark navy, you’d add: 
    body { background-color: #0a1930; }

    You can target any element on the page. Common ones include .status-page, .monitor-list, .monitor-item, and .badge.

  6. Use the built-in CSS variables (optional). Uptime Kuma uses CSS variables for theming. You can override them in your custom CSS. For example: 
    :root {
  --primary-color: #ff6600;
  --background-color: #f5f5f5;
  --text-color: #333;
}
  7. Save your changes. Click the “Save” button at the bottom of the editor. Your status page will now use the custom CSS.
  8. Preview the result. Visit your status page’s public URL (e.g., https://your-domain.com/status/your-page) to see the changes. Refresh if needed.
  9. Iterate. If something looks off, go back to the editor, tweak the CSS, and save again. The changes apply immediately.

Common Mistakes

  • Forgetting to save. It sounds obvious, but it’s easy to paste CSS and then navigate away without clicking “Save.” Always save before previewing.
  • Using overly broad selectors. For example, styling div will affect everything and likely break the layout. Use specific classes or IDs instead.
  • Not using the browser’s inspector. To know which class to target, right-click on the element you want to change and select “Inspect” (or “Inspect Element”). This shows you the exact class names.
  • Overriding variables incorrectly. If you set a variable in :root, make sure it’s spelled correctly and that you’re not missing a semicolon. A typo can silently fail.

Tips

  • Use a CSS reset snippet. If you want to start from a clean slate, add a small reset like * { margin: 0; padding: 0; box-sizing: border-box; } at the top of your custom CSS.
  • Leverage the built-in dark mode. Uptime Kuma supports a dark theme. You can target it with @media (prefers-color-scheme: dark) to adjust your custom styles accordingly.
  • Test on mobile. Status pages are often viewed on phones. Use your browser’s responsive design mode to check how your CSS looks on small screens.
  • Keep it simple. A few well-chosen tweaks (like brand colors and fonts) go a long way. Over-customizing can make the page hard to read or navigate.

Troubleshooting

My changes don’t show up. First, make sure you saved the status page. Then clear your browser cache or open the page in an incognito window. Uptime Kuma serves the page with a cache-busting query string, but sometimes your browser holds onto the old version.

The CSS works in the editor but not on the public page. Double-check that you’re editing the correct status page. Also, ensure you’re not accidentally pasting CSS into the “Footer Text” field instead of the “Custom CSS” field.

My CSS breaks the layout. This usually happens when you use a universal selector like div or * without being specific. Revert to a more targeted selector. If you can’t figure it out, remove the offending rule and start with a smaller change.

Variables don’t seem to work. Make sure you’re using the correct variable names. Check the Uptime Kuma source code or use the browser’s inspector to see which variables are available. Also, remember that variables must be defined in :root or a parent element.

The page looks fine on desktop but is broken on mobile. Your custom CSS might be overriding responsive styles. Add media queries to adjust your styles for smaller screens, or avoid setting fixed widths.

Frequently Asked Questions

Can I use custom CSS on multiple status pages? Yes, each status page has its own Custom CSS field, so you can give each one a different look.

Will my custom CSS affect the dashboard? No, the Custom CSS field only applies to the public status page, not the admin dashboard.

Can I use external fonts? Yes, you can import fonts using @import url('https://fonts.googleapis.com/...') or by linking to a font CDN in the status page’s “Header Text” field, then referencing the font family in your CSS.

Is there a way to preview my CSS before saving? Not directly in the editor. But you can copy the CSS into your browser’s developer tools on the public page to test it live before pasting it into the field.

Can I use JavaScript in the Custom CSS field? No, the field only accepts CSS. For JavaScript, you’d need to use the “Header Text” field or a custom theme, which is more advanced.

What if I want to revert to the default look? Simply clear the Custom CSS field and save. The status page will return to the default theme.

Related

Method: the standard formula for this calculation, rounded as each result states. See how the calculators work or report an error.