I understand it can take time to help, and i appreciate the help. I dont expect people to change out their whole config to help either (I donāt if I answer questions, i certainly understand why people wonāt bother with that).
But while I agree I of course have the ability to educate myself to a high level in the subject if I put in the time, I donāt think it is that unreasonable to ask a question like this, I did go through the examples first, that is why i had the code i had, and tried exchanging ha-card with :host for instance, but In the examples i found no-one used an rgb-code, and the font size didnāt have important in front of it. I also tried things like em, percentage, ālargeā and so on with the font size. I donāt want to sound ungrateful, I am genuinely happy for the help, but I had a problem i wanted to solve, card-mod looked like the tool for the job, sometimes in can cost you quite a considerable amount of time trying to search for a problem that isnāt even necessarily solvable with the tool you chose. (I began with a different integration before but card-mod seems like a better solution).
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.
Yeah, those examples are great, and very helpful, those are the ones i used to get to my first version of the code. postet above. Thanks for putting in the work.
ā¦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.
Hello!
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.
Please help!
but no such luck.
Could you please have a look with me where I go wrong? thanks!
btw, tis is part of a bigger panel view, replacing the now deprecated History panel āallā entities
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.
Hi all, Iām trying to get markdown table to take up the full width of the markdown card.
The table is inside an ha-markdown-element - that is full width. If I manually add width: 100% to the table using element styles in developer tools it works.
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?
Thanks, Iāve fixed the indentation and tried without the first-of-type and still doesnāt work. Iāve also tried the slightly different structure from this post and nothing.
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.
@e-raser Hi!
Post here a working code w/o using a ādark mode supportā to specify a custom background to the header.
Then weāll try to enhance it with a ādark mode supportā.
Also, I see here an issue with this card - not all itās elements follow ādark modeā. Probabaly you should register an issue for this card.