quick question, what I did now was mod the css of the div element inside the markdown, but how do you style a certain div class instead of all divs? because future wise it would be nice if I can still decouple this from other divs by giving it a class instead of just using the default <div>
My markdown card-mod code now:
card_mod:
style:
ha-markdown $: |
ha-markdown-element div {
max-width: 350px;
height: auto;
padding: 5px;
background-color:
{%- set sensor = states('sensor.hvc_hvc_afval_kalender_morgen') %}
{%- set sensor2 = states('sensor.hvc_hvc_afval_kalender_vandaag') %}
{%- if sensor == 'gft' and sensor != 'restafval' and sensor != 'pmd' and sensor2 != 'papier' %} rgba(0,170,0,0.9);
{%- elif sensor == 'restafval' and sensor != 'gft' and sensor != 'pmd' and sensor2 != 'papier' %} rgba(94,94,94,0.7);
{%- elif sensor == 'pmd' and sensor != 'gft' and sensor != 'restafval' and sensor2 != 'papier' %} rgba(255,85,0,0.9);
{%- elif sensor2 == 'papier' and sensor != 'pmd' and sensor != 'restafval' and sensor != 'gft' %} rgba(0,0,255,0.7);
{%- else %}
{%- endif %}
border-radius: 7px;
}
.: |
ha-markdown {
padding-right: 4px !important;
}
ha-card{background: rgba(0,0,0,0.7); }
I just wanted you to know I finally found what you were referring to. In order for it to work, I have to first specify a custom class name I.E., “class_0” in my stack-in-card code’s that I wish to target:
So like below? I am trying to follow the class examples you pointed me to which had ha-card.class_0 in the example. Maybe you wouldn’t mind just telling me instead of going back and forth?
Please see my code inspector screenshot below after I added class_0 to my stack-in-card code. I am still struggling to figure out the path based on what I see in code inspector. If I’m wrong again, maybe you could give me some hints that could help me do the correct path based on my screenshot (to know what to look for).
Starting this night I am far away from any civilian PC for at least a week, so can only suggest:
1st post → link at the bottom → other stuff → hints about navigating
There you will find info how to define a path.
You need to understand it.
And once again: my example with classes is exactly about headers; since you need to style “stack-in-card” only - you do not need invent new classes like “class_2” etc, address to “.type-custom-stack-in-card”.
Check examples of Thomas in ReadMe for styling classes; this is for understanding that this method only works for non-shadowRoot elements. But you need to access shadowRoot element “.card-header”. So use a trick with defining variables on a non-shadowRoot level - and then using this variable on the shadowRoot level.
Hi аnd thanks again for the response. I was using the below configuration but it wasn’t giving me the desired result, I can’t explain why. Could it be a not cleared cache issue, although I’m pretty sure that I had cleared it multiple times and used both browsers, Chrome and Firefox. It’s really strange. Now it works. Благодарю.
Compare what I have posted with that you have tried. Until you are not doing, what I suggest, it will ofc not work. In my code is another card-mod on top level and not on entity level. And I have explained the reason for that, too.
