[Feature Request] Customize Card Background Color

[badi95]

Description

I'm migrating from Heimdall to Homepage and one feature I found very useful in Heimdall was to be able to customize the card background color. I'd use this to indicate which machine specfic services were running on. It would be nice to be able to do this on Homepage as well.

Thanks for all your work!

Other

No response

[Raithlin]

Add IDs to your services, and then target them with custom CSS - background-color should do fine going by my local testing. See https://gethomepage.dev/v0.7.4/configs/custom-css-js/ for instructions on how to set the service ID.

[badi95]

This worked like a charm! Thanks!

[badi95]

The more I used this solution, more I'm finding it insufficent. What has been bothering me is that there is no border between cards when using this method, so they end up visually bleeding together.

Is there a way to do this only changing the card color?

[badi95]

Ended up figuring out better custom css with:

#nas {
	div {
		background: #537752;
	}
}

Now I'm trying to figure out how to do different custom background per theme.

[KaKi87]

Here's what I had to do to make widgets readable on a dark background :

.widget-container,
.service-card {
    background-color: rgba(255, 255, 255, 0.15) !important;
}

@shamoon Any news on supporting this natively ?

Thanks

[KaKi87]

@benphelps ? 🙏

[milperks]

It would also be really helpful if we could adjust the opacity of the cards. I'm using an image as a background and it would be easier to read the cards if they were less translucent.

[drakoswraith]

Building on what KaKi87 had.. this will do the key boxes for the header, tabs, and services, and bookmarks to allow adjustment. However, i do think the color and opacity would be key features to support in the settings.

#information-widgets {
	background-color: rgba(255, 5, 5, 0.15) !important;
}

#tabs ul {
    background-color: rgba(255, 5, 5, 0.15) !important;
}

.service-card, .bookmark-icon, .bookmark-text {
    background-color: rgba(255, 5, 5, 0.15) !important;
}

[KaKi87]

@shamoon 🙏

[m-torhan]

You can also set card blur and then in css do something like

.backdrop-blur-xl {
    background-color: rgba(0, 0, 0, 0.8) !important;
}

[github-actions[bot]]

This discussion has been automatically closed due to lack of community support. See our contributing guidelines for more details.

[shamoon]

Why? This seems perfectly solved with custom css

[KaKi87]

We're asking for an officially supported feature that could provide a default value for dark background images while remaining customizable for other use cases and come with the advantage of not being likely to break because of future CSS class name changes. Thanks

[shamoon]

This is literally the point of supporting custom css, there is no reason to have to support more settings specific to this.

[KaKi87]

It's not great when the user needs to target multiple classes and specify !important...

Could you make this possible with a CSS variable instead (e.g. --card-background-color), or at least provide a single class name that targets all cards and won't require !important, and when add it to the documentation ?

[shamoon]

It's not great when the user needs to target multiple classes and specify !important...

I think we can agree "not great" is entirely subjective, and I dont agree. Nothing about using !important in the context of customizing homepage is problematic, there is not some hard-to-diagnose cascade problem to worry about or something, its just not a big deal. Again, this is precisely the purpose of the custom css feature, which already exists, has been released, and meets this need.

[github-actions[bot]]

This discussion has been automatically locked since there has not been any recent activity after it was closed. Please open a new discussion for related concerns. See our contributing guidelines for more details.