Status Page Custom CSS Help #3747

New issue

Closed

opened 2026-02-28 03:39:41 -05:00 by deekerman · 2 comments

deekerman commented

2026-02-28 03:39:41 -05:00

Owner

Originally created by @syncblaze on GitHub (Nov 11, 2024).

⚠️ Please verify that this question has NOT been raised before.

I checked and didn't find similar issue

🛡️ Security Policy

I agree to have read this project Security Policy

📝 Describe your problem

Im working on a custom css for my status page. Mainly i want to edit the Colors.

I dont understand what to change, so that the color change hover effect of monitors has a different color.
If you dont know what i mean take a look here:
https://github.com/user-attachments/assets/3f3930b7-5128-41dd-a296-dca2b83cf82c

📝 Error Message(s) or Log

Custom CSS:

.dark {
background-color: #060400;
}
.item:hover {
  background-color: #0d0900;
}

.dark .shadow-box:not(.alert) {
    background-color: #0d0900;
}

🐻 Uptime-Kuma Version

1.23.15

💻 Operating System and Arch

Debian 12

🌐 Browser

Google Chrome

🖥️ Deployment Environment

Runtime:
Database:
Filesystem used to store the database on:
number of monitors:

Originally created by @syncblaze on GitHub (Nov 11, 2024). ### ⚠️ Please verify that this question has NOT been raised before. - [X] I checked and didn't find similar issue ### 🛡️ Security Policy - [X] I agree to have read this project [Security Policy](https://github.com/louislam/uptime-kuma/security/policy) ### 📝 Describe your problem Im working on a custom css for my status page. Mainly i want to edit the Colors. I dont understand what to change, so that the color change hover effect of monitors has a different color. If you dont know what i mean take a look here: https://github.com/user-attachments/assets/3f3930b7-5128-41dd-a296-dca2b83cf82c ### 📝 Error Message(s) or Log Custom CSS: ```css .dark { background-color: #060400; } .item:hover { background-color: #0d0900; } .dark .shadow-box:not(.alert) { background-color: #0d0900; } ``` ### 🐻 Uptime-Kuma Version 1.23.15 ### 💻 Operating System and Arch Debian 12 ### 🌐 Browser Google Chrome ### 🖥️ Deployment Environment - Runtime: - Database: - Filesystem used to store the database on: - number of monitors:

deekerman

2026-02-28 03:39:41 -05:00

closed this issue
added the
Stale

help
labels

deekerman commented

2026-02-28 03:39:45 -05:00

Author

Owner

@mslepko commented on GitHub (Nov 18, 2024):

I think you need to be more specific with you classes and play around a bit with Inspector to find what you need

.monitor-list .item:hover {
  background-color: #0d0900;
}

.dark .shadow-box.:not(:has(.alert)) {
  background-color: #0d0900;
}

@mslepko commented on GitHub (Nov 18, 2024): I think you need to be more specific with you classes and play around a bit with Inspector to find what you need ``` .monitor-list .item:hover { background-color: #0d0900; } .dark .shadow-box.:not(:has(.alert)) { background-color: #0d0900; } ```

deekerman commented

2026-02-28 03:39:48 -05:00

Author

Owner

@github-actions[bot] commented on GitHub (Jan 17, 2025):

We are clearing up our old help-issues and your issue has been open for 60 days with no activity.
If no comment is made and the stale label is not removed, this issue will be closed in 7 days.

@github-actions[bot] commented on GitHub (Jan 17, 2025): We are clearing up our old `help`-issues and your issue has been open for 60 days with no activity. If no comment is made and the stale label is not removed, this issue will be closed in 7 days.