those templates can be made a lot simpler, and cut all that repetitive code, try something like this:
{% set status = states('alarm_control_panel.9000_aaa_zone_1_alarm') %}
{% set colors = {'disarmed':'red','armed_away':'blue','armed_night':'green'} %}
{{colors.get(status,'yellow')}}
that Is a cool mod, and yes, I get it to work on actual lines of text. However, using that on a template returning a long list if text doesnt work.
I did play around bit in the markdown, as adding a white line here or there makes a lot of difference. I could not get it to get better than this though:
- type: markdown
card_mod:
style:
ha-markdown $: |
p:nth-child(2) {
max-height: 200px;
overflow-y: auto;
}
content: |-
<p>
{% set comp = state_attr('sensor.overview_components','components') %}
{% set sub = state_attr('sensor.overview_components','subdomains') %}
Components: {{comp}} | Subdomains: {{sub}}
</p>
<p>
{{state_attr('sensor.overview_components','per domain')}}
</p>
compare that to the post above with the unformatted template card, or this somewhat more elaborate card using some folding and separate markdowns:
type: entities
title: Components and domains
card_mod:
class: class-header-margin
entities:
- type: custom:hui-element
card_type: markdown
card_mod: &no-box
style: |
ha-card.type-markdown {
box-shadow: none;
margin: 0px -16px;
}
content: >
{% set comp = state_attr('sensor.overview_components','components') %}
{% set sub = state_attr('sensor.overview_components','subdomains') %}
Components: {{comp}} | Subdomains: {{sub}}
- type: custom:fold-entity-row
head:
type: section
label: Per domain
card_mod: &label
style: |
.label {
margin-left: 0px;
}
padding: 0
entities:
- type: custom:hui-element
card_type: markdown
card_mod: &scroll
style: |
ha-card.type-markdown {
box-shadow: none;
overflow-y: scroll;
height: 450px;
margin: 0px -16px;
}
content: >
{{state_attr('sensor.overview_components','per domain')}}
- type: custom:fold-entity-row
head:
type: section
label: Per Subdomain
card_mod: *label
padding: 0
entities:
- type: custom:hui-element
card_type: markdown
card_mod: *scroll
content: >
{{state_attr('sensor.overview_components','per subdomain')}}
Your answer doesn’t help anyone, if you don’t feel like it don’t
Hi, can I add some perspective to state-label? I would like the text to match the perspective of the wall that is underneath
Perhaps my request to point out my error was overlooked among the many requests in this thread.
In the meantime I have also applied the latest hints in this thread but none led to success.
Any idea what is wrong with my config?
- type: image
entity: cover.velux_window_roof_window
state_image:
open: /local/ui/floorplan/lite-on.png
closed: /local/ui/floorplan/lite-off.png
half-open: /local/ui/floorplan/lite-unavailable.png
style:
top: 5%
left: 50.5%
width: 2%
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: roof-window
content:
type: custom:shutter-row
entity: cover.velux_window_roof_window
name: Garden
invert_position: false
state_color: true
card_mod:
style: |
ha-card { border: yes; padding: 100px; }
Picture of the DOM Navigation
Cannot test it myself - but play with something like “transform: rotate” with a native “picture-elements::style” feature (i.e. not card-mod, check this for hints). I think a “perspective” may be achieved by combination of different rotation. Tests are needed.
You can with transform: skew, like this:
type: picture-elements
elements:
- type: state-label
entity: sensor.lounge_sensor_temperature
style:
top: 50%
left: 15%
font-size: 20px
color: white
transform: skew(20deg, -45deg)
maybe first tell us what you would have expected and what doesnt work? help us help you.
Why is it ‘wrong’?
unless you want us to notice the border: yes, which is not a supported option according to CSS Borders
do we already have a quick overview of the moddable elements in a mushroom-template-card?
Ive been trying to set some colors, according to my regular theming, but apparently the mushroom out of the box only supports a handful of colors.
therefor, we need to go to card_mod, but then require the elements to mod, and those seem to be very well/deeply hidden in Inspector.
I can set a background (given this is after all a button-card, it would make sense it worked)
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
pointer-events: none;
background: var(--primary-color);
}
but I can not set color: green or an icon color for that matter…
its really odd to find a card not able to support color: var(--primary-color) but there we are. So how to mod those on the mushroom-template-card…
for starters:
type: custom:mushroom-template-card
card_mod:
style: |
ha-card {
pointer-events: none;
background: ivory;
}
icon_color: green
fill_container: true
layout: vertical
results in:
I would at least require the element for icon (to be able to use a theme var) the primary element (name) and secondary element (number in this case)
I hope, that if I can set a var to the icon, the card will compute the background of the icon itself…
Where can i learn about how to modify things with css? How do you know all these commands? Thank you very much for your answer !!
Brilliant))))
[quote=“oneteam, post:4379, topic:120744”]
I am sorry that I did not express myself precisely enough.
The point is that I want to change the appearance of my pop-up map using card_mod.
Colour and size.
For the sake of simplicity, I have only given the size and the frame as examples.
I understand that the frame is a bad example because it is not covered by the CSS element.
What about the padding?
card_mod:
style: |
ha-card {
padding: 100px !important;
}
The above example has no effect on the map. If I change it in the Chrome Developer Mode window, it works.
There are a lot of great resources, such as W3Schools or MDN.
For me the best way to learn is to have a test dash that I can create cards and play with the CSS in there and figure out how things work. Also have a look at the examples that @Ildar_Gabdullin and others have created. You can copy and paste these into your test dash to see how and why things work.
I am using exactly same 2 websites, they covered 90% of cases.
That’s a bit of a strange one. For some reason card_mod is not getting applied to ha-card. It works in the preview, but not in the dash. You can work around it with mod-card, like this:
tap_action:
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: roof-window
content:
type: custom:mod-card
card:
type: custom:shutter-row
entity: cover.velux_window_roof_window
name: Garden
invert_position: false
state_color: true
card_mod:
style:
shutter-row$: |
ha-card {
padding: 100px !important;
border: 1px solid red;
}
Hey Marius, you can do this:
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
icon_color: var(--rgb-primary-color)
icon_color needs to be RGB as Mushroom Cards use rgba() for the Icon Shape. You can also do icon_color: 255,0,255 etc.
The basic structure of every card is the same, with --icon-color and --shape-color under mushroom-shape-icon. There is also --icon-color-disabled, --icon-shape-disabled and --shape-outline-color that can be used. These can be any valid color, but you would need to handle the opacity for the Shape colors.
type: custom:mushroom-template-card
primary: Mushroom
icon: mdi:mushroom
card_mod:
style: |
mushroom-shape-icon {
--icon-color: rgb(var(--rgb-orange)) !important;
--shape-color: rgba(var(--rgb-orange), 0.2) !important;
}
For most of the cards there is a --rgb-state-[card_type] variable that can be used, and sets the color for both the Icon and the Shape. This needs to be a RGB color.
For Primary Text the variable is --primary-text-color and for Secondary Text it is --secondary-text-color.
For the entity card it is --rgb-state-entity:
type: custom:mushroom-entity-card
entity: input_boolean.mushroom
card_mod:
style: |
ha-card {
--rgb-state-entity: 255,0,0;
--primary-text-color: darkgreen;
--secondary-text-color: chartreuse;
}
You can also use --mush-rgb-state-[card_type] in your theme or in :host:
type: custom:mushroom-entity-card
entity: input_boolean.mushroom
card_mod:
style: |
:host {
--mush-rgb-state-entity: 255,0,255;
}
The `–mush-* variables are mostly documented in Paul’s Mushroom Theme Github:
I have posted some examples in the Mushroom Thread, have a look through my posts there. 
I can’t thank you enough.
The subject has already driven me crazy.
Your tip works perfectly. 
guess this is my main issue with mushroom. As its Paul’s private project, we recognize the issues we had with HA colors when he first migrated the same technique to HA 
I dont use those. all throughout my config’s card_mods and styles on native supporting cards, I use vars like var(–text-color-on) etc etc.
background-color-on: var(--primary-color)
background-color-off: var(--card-background-color)
background-opacity-on: rgba(var(--primary),0.8)
background-opacity-off: rgba(var(--card-background),0.8)
text-color-on: var(--card-background-color)
text-color-off: var(--primary-color)
icon-color-on: var(--card-background-color)
icon-color-off: var(--primary-color)
# mdc-text-field-fill-color: var(--primary-color) # quickbar header
active-color: '#F9C536'
accent-color: '#1A78C2'
primary-color: '#1675C9'
primary: 22,117,201
card-background-color: '#434954'
card-background: 67,73,84
Mushroom would require adding a whole bunch of identical colorings, have to think about that how to do that most efficiently.
maybe fiddling with the primary and card-background directly
its a same though the card does not simply adhere to HA defaults…
anyeays, thanks a bunch for the primer (I might have to get back t it…) . maybe you and Ildar can make a post on Mushroom and add it to the top overview post? At least Pin this one!
It would help a lot of people, since the cards is so different.
Can somebody help me out?
Trying to fix this after latest 2023.03
This was working pre 2023.03:
card-mod-more-info-yaml: |
.: |
@media screen and (min-width: 599px) {
div[data-domain="camera"] { --mdc-dialog-max-width: 85vw !important; }
div[data-domain="camera"] div[slot="heading"],
div[data-domain="camera"] ha-header-bar,
div[data-domain="camera"] mwc-tab-bar {
display:none !important;
}
}
After 2023.03:
It was working… but with new models i cant style upper parent div because it has no more ‘data-domain=“camera”’ attribute at ha-dialog… thats deeper in the tree now.
I was playing with ::slotted :has :host etc… but im kinda lost.
I wanted to remove header but only for camera stream popup and make it larger by: ‘–mdc-dialog-max-width: 85vw !important;’
I was trying like:
"$ .mdc-dialog__surface":
.: |
* > ::slotted(*:nth-child(2):has(div[data-domain="camera"])) {
border: 1px solid green;
}
Blockquote
so I am now completely confused…
while this is working on a tile card:
- type: tile
entity: light.dining
icon: mdi:silverware
card_mod:
style: |
ha-card {
background: var(--background-color-on)
}
and the same for the var(--background-color-off) obviously
this isnt:
card_mod:
style: |
ha-card {
background: >
{% if is_state('light.dining','on') %} var(--background-color-on)
{% else %} var(--background-color-off)
{% endif %};
}
in any variant, Ive also use the inline syntax I always use:
card_mod:
style: |
ha-card {
background: >
{{'var(--background-color-on)' if is_state('light.dining','on') else 'var(--background-color-off)' }};
}
what am I missing here?
In the end, want to replace the verbose entity with config.entity, but need to get this working first…
please have a look? thx!
edit
this does work:
card_mod:
style: |
ha-card {
{{'background: var(--background-color-off)' if is_state(config.entity,'off')
else 'background: var(--background-color-on)' }};
}
and that is unexpected. I dont think I encountered this requirement before, and ,mostly (if not always) have the element outside the template.
this is particularly inconvenient because how to set the color element now…
would you believe this to work…??
card_mod:
style: |
ha-card {
{{'background: var(--background-color-off)' if is_state(config.entity,'off')
else 'background: var(--background-color-on)' }};
--primary-text-color: {{'var(--background-color-on)' if is_state(config.entity,'off')
else 'var(--background-color-off)' }};
}
now how can that be.
note: --primary-text-color also set secondary-text it the latter isnt explicitly set, which is nice.
really bugged about the background now. Why don’t I get that
