Learning any new stuff like card-mod is not an easy task.
This all needs a “try / make an error / repeat” approach.
I myself have never dealt with any web-programming, a “CSS” word I came to know in this thread first.
One thing is here.
When I started learning card-mod, I decided to create test cards with examples to cover different cases. That was a good lesson, a good practice.
A bit later I decided to post these examples in this thread.
All my examples here available in the consolidation post (1st post → link at the bottom).
Examples for the “button” card are not there - probably because most people are using a more powerful “custom:button-card”.
I think I should prepare some examples with the “button” card too.
…and you should not use a code for a “xxx-card” to style a “yyy-card”.
These cards may have different structure, different CSS properties.
What you can do with some new card is - using Code Inspector, try to use methods which you learned with other cards.
I found a lot of good solutions here. I have a problem that I couldn’t figure out. I want to hide this entire column.
I can hide the cards separately by entity status, but I can’t hide the VERTICAL-STACK at the same time.
Does anyone know of a way to add a class to an element so that the style info can go in the theme?
Specifically, I use two different styles for Paper Buttons Row buttons. I’d like to have the default style, then have a CSS entry for “paper-button.button-with-background” and then add the class “button-with-background” to only the buttons/rows that I want to style that way.
another use-case came up where this card would be a perfect (only one I know currently) solution. For this I need to style the card (it already offers a buttonStyle option to apply CSS to the header/button of the card).
I want the background to be the same as the default HA theme color. So
white during the day (light mode) - already works out of the box
grey during the night (dark mode) - here unfortunately a full black is used. Here you can see the difference:
It should instead be grey as the default card background (see lower part of the screenshot).
→ Is: #111111
→ Should: #1c1c1c (only when dark mode of HA theme is active)
I applied background: default; but it changes nothing.
Do I need to add some “if dark mode is active, use #1c1c1c as background” logic magic maybe?
→ Update: I found your great post for dynamic dark/light mode CSS application here. Now I need to know how to address the collapsable-card section…
Attempt for quick solution:
Or can I use something likebackground-color: var(--divider-color)but instead of--divider-coloror--accent-color(the only ones I know) there is one I am looking for? What other “–xxxxx-color” options do exist?
I think that woks here but am getting odd results with my browser. When I refresh the page it’s not right. Then I press edit dashboard and it works, press done and it continues to work until I refresh the page. Maybe some weird caching thing going on.