I thought Iād be here cause Iām using card-mod to style the cards.
Anyways, I posted there. Thank you.
1 Like
Sure, Iāll follow along, like to know what the result will be 
For reference, answered here:
2 Likes
Iām new to HA, but having a problem getting Card-mod installed/working properly. Iām using HACS to install it, latest HAOS version on a RPi. I got Card-mod listed under Frontend. Iām also using Watchman that has a couple of card-mod uses.
Iām not sure if the path my configuration.yaml is right. I first started with the GiHub suggested path if using HACS. Restarted HA services, and the watchman cards arenāt rendering with the card-mod changes. I then tried other js paths such as:
Load frontend themes from the themes folder
frontend:
themes: !include_dir_merge_named themes
extra_module_url:
- /root/config/www/community/lovelace-card-mod/card-mod.js
But the Watchman card mods arenāt actually rendering at allā¦I just see the card_mod css style text. What am I doing wrong?
Looking for some help here. I am a noob and Iām trying to piece some things together.
The basic issue relates to Tuya based thermostats. Iām trying to display a sensor value within the thermostat card so I can get the correct unit value for the current temperature. And for the life of me, I just canāt work out how people know what code to use to fill what areas. I sort of get the whole āinspectā thing and I can drill down to the attribute I believe I want to change but beyond that, Iām lost. Is there a good guide somewhere to learn this stuff?
I want that number, the ā64ā to be repalced with a value from a sensor. I have the template to get the value just donāt get how to use card-mod to alter the card to reference the template to replace the ā64ā?
Thanks for any kind input.
Hello! I have used a button card for my media player. The problem is, when a song is playing i can not see the full text. Is it possible to let the text sliding from the right side to the left?
Best regards
Stefan
how do you use this ?
Hi,
Can someone explain me why is this not working? For clarity: the plugin does working, I have trouble with this particular override.
Hey guys!
I am trying to get media players to stack nicely on a given vertical space.
This is the code I am trying.
Does anyone sees what Iām doing wrong?
type: custom:mod-card
style: |
ha-card {
height: 423px;
}
card:
type: custom:hui-vertical-stack-card
cards:
- type: conditional
conditions:
- entity: media_player.office_chromecast
state_not: 'off'
- entity: media_player.plex_office_chromecast
state_not: unavailable
card:
type: custom:config-template-card
variables:
real_media_entity: states['media_player.office_chromecast'].entity_id
plex_media_entity: states['media_player.plex_office_chromecast'].entity_id
entities:
- ${plex_media_entity}
card:
type: custom:mini-media-player
entity: ${plex_media_entity}
group: true
volume_stateless: false
toggle_power: true
artwork: full-cover
scale: '1'
shortcuts:
columns: 5
buttons:
- icon: mdi:play-pause
type: service
id: media_player.media_play_pause
data:
entity_id: ${real_media_entity}
- icon: mdi:stop
type: service
id: media_player.turn_off
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-minus
type: service
id: media_player.volume_down
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-plus
type: service
id: media_player.volume_up
data:
entity_id: ${real_media_entity}
- icon: mdi:skip-next
type: service
id: media_player.media_seek
data:
entity_id: ${real_media_entity}
seek_position: 56000
card_mod:
style: |
ha-card {
height: auto;
}
:host {
--mini-media-player-overlay-base-color: white;
--mini-media-player-overlay-accent-color: red;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-accent-color: red;
--mini-media-player-background-opacity: 1;
--mini-media-player-progress-height: 10px;
--mini-media-player-button-color: rgba(0,0,0,0.75);
}
- type: conditional
conditions:
- entity: media_player.office_chromecast
state_not: 'off'
- entity: media_player.plex_office_chromecast
state: unavailable
card:
type: custom:config-template-card
variables:
real_media_entity: states['media_player.office_chromecast'].entity_id
plex_media_entity: states['media_player.office_chromecast'].entity_id
entities:
- ${plex_media_entity}
card:
type: custom:mini-media-player
entity: ${plex_media_entity}
group: true
volume_stateless: false
toggle_power: true
artwork: full-cover
scale: '1'
shortcuts:
columns: 5
buttons:
- icon: mdi:play-pause
type: service
id: media_player.media_play_pause
data:
entity_id: ${real_media_entity}
- icon: mdi:stop
type: service
id: media_player.turn_off
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-minus
type: service
id: media_player.volume_down
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-plus
type: service
id: media_player.volume_up
data:
entity_id: ${real_media_entity}
- icon: mdi:skip-next
type: service
id: media_player.media_seek
data:
entity_id: ${real_media_entity}
seek_position: 56000
card_mod:
style: |
ha-card {
height: auto;
}
:host {
--mini-media-player-overlay-base-color: white;
--mini-media-player-overlay-accent-color: red;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-accent-color: red;
--mini-media-player-background-opacity: 1;
--mini-media-player-progress-height: 10px;
--mini-media-player-button-color: rgba(0,0,0,0.75);
}
- type: conditional
conditions:
- entity: media_player.group_home_speakers
state_not: 'off'
- entity: media_player.plex_group_home_speakers
state_not: unavailable
card:
type: custom:config-template-card
variables:
real_media_entity: states['media_player.office_speaker'].entity_id
plex_media_entity: states['media_player.plex_group_home_speakers'].entity_id
entities:
- ${plex_media_entity}
card:
type: custom:mini-media-player
entity: ${plex_media_entity}
group: true
volume_stateless: false
toggle_power: true
artwork: full-cover
scale: '1'
shortcuts:
columns: 5
buttons:
- icon: mdi:play-pause
type: service
id: media_player.media_play_pause
data:
entity_id: ${real_media_entity}
- icon: mdi:stop
type: service
id: media_player.turn_off
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-minus
type: service
id: media_player.volume_down
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-plus
type: service
id: media_player.volume_up
data:
entity_id: ${real_media_entity}
- icon: mdi:skip-next
type: service
id: media_player.media_seek
data:
entity_id: ${real_media_entity}
seek_position: 56000
card_mod:
style: |
ha-card {
height: auto;
}
:host {
--mini-media-player-overlay-base-color: white;
--mini-media-player-overlay-accent-color: red;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-accent-color: red;
--mini-media-player-background-opacity: 1;
--mini-media-player-progress-height: 10px;
--mini-media-player-button-color: rgba(0,0,0,0.75);
}
- type: conditional
conditions:
- entity: media_player.group_home_speakers
state_not: 'off'
- entity: media_player.plex_group_home_speakers
state: unavailable
card:
type: custom:config-template-card
variables:
real_media_entity: states['media_player.office_speaker'].entity_id
plex_media_entity: states['media_player.office_speaker'].entity_id
entities:
- ${plex_media_entity}
card:
type: custom:mini-media-player
entity: ${plex_media_entity}
group: true
volume_stateless: false
toggle_power: true
artwork: full-cover
scale: '1'
shortcuts:
columns: 5
buttons:
- icon: mdi:play-pause
type: service
id: media_player.media_play_pause
data:
entity_id: ${real_media_entity}
- icon: mdi:stop
type: service
id: media_player.turn_off
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-minus
type: service
id: media_player.volume_down
data:
entity_id: ${real_media_entity}
- icon: mdi:volume-plus
type: service
id: media_player.volume_up
data:
entity_id: ${real_media_entity}
- icon: mdi:skip-next
type: service
id: media_player.media_seek
data:
entity_id: ${real_media_entity}
seek_position: 56000
card_mod:
style: |
ha-card {
height: auto;
}
:host {
--mini-media-player-overlay-base-color: white;
--mini-media-player-overlay-accent-color: red;
--mini-media-player-media-cover-info-color: white;
--mini-media-player-accent-color: red;
--mini-media-player-background-opacity: 1;
--mini-media-player-progress-height: 10px;
--mini-media-player-button-color: rgba(0,0,0,0.75);
}
But the cards inside are overflowing
Maybe a silly question given that I am also a noob but are you able to confirm that the card you are trying to modify (the stack card) is/or has the ha-card element in inspector?
It has been mentioned many times that the stack cards, vertical and horizontal do not have the ha-card element and I do realize your card is a community designed stack card but figured itās worth confirming if you havenāt already done so, Again, might be a silly noob question.
Hello everyone,
I have read this topic and I have gained a lot of inspiration from it!
Iām having a problem with a card that I have build. Itās a card to start my favourite radio stations via a script on one of my Sonos speakers. It works, but itās not visually pleasing. As you can see, there are still some borders and lines that I wish to hide. So I want to create a single card without borders with the information / scripts / volume sliders in it. I guess it is possible via media player card edit / card mods, but I donāt know how. Can anyone please help me?
This is the code that I have used:
cards:
- cards:
- entity: media_player.sonos_move_keuken
type: media-control
tap_action:
action: more-info
- entity: media_player.sonos_move_keuken
hide:
icon: true
info: true
mute: true
power: true
source: true
volume: true
name: true
controls: true
mini-media-player-progress-height: 1px
progress: true
shortcuts:
buttons:
- data:
entity_id: script.new_script
image: /local/SLAM-MM.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_2
image: /local/SLAM40!.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_3
image: /local/SLAM Hardstyle.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_4
image: /local/SLAMFM.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_5
image: /local/Radio 538.png
id: script.turn_on
name: null
type: service
- data:
entity_id: script.new_script_6
image: /local/Radio 538 DD.png
id: script.turn_on
name: null
type: service
columns: 3
show_group_count: true
show_progress: true
type: custom:mini-media-player
volume_stateless: true
- entity: media_player.sonos_move_keuken
hide:
controls: true
icon: true
info: true
max_volume: 100
min_volume: 0
name: hide
play_pause: true
power: true
progress: true
source: true
type: custom:mini-media-player
type: vertical-stack
mode: vertical
type: custom:stack-in-card
Thanks!
I am wanting to pad input_datetime on/off label without moving icon, and increase size of font in the time select numbers.
If I add the following code it moves/pads the icon and text over, and only increases the font size for the label.
- entity: input_datetime.hotwater_on
card_mod:
style: |
hui-generic-entity-row {
color: white;
padding-left 52px;
font-size: 22px;
}
name: 'On time'
For the time select numbers i have tried to modify input.mdc-text-field_input but that didnt work.
Thanks
Hey folks. Iām struggling with a feature Iām trying to create in an entities card using card-mod. I have this card which is basically a control panel for a few helpers I use so I can see at a glance if anything is wrongly set. I want to be able to colour the text-field-fill either green or red based on an input_boolean , but I canāt get it to work. I donāt even know if itās possible and Iāve been through this entire thread several times as well as reading all the documentation and guides on CSS variables and card-mod.
This is what I want to achieve:
This is the current yaml
- entity: select.solaredge_i1_storage_default_mode
name: Actual Storage Default Mode
card_mod: null
style: |
:host: >
{% if is_state('input_boolean.default_battery_storage_mode_correct', 'on' ) %}
{ --mdc-select-fill-color: green;}
{% else %}
{ --mdc-select-fill-color: red; }
{% endif %}
If this is possible Iād really appreciate a steer in the right direction.
Just to add that
card_mod: null
style: |
:host { --mdc-select-fill-color: green; }
does change the fill colour to green.
Try removing the :> you have after the :host tag.
ā¦ or just go to the 1st post ā link at the bottom ā styles for input-select
Try removing the
:>you have after the:hosttag.
This has absolutely no effect on the result. The fill stays white.
ā¦ or just go to the 1st post ā link at the bottom ā styles for input-select
That is an amazing thread. Itās where I got most of the info on how to do this from.
BUT
I canāt see anywhere in the
ā styles for input-select
where it explains how to use a template to change the fill colour based on the template result.
This is the simplest part, ANY style may be added like:
element {
{% if .... %}
property: value_1;
{% else %}
property: value_2; ### or just omit the whole "else" part if not needed
{% endif %}
}
1 Like
Sorted, thanks. Not quite the solution you posted, although Iām sure that would work too. What didnāt help was that I was using the wrong :host.
Hereās the working code:
card_mod: null
style: >
{% if is_state('input_boolean.default_battery_storage_mode_correct' , 'on' ) %}
:host { --mdc-select-fill-color: green;}
{% else %}
:host { --mdc-select-fill-color: red; }
{% endif %}
Has anyone modified their expander card with card-mod, particularly the title size and color?
could anyone help me with this? I want to put a background color in green when certain input boolean is true, but itās not working:
type: gauge
entity: sensor.mysensor
name: name
card_mod:
style: |
ha-card[state='on'] {
{% if is_state('input_boolean.mybool', 'on') %}
--ha-card-background: #30bf51;
{% endif %}
}
also tried:
type: gauge
entity: sensor.mysensor
name: name
card_mod: null
style: |
{% if is_state('input_boolean.mybool' , 'on' ) %}
:host {ha-card: green;}
{% else %}
:host {ha-card: red; }
{% endif %}