@critical_limit
this should be enough
card_mod:
style: |
.card-header {
justify-content: center;
}
nope. also not working
thanx very much! that does the trick
This is working for my cards except the “Glance” Card. Is there a way to also have it centered on a glance card?
card:
card_mod:
style: |
.card-header {
justify-content: center !important;
}
type: glance
title: Geräte online
show_state: false
theme: Dirk
columns: 4
Try to have a look in the developer tools, where the item is located, in or out shadow-root. For your question, this depends on your installed card_mod-version as well, but I think you should a look above.
aaah, thank you very much. Now I slowly get into it.
This is working:
card:
style:
$: |
.card-header {
text-align: center !important;
}
type: glance
title: Geräte online
show_state: false
theme: Dirk
columns: 4
Again: Thank you all
Need some guidance. I have a Horizontal card with two entities. I want to change the size of the font for both the name and the value. This is what I have tried but it doesn’t work out:
type: horizontal-stack
cards:
- type: entity
entity: sensor.openweathermap_temperature
name: Temperature
card_mod:
style: |
:host {
font-size:35px;
}
- type: entity
entity: sensor.openweathermap_feels_like_temperature
name: Feels Like
card_mod:
style: |
:host {
font-size: 35px;
}
can someone help show me what I am missing here??
Thanks
1st post → Bottom → Link from Ildar → Entity Card.
1 Like
I have a entities card with some conditional entities. In each conditional entity is a template-entity-row. How to change the font-size of the secondary element in all template-entity-rows?
type: entities
style:
.: |
#states {
padding-top: 0px !important;
padding-bottom: 0px !important;
}
entities:
- type: conditional
conditions:
- entity: sensor.current_updates
state_not: '0'
row:
type: custom:template-entity-row
entity: switch.new_updates
name: Neue HA Updates!
state: '{{ states(''sensor.current_updates'')}}'
secondary: test
active: '{{ is_state(''switch.new_updates'', ''on'') }}'
tap_action:
action: toggle
Anyone know how to change the background of the chips to be a different color?
I tried this code, but it doesn’t have any effect:
type: custom:mushroom-chips-card
chips:
- type: entity
entity: sensor.bedroom_humidity
card_mod:
style: |
:host {
--ha-chip-background-color: yellow;
--ha-chip-text-color: red;
}
I’ve been stuck on this for days… thanks
card_mod:
style: |
:host {
--chip-background: pink !important;
}
1 Like
Thank you! How did you know that? Is it written somewhere I missed in the guide?
Thanks for the link. I “Think” I am doing it right but nothing changes Here is what I have tried:
type: entity
entity: sensor.openweathermap_condition
name: Conditions
card_mod:
style: |
ha-card .card-header {
font-size: 35px;
color: red;
}
This is one card of two in a horizontal card. I want both entries to be the same size font. I think my issue is that that is referencing the card header and there isn’t a header. How do I know what to use behind ha-card . ???
Thanks for the lessons. How do I know when I should use ha-card: vs host: ? I would’ve thought ha-card there, because it shows ha-card on the left image.
If I were trying to only color the 2nd of 2 chips, what would that be?
card_mod:
style: |
.chip-container *:nth-child(2) {
--chip-background: pink !important;
}
here’s a real example from my card (highlight chip based on chosen input select option)
type: custom:stack-in-card
mode: vertical
cards:
- type: custom:mushroom-number-card
entity: input_number.ac_temperature
display_mode: buttons
name: Air Conditioner
icon: mdi:air-conditioner
secondary_info: none
layout: horizontal
tap_action:
action: call-service
service: mqtt.publish
data:
topic: nodered/trigger/ac
payload: |
{
"source": "button",
"service": "toggle"
}
card_mod:
style:
.: |
.actions {
{% if states('input_select.ac_modes') == 'off' %}
display: none !important;
{% endif %}
}
mushroom-shape-icon$: |
.shape {
{% if states('input_select.ac_modes') == 'off' %}
--icon-color: rgb(var(--rgb-disabled));
--shape-color: rgba(var(--rgb-disabled), 0.2);
{% endif %}
}
mushroom-state-info$: |
.container:after {
{% set mode = states('input_select.ac_modes')|capitalize %}
{% set status = states('input_text.ac_status')|capitalize %}
{% set temp = states('sensor.bedroom_ir_temperature') %}
{% if temp not in ['unavailable', 'unknown', 'none'] and mode != 'Off'%}
content: "{{ status }} - {{ temp|round(1) }}°C";
{% else %}
content: "{{ mode }}";
{% endif %}
font-weight: var(--card-secondary-font-weight);
font-size: var(--card-secondary-font-size);
line-height: var(--card-secondary-line-height);
color: var(--secondary-text-color);
text-overflow: ellipsis;
overflow: hidden;
white-space: nowrap;
}
- type: custom:mushroom-chips-card
chips:
- type: template
content: Auto
icon: mdi:autorenew
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.ac_modes
data:
option: auto
- type: template
icon: mdi:snowflake
content: Cool
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.ac_modes
data:
option: cool
- type: template
icon: mdi:scent
content: Heat
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.ac_modes
data:
option: heat
- type: template
icon: mdi:power
content: 'Off'
double_tap_action:
action: none
hold_action:
action: none
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.ac_modes
data:
option: 'off'
card_mod:
style:
.: |
{% set mode = states('input_select.ac_modes') %}
ha-card {
{% if mode == 'off' %}
display: none !important;
{% endif %}
padding: 0 var(--spacing) var(--spacing) !important;
--chip-background: rgba(var(--rgb-primary-text-color), 0.05) !important;
--chip-box-shadow: none !important;
--chip-height: var(--mush-control-height) !important;
--chip-border-radius: var(--inner-border-radius) !important;
}
.chip-container * {
flex: 1 1 0 !important;
--color: rgb(var(--rgb-primary-text-color)) !important;
}
.chip-container *:nth-child(
{% if mode == "auto" %} 1
{% elif mode == "cool" %} 2
{% elif mode == "heat" %} 3
{% elif mode == "off" %} 4
{% endif %}
) {
--chip-background: rgba(var(--mush-rgb-blue), 0.2) !important;
--color: rgb(var(--mush-rgb-blue)) !important;
}
mushroom-template-chip:
$:
mushroom-chip:
.: |
span {
flex: 1 1 0 !important;
text-align: center !important;
color: var(--color) !important;
}
$: |
.content {
width: 100% !important;
}
3 Likes
good ness, I have a lot to learn. Thank you!
Still trying to put all of this together. I want to make the icon green if on, red if off. I’ve tried “color” and “icon-color”. I guess I’m not sure how to call the “slotted” section. What am I doing wrong?
card_mod:
style: |
.chip-container *:nth-child(1) {
--color: green; !important;
}
.chip-container *:nth-child(2) {
--color: green; !important;
}
.chip-container *:nth-child(1) {
{% if is_state('binary_sensor.opengarage1_vehicle','off') %}
--chip-background: var(--lights-button-color) !important;
--color: red; !important;
{% endif %}
}
.chip-container *:nth-child(2) {
{% if is_state('binary_sensor.opengarage2_vehicle','off') %}
--chip-background: var(--lights-button-color) !important;
{% endif %}
}```