1st post → link at the bottom → post with many links → post for Entities card
Strange, I do not see a cutoff:
Check your card-mod theme or disable it.
Thank you.
I have followed the link, but I cannot find how to change the colors based of state of entity unfortunately.
Then write & post a code for applying a STATIC style to the element you need, afterwards people will tell you how to change the style dynamically (if it is possible).
Done. Thanks!
- type: weblink
name: Gehe zu Config-Dashboard
url: /config/dashboard
icon: mdi:arrow-right
card_mod:
style: |
a {
padding-left: 45px;
}
1 Like
Probably I am not getting your question.
The “[first shadow root of] each element-a” is meaningless since each element has only ONE shadowRoot.
I do not see how that “"#armActions mwc-button$": |” case may be contradictory to the “will create one card-mod element in each element-a , and one in the shadowRoot of the first element-b in the each element-a .”.
If you have any doubts please share them. I think this is an interesting topic…
Perhaps ignore my interpretations and/or try to understand and explain the leading $ in your words. I don’t give up trying to undertand. 
element-a:
$ element-b $:
Currently I neither understand nor see happening, what Thomas explained.
Here’s a tricky one, cause lots of custom cards in the game:
How can I reposition the 3rd row on the left empty space of the 2nd row?
1st example:
- entity: cover.rollladen_alle
name: Alle
secondary_info: position
- type: custom:cover-position-preset-row
name: ' '
icon: none
entity: cover.rollladen_alle
reverseButtons: true
customSetpoints: true
openPosition: 100
midOpenPosition: 71
midClosePosition: 17
closePosition: 0
customText: true
customOpenText: AUF
customMidOpenText: Mitte (1/2)
customMidClosedText: Fast zu
customClosedText: ZU
state_color: false
- type: custom:slider-entity-row
entity: cover.rollladen_alle
name: ' '
icon: none
hide_when_off: false
full_row: true
min: 0
max: 100
step: 1
attribute: position
toggle: false
show_state: false
state_color: true
secondary_info: ''
state_header: ''
column: true
2nd example:
- entity: climate.thermostat
name: Heizung
secondary_info: last-changed
- type: custom:climate-mode-entity-row
entity: climate.thermostat
name: ' '
icon: none
secondary_info: none
modes:
- hvac_mode: auto
icon: mdi:calendar-sync
color: green
- hvac_mode: heat
- hvac_mode: 'off'
- type: custom:slider-entity-row
entity: climate.thermostat
name: ''
hide_when_off: false
full_row: true
min: 7
max: 32
step: 1
attribute: temperature
toggle: false
show_state: true
state_color: true
secondary_info: last-changed
state_header: ''
column: false
1 Like
stack-in-card with changed width.
See examples in my consolidation post
Hi! What a fantastic thread!
I have been turning my head inside out trying to figure out how to change size of the SHUFFLE icon in custom:mini-media player.
How on earth can i change the icon size?
This is the code I would like to change:
.mmp-media-controls__shuffle, .mmp-media-controls__repeat {
flex: 3 200 0%;
justify-content: center;
--mdc-icon-size: 20px;
}
Any help would be greatly appreciated!!
Can you also center the whole row? Not only the text (text-align: center) but including the icon. I tried it for 15 minutes with everything from CSS Layout - Horizontal & Vertical Align but gave up.
Not clear, make a picture in MS Paint
I do remember the question, will try to reproduce these cases and come back a bit later.
1 Like
- type: entities
title: ''
state_color: true
show_header_toggle: false
entities:
- type: weblink
name: Betriebsstatus
url: /smart-home-gewerke/betriebsstatus
icon: mdi:checkbox-marked-circle
card_mod:
style: |
a {
#padding-left: 65px;
letter-spacing: 4px;
text-decoration: none;
font-weight: 500;
font-size: 15px;
#text-align: center;
}
Meanwhile - using “#” here may not give you the same effect as in another places of yaml code…
Thx but it’s working fine (lines with # are ignored and the style is not applied).
Note: I added the card (entities) which contains the row I try to center.
How to center rows in Entities card:
May be applied for weblink & command.
type: entities
entities:
- sun.sun
- type: weblink
name: Some link
url: http://google.com
icon: mdi:checkbox-marked-circle
card_mod:
style: |
a {
justify-self: center;
}
a div {
margin-left: 0px !important;
}
:host {
display: grid;
}
- type: button
action_name: Execute
entity: sun.sun
icon: mdi:blank
name: ' '
tap_action:
action: more-info
card_mod:
style: |
div {
justify-content: center !important;
margin-left: 0px !important;
}
ha-state-icon {
display: none;
}
2 Likes
I’m losing my mind trying to get this done. I’m trying to remove the margin from the text element of a card. I want the space between the icon and text to be minimal.
- type: vertical-stack
cards:
- type: entities
style:
.: |
#states > * {
font-size: 14px;
margin: -15px -10px -10px -20px !important;
padding: -10px -10px -10px -10px !important;
}
show_header_toggle: false
entities:
- sensor.next_dawn
- sensor.nextsunrise
Any ideas?
I’m pretty sure that nothing what you have posted is working. There are so many indentations problems in you example, any help will not help.
Start with a working card.
Hi! Need help with some overflow text with the Alarm Panel card. Using styling found in a different thread but cannot seam to adjust the Clear button overflow. I can adjust in in the Inspect window (blue arrow) but cannot translate that to the card. Any help or direction is appreciated!
Current YAML
type: alarm-panel
entity: alarm_control_panel.home_alarm
states:
- arm_home
- arm_away
card_mod:
style: |
ha-card {
--paper-input-container-shared-input-style_-_font-size: 2.5rem;
--keypad-font-size: 2.5rem;
--mdc-typography-button-font-size: 1.5rem;
--mdc-button-outline-color: rgba(0, 0, 0, 0);
--paper-font-subhead_-_font-size: 1.5rem;
--mdc-shape-small: 10%;
}
#keypad {
width: 30%;
max-width: 500px !important;
}
#keypad mwc-button {
border-radius: 5px;
}
mwc-button.numberkey {
border-color: rgba(100,100,100,.1);
border-width: 2px;
border-style: solid;
}
#keypad mwc-button:hover {
background: rgba(100,100,100,.2);
}
#keypad mwc-button {
padding: 30px !important;
margin: 4px;
width: 30%;
box-sizing: border-box;
height: 100px;
}
paper-input {
max-width: 300px !important;
}