Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Status Page Custom CSS Help #5335

Open
2 tasks done
syncblaze opened this issue Nov 11, 2024 · 1 comment
Open
2 tasks done

Status Page Custom CSS Help #5335

syncblaze opened this issue Nov 11, 2024 · 1 comment
Labels

Comments

@syncblaze
Copy link

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

  • I checked and didn't find similar issue

🛡️ 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:
@syncblaze syncblaze added the help label Nov 11, 2024
@mslepko
Copy link

mslepko commented 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;
}

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
Projects
None yet
Development

No branches or pull requests

2 participants