Brilliant))))
1 Like
[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.
1 Like
I am using exactly same 2 websites, they covered 90% of cases.
1 Like
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. 
1 Like
I can’t thank you enough.
The subject has already driven me crazy.
Your tip works perfectly. 
1 Like
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.
1 Like
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
Is there a way to have the size of text within a mushroom template card adjust automatically to fill the available space?
I have a card that displays my local weather forecast. Sometimes, it’s as simple as, “Sunny. High near 70.” Ideally, that would be displayed in a large font within a box that is, say, 100px tall.
Other times, the forecast will be something like, “A chance of rain showers after 1am. Mostly cloudy, with a low around 40. Chance of precipitation is 50%. New rainfall amounts less than a tenth of an inch possible.” Ideally, that would be displayed in a smaller font within that same box.
My current solution is to use a font size that works well enough, but that leaves some empty white space (most of the time) or pushes the next card slightly off the edge of the tablet screen (sometimes):
type: custom:mushroom-template-card
primary: ''
secondary: '{{ state_attr(''weather.knyc_daynight'', ''forecast'')[0].detailed_description }}'
icon: ''
entity: weather.knyc_daynight
tap_action:
action: more-info
fill_container: true
multiline_secondary: true
card_mod:
style: |
ha-card {
--card-secondary-font-size: 20px;
--card-secondary-font-weight: bold;
margin: -7px -2px
}
A second question - is there any way to add a chip or additional template info to a mushroom climate card? Our (new) thermostats don’t always seem to match reality, so it’d be awesome if I could add the output of a separate Aqara sensor in the highlighted space.
Most probably, without test, because of this. As always, try to test output in developer tools. It is not background: > etc etc
bingo!
Ofc I did test those templates in dev tools, but that doesnt catch the multiline indicator though.
can confirm:
card_mod:
style: |
ha-card {
background: {{'var(--background-color-off)' if is_state(config.entity,'off')
else 'var(--background-color-on)' }};
--primary-text-color: {{'var(--background-color-on)' if is_state(config.entity,'off')
else 'var(--background-color-off)' }};
}
to work also. Nice, and thanks for you keen eye Arganto!
1 Like
This will become a bit easier soon with color-mix. Shipping in Chrome 111 in a few days.
You could try dynamically adjusting the font size based on the text length like this:
--card-secondary-font-size: calc(1em / {{ state_attr(config.entity, ''forecast'')[0].detailed_description | length / 10 }} + 1em);
Adjust the divisor and + 1em to suite. The + 1em is used as a minimum size.
Adding a Chip to the Climate Card can be done like this:
type: custom:stack-in-card
cards:
- type: custom:mushroom-climate-card
entity: climate.office_air_conditioner
show_temperature_control: true
hvac_modes:
- heat_cool
- heat
- cool
- dry
- fan_only
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.rhys_office_sensor_temperature
card_mod:
style: |
ha-card {
position: absolute;
top: var(--spacing);
right: var(--spacing);
--chip-box-shadow: none;
--chip-background: rgba(var(--rgb-disabled), 0.2);
}
1 Like
ofc it does. If you paste and test the whole string, which you want to ingest and should work afterwards in html and not only the template. 
So everything after the style: |
What I meant was that dev templates doesn’t care about the indicator and just shows the correct output.
I just never realized upfront that card_mod templates don’t require ( and fail even when using) the multi line indicator…
and yet, it still isnt very obvious on all spots, consider this card_mod_theme template:
/* Optionally set a replacement template text. */
ha-button-menu::before {
content: "{% if is_state('input_boolean.menu_options_template','on') %}{{states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C{% endif %}";
color: var(--app-header-text-color);
visibility: visible;
position: relative;
top: 24px;
white-space: nowrap;
}
which I can not use in this syntax (with or without quotes):
/* Optionally set a replacement template text. */
ha-button-menu::before {
content: "{% if is_state('input_boolean.menu_options_template','on') %}
{{states('sensor.buienradar_symbol')}} | {{states('sensor.buienradar_temperature')}} °C
{% endif %}";
color: var(--app-header-text-color);
visibility: visible;
position: relative;
top: 24px;
white-space: nowrap;
}
and, because of readability have made that into:
/* Optionally set a replacement template text. */
ha-button-menu::before {
content: "{{states('sensor.custom_header_template')}}";
color: var(--app-header-text-color);
visibility: visible;
position: relative;
top: 24px;
white-space: nowrap;
}
with an external template sensor…
which in itself is an exception, because I do this all the time in the rest of my card_mod_theme:
/* Set the toolbar background. */
app-header, app-toolbar {
background: {{'radial-gradient(var(--primary-color),var(--card-background-color))'
if states('input_select.theme')|regex_search('(ight|Dark|Matrix)')
else 'var(--primary-color)'}};
color: var(--text-primary-color);
}
so, there is no ‘ofc’ … 
would you know if we have a ‘light’ color to use on Tile card? In below template Ive copied what I do on custom:button-card var(--button-card-light-color, but that obviously does not work, so it uses the default now. Id love to use the light color.
card_mod:
style: |
ha-card {
border-top: {{'0.5rem solid var(--button-card-light-color, var(--icon-color-on))'
if is_state(config.entity,'on') else 'none'}};
background: {{'var(--background-color-off)' if is_state(config.entity,'off')
else 'var(--background-color-on)' }};
--primary-text-color: {{'var(--background-color-on)' if is_state(config.entity,'off')
else 'var(--background-color-off)' }};
}
what’s remarkable, is that this border heightens the tile card with that section, where it doesnt do that on button-card.
So, Id need a styling to set that border inside the Tile, and not add it, and mess with the grid:
No, it shows the output, how is ingested via card_mod. And if the output contains wrong css, then it will not work in card_mod either.
So the ofc was right.
Same in your other examples.
Background:
- card_mod is ingesting plain text as is, including linebreaks etc.
- Same in developer tools. I shows the output as is plain text, including linebreaks.
- So it is 1:1 the plain text which you define in card_mod is igested as css styles in html.
- linebreaks ans spaces are at 99% cases not important in css definition in most places, so
color: red;
color:
red ;
will result in the same result. Either it comes from card_mod or if you would write css or html in a text editor.
So if you test everything what you want to ingest via card_mod, so everything behind style, either inline or via multi line indicator
card_mod will 1:1 ingest the output
So not only test your template, but everything of your text you want to ingest. And if this inculdes wrong css, then you have the error. And this is here the >
In your other example
it will ingest 1:1 the output
And as in example before, this is wrong css, because here the 1% case. content string does not allow linebreaks.
So you cannot use it in this syntax, because its output is wrong css. So no special case or exception. Always the same. plain text with linebreaks is ingested 1:1. And is this is wrong css, it will not work as in your cases. And you can see this better (ofc ) if you test your whole style and not only your templates. This was ofc the only thing I advised.
In short, css code must be like:
property: value; property: value;