Thank you for help. Here’s what I got.
Similarly to this:
but with less efforts and only for static headers:
type: entities
entities:
- type: custom:multiple-entity-row
entity: sun.sun
style: |
:host .entity {
display: flex;
flex-direction: column-reverse;
}
entities:
- entity: sun.sun
- entity: sun.sun
- entity: input_boolean.test_boolean
toggle: true
name: Bottom headers
show_state: false
1 Like
If anyone needs this:
type: entities
show_header_toggle: false
entities:
- entity: input_boolean.test_boolean
name: normal
- entity: input_boolean.test_boolean
name: toggle on the left
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
display: none;
}
.: |
hui-generic-entity-row {
flex-direction: row-reverse !important;
}
2 Likes
What about shortcuts in mini-media-player?
Like this:
shortcuts:
attribute: sound_mode
buttons:
- icon: mdi:monitor-cellphone-star
id: Любимая музыка
type: command
Color for play-control buttons - ok, i find it.
I realy use search, but don’t find solution. Thanks again *смайл_пожатия_рук
Never used shortcuts, cannot give a ready solution.
Try to adapt ready styles for these buttons.
1 Like
Hmm, it turned out to be very simple, but it is possible that other elements will be painted as well.
type: custom:mini-media-player
entity: media_player.yandex_station_lb00000000000000304600006f6ab3ee
shortcuts:
attribute: sound_mode
buttons:
- icon: mdi:monitor-cellphone-star
id: Любимая музыка
type: command
......
columns: 6
card_mod:
style: |
ha-card {
color: var(--state-icon-color) !important;
}
color: var(–state-icon-color) !important;
No, this attribute is TOO common, should not be used just to change icons…
I didn’t find any other way/variant 
mmp-shortcuts__buttons
mmp-shortcuts__button
do not change color
Saw this error in the chrome console, anyone know what it is and how to fix it? Maybe this is the the reason that some of the style are not working. Thanks!
Failed to execute 'define' on 'CustomElementRegistry': the name "mod-card" has already been used with this registry at https://xxxxxx.duckdns.org/hacsfiles/lovelace-card-mod/card-mod.js?hacstag=190927524311:6:10674
Post a code with your attempts here - at least it will show people that you’re really trying hard ))).
I mean with using DOM navigation, not just setting a global color property.
We’ll see what is wrong there.
I hope someone can help me with problem I have been struggling with, creating my first dashboard.
I have absolutely no experience with CSS or HTML, but I am trying to learn…
I am simply trying to decrease the spacing between text lines in the Entities card (or rather, decrease the height of that “box”), hoping to make the overall card more compact.
Does anyone have a solution for that?
type: entities
view_layout:
column: 1
entities:
- entity: sensor.sm_t510_battery_level
name: Batteri
- entity: binary_sensor.sm_t510_is_charging
name: Ladestatus
- type: divider
- entity: sensor.sector_stue_24000553b73
name: Temperatur Stue
- entity: sensor.sector_gang_2400055381c
name: Temperatur Gang
state_color: false
show_header_toggle: false
tap_action:
action: none
style:
.: |
ha-card {
background-color: transparent;
box-shadow: none;
margin-bottom: -20px;
margin-top: -30px;
margin-left: -30px;
width: 300px;
}
Did you check the first post in this thread? There is a link at the bottom with many card-mod examples. Go through that list, maybe you’ll find a solution.
2 Likes
Any Card-mod gurus able to help me on this? I’m trying to target this state-switch <div> to set overflow: visible so that the background colour/image can ‘escape’.
This is what it currently looks like:
This is the desired look:
This is the <div> I can target with overflow: visible to make it work under styles #root {}:
I’ve attempted to wrap the state-switch-card within a custom:mod-card but I’m not sure if this is the correct approach?
thanks!
YAML
- type: custom:stack-in-card
view_layout:
grid-area: main1
justify-self: middle
show:
mediaquery: '(min-width: 600px)'
card_mod:
style: |
#root {
overflow: visible !important;
}
:host {
margin-top: -300px !important;
padding-top: 300px !important;
overflow: visible !important;
margin-left: -4px !important;
}
ha-card {
background-color: rgba(0,0,0,0) !important;
backdrop-filter: blur(0px) !important;
border-radius: 30px 30px 30px 30px !important;
box-shadow: none !important;
overflow: visible !important;
}
cards:
- type: custom:mod-card
card:
type: custom:state-switch
entity: hash
transition: slide-left
transition_time: 500
view_layout:
grid-area: main1
states:
kitchen:
type: custom:layout-card
layout_type: grid
view_layout:
grid-area: main1
layout:
grid-template-columns: auto 300px 300px auto
grid-template-rows: 1fr
cards:
- type: custom:mini-media-player
Thank you. I did read through the examples in that post, but unfortunately I could not find something relevant to my specific case
Any examples & tutorials are not supposed to cover ALL possible needs - they just simplify learning.
I want to change the size of my mdi icons seen here:
I use them in a grid:
- type: grid
view_layout:
grid-area: sidebar
columns: 3
cards:
- type: button
icon: mdi:battery-charging-high
tap_action: !include popup/battery.yaml
hold_action:
action: none
- type: button
icon: mdi:arrow-up-bold-circle-outline
tap_action: !include popup/sidebar_update.yaml
hold_action:
action: call-service
service: homeassistant.update_entity
service_data:
entity_id: sensor.hacs
- type: button
icon: mdi:information-outline
tap_action: !include popup/sidebar_information.yaml
hold_action:
action: none
- type: button
icon: mdi:car
tap_action: !include popup/sidebar_car.yaml
hold_action:
action: none
- type: button
icon: custom:roborock-vacuum
tap_action: !include popup/sidebar_vacuum.yaml
hold_action:
action: none
- type: button
icon: mdi:radio
tap_action: !include popup/radio.yaml
hold_action:
action: !include popup/plex.yaml
I do use card-mod but I have no clue how to make it work on these icons. Couldn’t find any other thread explaining this.
Thanks
Check here:
1st post → link at the bottom to the post → find a link to a post for Entities card → find a style for changing an icon size → use ha-card instead of :host
I do see how to change icon color in those posts but not icon size. Now I’m sure it’s not that far off but I tried using icon-size and size in px. or em or font size but that doesn’t work. That’s why I’m asking I guess.
cards:
- type: button
icon: mdi:battery-charging-high
card_mod:
style: |
ha-card {
size: 12px;
}
tap_action: !include popup/battery.yaml
hold_action:
action: none
I gave you an exact route to the code you need - you could find it:
There is a code for 1 entity below this code, you may use it for 1 button (:host → ha-card). Or you may use the code from the screenshot , just for one entity.