Edit CSS of Status pages

[gsg-git]

⚠️ Please verify that this bug 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

Hello!

I set a Image in the background and want to set the boxes a transparence efect:

What i found are two places whre the colour ist set in the CSS files - i use the dark theme.

src/assets/vars.scss and src/pages/StatusPage.vue i want to change the colour #0d1117 to #0d1117d1

I used the Web tools in FF and Github search to find the values where to change, but the fields stay black - when i set it in the view unter custom css like the wallpaper the change was just temporary.

I clear after every change the brower cache and try additionaolly via Opera.

.dark .shadow-box[data-v-3042fc32] {

background-color: #0d1117d1;

}

The Uptime Kuma is installed in Docker for windows and the newest version.

Thank you in advance for you tips!

how i want the Transparency

How it is now

📝 Error Message(s) or Log

No response

🐻 Uptime-Kuma Version

1.23.0

💻 Operating System and Arch

Docker for Windows

🌐 Browser

Firefox,Edge,Opera

🐋 Docker Version

v4.22.0

🟩 NodeJS Version

No response

[imkuroneko]

Try

.dark .shadow-box[data-v-3042fc32] {
    background-color: rgba(13, 17, 23, 0.4) !important;
}

instead of

.dark .shadow-box[data-v-3042fc32] {
    background-color: #0d1117d1;
}

with rgba we will assure it has the alpha (transparency) data; and some things you will need to override harder using !important

[Akashsingh310]

In src/pages/StatusPage.vue

Try this

dark .shadow-box[data-v-3042fc32] {
  background-color: rgba(13, 17, 23, 0.82); 
}

sets the background color to a semi-transparent version of the color (#0d1117) with an alpha value of 0.82. You can adjust the alpha value to make the background more or less transparent, depending on your preference.

[imkuroneko]

@Akashsingh310 you should not update that file; instead add it as Custom CSS on each page...

Or it will create a conflict when you update your kuma to latest version 😅

[Akashsingh310]

@imkuroneko Got it, thanks for the heads up! I'll refrain from updating that file directly and will utilize Custom CSS per page. Appreciate the advice to avoid conflicts. 😄👍

[gsg-git]

@imkuroneko Thank you! When i reverse se settings the update should be not a problem again or is the file still marked as tampered?
i have just a test setup i would just reinstall it to be shure and import the settings again.

[CommanderStorm]

When i reverse se settings the update should be not a problem again or is the file still marked as tampered?

With the native installation, or via docker this should not be a problem, as both just pull the files.
We currently don't have any tamper-protection

[CommanderStorm]

Also note that targeting data-v-... properties ma be unstable across releases.
I would recommend targeting .overall-status instead

[github-actions]

We are clearing up our old issues and your ticket has been open for 3 months with no activity. Remove stale label or comment or this will be closed in 2 days.

[github-actions]

This issue was closed because it has been stalled for 2 days with no activity.