What does not work?
Styling for bar-card works.
But if you already have some styling for bar-card - you need to COMBINE your & new styles (1st post ā link at the bottom ā other articles ā navigation hints).
This is not related to button-card. For the button you only need to find out how to adjust itās height to the stack.
Iām trying to figure this out as well. Could you show your whole card_mod config for the active tab color?
Thanks in advance!
@ztorm Key is CSS for āactiveā ā¦ mwc-tab[active]
Here ya go:
- type: custom:mod-card
card_mod:
style:
tabbed-card $: |
mwc-tab {
background: var(--ha-card-background, var(--card-background-color, white) );
border-color: var(--ha-card-border-color, var(--divider-color, #e0e0e0) );
border-width: 2px;
border-top-left-radius: 20px;
border-top-right-radius: 20px;
border-style: solid;
overflow: hidden;
width: 25%;
}
mwc-tab[active] {
background: #EBFFD8 !important;
}
card:
type: custom:tabbed-card
Results showing MLB->Standings->Divisional are the selected tabs.
yesterday, finally found the easiest (?) way of spreading some entities in a glance card, and use the width better.
I use this inside an entities card, so thats why the hui-element is used, and the default mod for setting the margin and eliminating box shadow. Its the second mod for padding that makes it happen:
- type: custom:hui-element
card_type: glance
card_mod:
style: |
ha-card {
margin: 0px -16px -16px -16px;
box-shadow: none;
}
ha-card .entities {
padding: 0px;
}
resulting in:
opposed to:
which feels so much more restricted.
Itās remarkable HA Frontend does this with entities, because eg when using a grid with mushroom cards there, it simply adjust to the available space
- type: custom:mod-card
card_mod:
style: |
ha-card {
margin: 0px -16px -16px -16px;
}
card:
type: grid
columns: 5
cards:
in fact, I had these both in my card, and that was why I noticedā¦
i couldnāt find this simple mod in the posts above for Glance, so thought to add here.
moving from š¹ Card-mod - Super-charge your themes! - #1331 by Ildar_Gabdullin
looking for a way to change the icon of button in an entities card footer
consisting of these:
footer:
type: buttons
entities:
- entity: input_boolean.loop_sound_bite
name: Loop Soundbite
- entity: script.play_sound_bite
name: Speel soundbite
icon: mdi:play
and suggested generic mod is:
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
ha-chip:
$: |
.mdc-chip {
border: 1px solid red !important;
border-radius: 4px !important;
}
.: |
ha-chip:nth-child(3) {
{% if is_state('input_boolean.test_boolean','on') %}
--ha-chip-background-color: lightgreen;
{% else %}
--ha-chip-background-color: cyan;
{% endif %}
}
I dont need the first section, as my buttons are modded/styled in the card-mod-theme already, only need the icon to change.
compare a custom:button-card config like
- type: custom:hui-element
card_type: horizontal-stack
cards:
- type: custom:button-card
entity: input_boolean.loop_tune
<<: &style_boolean
show_name: false
show_label: true
label: >
[[[ var loop = (entity.state === 'on') ? 'Aan' : 'Uit';
return 'Loop: ' + loop; ]]]
aspect_ratio: 4/1
icon: >
[[[ return (entity.state === 'on') ? 'mdi:restart' : 'mdi:restart-off'; ]]]
styles:
icon:
- color: >
[[[ return (entity.state === 'on') ? 'green' : 'var(--text-color)'; ]]]
card_mod:
style: |
ha-card {
box-shadow: none;
}
- type: custom:button-card
entity: script.play_tune
<<: &style_script
show_name: false
show_label: true
label: >
[[[ return (entity.state === 'on') ? 'Stop' : 'Speel'; ]]]
aspect_ratio: 4/1
icon: >
[[[ return (entity.state === 'on') ? 'mdi:stop' : 'mdi:play' ]]]
styles:
card:
- box-shadow: none
icon:
- color: >
[[[ return (entity.state === 'on') ? 'red' : 'var(--text-color)'; ]]]
tap_action:
action: call-service
service: script.toggle
service_data:
entity_id: entity
haptic: light
hold_action:
action: more-info
haptic: light
ā¦
Styling buttons-row in a footer (+ dependently on a state)
Similarly to buttons-row in Entities card:
code
type: entities
title: footer
entities:
- input_boolean.test_boolean
footer:
type: buttons
entities:
- entity: sun.sun
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
- entity: input_boolean.test_boolean
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $: |
ha-assist-chip:nth-child(3) {
{% if is_state('input_boolean.test_boolean','on') %}
--ha-assist-chip-filled-container-color: lightgreen;
{% else %}
--ha-assist-chip-filled-container-color: cyan;
{% endif %}
border: 1px solid red;
border-radius: 4px;
}
before 2023.12
card_mod:
style:
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
ha-chip:
$: |
.mdc-chip {
border: 1px solid red !important;
border-radius: 4px !important;
}
.: |
ha-chip:nth-child(3) {
{% if is_state('input_boolean.test_boolean','on') %}
--ha-chip-background-color: lightgreen;
--card-mod-icon: mdi:card;
{% else %}
--ha-chip-background-color: cyan;
--card-mod-icon: mdi:account;
{% endif %}
card itself
type: entities
title: footer
entities:
- input_boolean.test_boolean
footer:
type: buttons
entities:
- entity: sun.sun
show_name: true
show_icon: true
- entity: input_boolean.test_boolean
show_name: true
show_icon: true
- entity: input_boolean.test_boolean
show_name: true
show_icon: true
- entity: sun.sun
show_name: true
show_icon: true
1 Like
I really dislike these nth-child mods, they are so fragile. add/remove an item and its broken
ā¦ I had hoped to set a mod directly on the entity itself
You cannot style a button inside a button I guess.
can confirm
- type: entities
title: Soundbites
card_mod:
class: class-header-margin
style:
hui-buttons-header-footer $ hui-buttons-base $ .ha-scrollbar:
ha-chip:
.: |
ha-chip:nth-child(2) {
{% if is_state('script.play_sound_bite','on') %}
--card-mod-icon: mdi:stop;
{% else %}
--card-mod-icon: mdi:play;
{% endif %}
to work ok!
can we also touch the name? Like I did in the label of the button-card?
btw, inspector reveals some really odd texts:
including the tap and hold action inside the title?
better use config-template-card
I canāt figure this one out, any help would be greatly appreciated.
yeah, probably.
well, Iāll leave it with the button icon for now. this getting way too complicated for such a small detail in the interface, trying to fix the inflexibility of core Frontend (lack of) options.
If I need more, I guess I just have to fall back to use custom:button-card.
Hello my friend! Did you find a solution for that??
I saw your post on GitHubā¦
Thank you!!
vertical-stack needs a custom:mod-card to do things like:
type: custom:mod-card
card_mod:
style: |
ha-card {
margin: -16px;
box-shadow: none:
}
:host {
--stack-card-margin: 0px;
}
card:
type: vertical-stack
did you try that?
Unfortunetly it didnāt work, this is my code with your suggestion.
type: custom:mod-card
card_mod:
style: |
.card-header {
padding: 6px 16px 2px !important;
}
card:
type: vertical-stack
Check Ildars post š¹ Card-mod - Add css styles to any lovelace card - #1731 by Ildar_Gabdullin on vertical stack
I found the solution from your link, thank you!
type: custom:mod-card
card_mod:
style:
hui-vertical-stack-card$: |
.card-header {
padding: 6px 16px 22px !important;
}
card:
type: vertical-stack
Probably daft/old or combi of those but I cannot modify the title of a markdown card (or other)
I read for about 2 hours, tried left/right but (see assumption above)
This is the simplest I could think off, it is not doing anything to the header āsome titleā
Please prove my lack-of-whatever ā¦ then at least I have a solution 
type: markdown
content: >-
whatever text
title: Some Title
card-mod:
style: |
.card-header {
color: blue;
}Has anyone tried to mod the browser_mod popup timeout? It uses primary-color, but in inspect element, there is no color value te be found. I use a primary-color that looks very close to my background-color, so the timeout bar is virtually invisible.
Iām talking about this progress bar btw:
Iāve dug around the CSS, but perhaps someone already has done this.
Try --primary-color: transparent; under style to hide the timeout bar
action: fire-dom-event
browser_mod:
service: browser_mod.popup
data:
title: Purifier
timeout: 300000
style: |
--popup-max-width: calc(385px + 495px);
--primary-color: transparent; /* hide timeout progress */
...