I would suggest a layout card using a grid
type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 40% 60%
cards:
- type: custom:mushroom-fan-card
1 Like
Hi all, Iām just starting to use Card Mod with my Mushroom Cards. I have what is hopefully a simple question. In the template card example, Iām trying to use a font size of 24, however, that will cut off any character below the line height such as j g y. A font size of 20 is about it before clipping occurs. Is there some css to add to fix this?
Also, Iād like to use the same font as the Title card in a Template card. I donāt know if that is possible, but I thought Iād ask while Iām at it.
card_mod:
style:
mushroom-state-info$: |
.container {
--card-secondary-font-size: 18px;
--card-primary-font-size: 20px;
}
You have to adjust the field size as well
An exampleā¦
type: custom:mushroom-entity-card
entity: sensor.basement_sensor
name: TEST
icon_color: blue
card_mod:
style: |
ha-card {
--card-primary-color: blue !important;
--card-secondary-color: orange !important;
--card-primary-font-size: 24px !important;
--card-primary-line-height: 24px !important;
--card-secondary-font-size: 24px !important;
--card-secondary-line-height: 24px !important;
}
Ah, the missing piece. Thanks for the assist!
I tried for ages to adjust the height and it was as simple as
--card-primary-line-height: 24px !important;
will use this in the future thanks
2 Likes
Hello
Been stuck on this for too long and feel like Iām missing something obvious.
I want to change the Vacuum Cardās icon colour and background colour
Iāve got the background colour of the icon to change with this
- type: custom:mushroom-alarm-control-panel-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(0, 128, 128, 0.2) !important;
}
But when trying to add
- type: custom:mushroom-alarm-control-panel-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(0, 128, 128, 0.2) !important;
}
ha-state-icon {
color: #008080;
}
I get errors.
Hey, I think you could have solved it yourself quite easily using the explanation from the first post here. See the end of the first post āWhat the $ and .: | symbols doā
your corrected code
- type: custom:mushroom-alarm-control-panel-card
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: rgba(0, 128, 128, 0.2) !important;
}
.: |
ha-state-icon {
color: #008080;
}
what is the different to this card_mod? sometimes i dont know what is the right way
mushroom-shape-icon {
--shape-color: none !important;
--icon-color: #008080 !important;
}
No right way. Both work.
But with your solution you are targetting a variable. Called --shape-color & --icon-color
The only reason why sometimes that isnt the recommened way, is because you dont know how those variables are used elsewhere. For example, maybe the the --icon-color variable is tied to the entity being on only? Or the --shape-color is also used to determine the background color of the card itself? These are just examples to get my point across.
This is why i normally recommend targetting the element directly and changing it there. You avoid it affecting anything else by accident.
2 Likes
Ah alright, thank you 
2024.6.4-----2024.7.1
Please help me with this SHIFT.
Any āone buttonā solution?
Thanks
type: custom:stack-in-card
cards:
- type: custom:mushroom-template-card
primary: Š”ŠæŠ°Š»ŃŠ½Ń
secondary: >-
{{ states('sensor.0x00158d000709bf12_temperature') | round(1) }}Ā°C {{
states('sensor.0x00158d000709bf12_humidity') | round(1) }}%
icon: ytz:bed-double-heart
entity: light.bedside_lamp_rgbww_light
tap_action:
action: toggle
double_tap_action:
action: navigate
navigation_path: bedroom
hold_action:
action: toggle
icon_color: '{{ ''orange'' if is_state(entity, ''on'') else ''#b7c3c7'' }}'
fill_container: true
layout: horizontal
multiline_secondary: false
card_mod:
style: |
:host([dark-mode]) {
background: rgba(var(--rgb-primary-background-color), 0.2);
}
:host {
--mush-icon-size: 83px;
height: 68px;
margin-left: -21px !important;
margin-top: -2px !important;
}
ha-card {
--card-primary-font-size:16px;
--card-secondary-font-size:13px;
--icon-symbol-size: 53px;
}
- type: custom:mushroom-chips-card
chips:
- type: template
double_tap_action:
action: none
entity: humidifier.zhimi_ca4_d6bc_humidifier
icon: mdi:air-humidifier
tap_action:
action: toggle
hold_action:
action: none
icon_color: |-
{% if is_state ('humidifier.zhimi_ca4_d6bc_humidifier', 'on')%}
blue
{% else %}
grey
{% endif %}
alignment: end
card_mod:
style: |
ha-card {
--chip-box-shadow: none;
--chip-background: none;
--chip-spacing: 0;
--chip-icon-size: 20px;
margin-top: -3px;
}
card_mod:
style: |
ha-card {
background-color: rgba(224,234,237,1) !important;
height:107px !important;
margin-top: -9px;
}
Might be a niche use case:
I wanted a way to see the fluid level in my watering tank, so I used the background to represent the fluid level:
card_mod:
style:
mushroom-shape-icon$: |
.shape {
background: linear-gradient(0deg, rgba(96, 125, 139, 0.3) calc( {{ states('sensor.wassertank') }}% / 0.62 ), rgba(96, 125, 139, 0.12) 0.1%) !important;
}
This effectively sets the background to a gradient with minimal transition. !important is used as usual to overwrite the background color.
4 Likes
Very nice! Could also be a nice way to show light brightness level
2 Likes
Try and swap most of your :host {
To ha-card {
And then add !important to all of them.
2 Likes
So Iāve been messing around with the template card for quite some time. Unless someone has something I could use as an alternative that will allow me to have it say something like āHello {{user}}ā, or better yet template it for times (morning/afternoon/evening) I was curious how to make the text larger without blocking out the top or bottom. Seems like any size larger than 20px cuts off the top and bottomā¦. Any way around that? The button-card works but I canāt seem to template itā¦
I just ran into this myself. You need to add something like this to the card with card_mod:
card_mod:
style: |
ha-card {
--card-primary-line-height: 60px !important ;
--card-secondary-line-height: 60px !important ;
--card-primary-font-size: 50px
}
The line-height lines make sure the card will expand to fit the font.
Make sure you have card_mod installed, of course.
funny the little things that make the difference. that worked brilliantly. i appreciate the info!
type: custom:mushroom-template-card
primary: |2-
{%- if now().hour < 12 -%}Morning
{%- elif now().hour < 18 -%}Afternoon
{%- else -%}Evening{%- endif -%}, {{user}}
icon: mdi:home
good idea, done.
5 Likes