nvm.
I had to update card-mod. Then modify the theme in following way
card-mod-root-yaml: |
ha-menu-button$: |
ha-icon-button {display:none}
ha-tabs$: |
#tabsContent {
width: 97% !important;
}
paper-icon-button {
display: none;
}
#selectionBar {transform: translateX(0%) scaleX(0.0445123);}
.: |
paper-tab {
padding: 0px 4px;
}
div.action-items {display: none}
Hi
Can anybody suggest how to traverse the DOM for a timer-bar-card:
Iāve tried a number of different options and following the instructions I now have:
card_mod:
style:
ha-card$ div#container div#buttons timer-bar-card$ timer-bar-entity-row$ div.generic-entity-row div.info.pointer: |
{ color: red !important}
Iāve also tried each on their own (eg. div.info.pointer etcā¦)
I want to change the font size of text āLG Washer Dryerā and āOffā - (just using color: red for illustration).
Thanks
Andy
This works for me:
- type: custom:timer-bar-card
card_mod:
style:
timer-bar-entity-row:
$:
div.generic-entity-row: |
div.info.pointer {
color: red;
}
div.text-content.value.pointer {
color: red;
}
entity: timer.<entity>
name: <name>
But this is with me using it as an entity row in a core entities card. Iāve no idea if this would work inside a custom button card in the way that you appear to be using it, so this may not be the solution.
Thanks very much but it doesnāt work here.
Can somebody give me an example of the proper selectors/styles to set the (vertical) margins between cards of a vertical-stack card using card_mod?
Thanks!
1st post - link at the bottom
Sorry may be not a proper thread but I think the closest to what I can achieve.
Do you know is it possible to plot lines over other elements? mean those controlled with CSS.
Having a problem since the 2023.4 HA update. Used the following to reduce line-height in a grid and entities card.
card_mod:
style:
.: |
#states > * {
margin: -12px 0px !important;
font-size: 14px;
--mdc-icon-size: 20px;
}
.card-header {
font-size: 16px;
line-height: 18px;
}
This still works if a make any change and and save the desktop. On any new tab open or refresh (chrome) the display reverts to the default Line height and font size. See example:
Crazy part ā¦ just noticed if computer goes to sleep with chrome on HA Desktop (displayed wrong), when computer woke up it will display correctly with reduced spacing.
Any suggestions?
It depends. If itās SVG elements it will be tricky.
Can you be more specific and give an example?
If you can make a snippet of HTML with CSS in an online webtool to demonstrate your idea, then possibly.
Hi everyone, every time I enter my dashboard, in the first seconds you see all the changes made with card_mod that are loaded, making an ugly effect.
Sometimes it even happens that they are not even loaded correctly and therefore I have to exit and re-enter (probably weak hardware).
I wanted to ask you, is there any way to create a custom card by adding the style made with card_mod to an already existing card?
So I no longer have that nasty card loading problem.
Thanks in advance!
Can you share an example. Most of the times it is a problem with the standard HA UI CSS-transitions set everywhere. So e.g. you set a value but the assigned 0,5s transition is startet to get from the HA default value to your card-mod value on_load. But you can card-mod them as well or in other cases find other ways to get around it.
I mean this, every time I open the home assistant app it loads all the changes made with card_mod.
So I would like to create a custom card based on the original card, and in addition the modifications I made with card_mod, so that I donāt have to load the code every time.
Perhaps you didnāt get, what I wanted to say. And this fits to your screenshots. Ofc it is loaded, but in 90% of such cases you can only see it, because it is transitioned from standard to your style because of the standard-HA-transition everywhere, e.g.
So at most cases, you can remove this flickering/transition if removing the transition-css as well via card-mod.
Sorry I didnāt get it, Iām definitely a noob about it. 
Sorry for the dumb question,I just have to put transition: 0s; on each card?
Because if so, it didnāt fix itā¦
Putting ātransition: 0sā may NOT work - depends on a particular card; here on these mushrooms.
Test it, this is the Way.
I tried, but it keeps flickering when opening the dashboard unfortunately
And pure transition: 0s; is not default, so better to use something like
transition: none !important;
or to the default:
transition: all 0s ease 0s !important;
And yes, it is not working everywhere and depends on where HA sets its transition (again) or when and how card-mod changes are ingested (e.g. in a jinja-if, etc. So timing matters in same cases.
Hellow, thank you for your response.
Please see the image below.
While I can use picture-elements for the image itself and sensor values, Iām playing with idea to draw lines like for odometer. But I donāt want to bake those lines into the picture. I would like to plot them over the picture.
There are several methods how to achieve that in html and/or JS. In HA options are rather limited. But with custom button card, I can render any HTML. I succeeded with 1px divs (rotated) as well as with SVG. The result of the latter is seen in the picture. And it seems SVG is easiest way to go.
I figured out those methods (especially using the custom button card) later, after posting to this thread. So answering to not leave your question unanswered.
Now the only issue I have is, that those lines donāt scale their position together with responsive size changes. But itās another -not card-mod related - case.
Can you apply CSS styling to events from a particular calendar entity? Iād like all events from my āfamily calendarā to have a unique background-color. The below allows me to set the background color for all events to green.
type: grid
columns: 1
square: false
cards:
- type: calendar
entities:
- calendar.family
- calendar.garbage
- calendar.birthdays
- calendar.compost
initial_view: dayGridMonth
card_mod:
style:
ha-full-calendar:
$: >
.fc-daygrid-event {
background-color: green !important;
}
Right, thatās how I understood you.
Just a clarification from my side: What I originally meant was that if you wanted to draw over existing on SVG canvas, that it will be problematic with card-mod, but drawing with SVG wouldāve been possible (at the time of writing, but youāve since got it going).
Thanks. 
Thatās an (unsolvable) problem with the picture elements card Iāve seen many times here, especially from people using it for floorplans. The best you can do is to design for one interface/device, or pick something other than the picture elements card.
I happen to have done the same thing recently due to limitations because of all the UI changes the past few months (not a rant statement, just a fact). Itās neat, but took some effort. In fact, I wrote the HTML with JS and then still injected styles with card-mod (to keep structure and styling apart, semantically).