Cute CSS for Uptime Kuma status page with a simple and modern look
Live demo »
Features
·
Install
·
Personalization
- Modern design: Inspired by top monitoring services
- Light and dark themes
- No refresh timer: Removed by default (optional restoration)
- Clean code: Easy to customize and extend
- In your Uptime Kuma dashboard, navigate to status page.
- Click
Edit Status Page
. - Scroll down to
Custom CSS
. - Copy the contents of
main.css
and paste it into the Custom CSS field. - Click
Save
at the bottom.
You can modify the values inside :root {}
to fit your needs.
By default, the refresh timer is removed. To restore it, simply comment display: none;
in .refresh-info
as shown here:
.refresh-info {
/* display: none; */
opacity: 1 !important;
color: var(--secondary-color);
}