Sure, i am sorry for the dutch language
I am quite unsure, though I am very certain there is a way to set up a sensor or modify it in such a way that youād be able to pull the right data. I canāt help you with that though as I have only been using HASS for the last 2 weeks and donāt know enough 
Pease help me,I would like the cards to be of the same size and the title āConsumo Istantaneoā to be in the centre of that card, here is my code:
type: custom:mod-card
style:
hui-horizontal-stack-card$: |
#root {
margin: 15px !important;
}
card:
type: horizontal-stack
cards:
- type: weather-forecast
entity: weather.forecast_meteonetwork
show_current: true
show_forecast: false
secondary_info_attribute: humidity
name: Torino
- type: custom:button-card
entity: sensor.date
show_name: false
show_icon: false
show_state: true
styles:
grid:
- grid-template-areas: '"s" "ora" "event"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
state:
- justify-self: center
- align-self: center
custom_fields:
ora:
- justify-self: center
- align-self: center
- font-weight: bold
event:
- justify-self: center
- align-self: center
custom_fields:
ora: |
[[[ return `<span>${states['sensor.time'].state}</span>` ]]]
event: |
[[[ return `<span>Appuntamenti calendario</span>` ]]]
- type: custom:bar-card
title: Consumo Istantaneo
show_icon: true
name: ' '
max: 4100
positions:
indicator: inside
value: inside
unit_of_measurement: W
severity:
- color: '#1e90ff'
from: 0
to: 3299
- color: Orange
from: 3000
to: 3500
- color: red
from: 3501
to: 4100
style: |
bar-card-currentbar, bar-card-backgroundbar {
border-radius: 10px;
}
ha-card {
--paper-card-background-color: 'rgba(0, 0, 0, 0.0)';
--ha-card-background: "rgba(0, 0, 0, 0.0)";
--paper-item-icon-color: 'var(--text-primary-color';
--ha-card-box-shadow: 'none';
}
ha-card .card-header .name {
text-align: center;
}
entities:
- entity: sensor.sensore_potenza_casa_w
Try to simplify the issue - get rid of card-mod for embedded cards & other complex code and concentrate on these 2 tasks. You are asking for a help a posting a code with lots of unrelated details.
For bar-card - here is how to center a title:
type: custom:bar-card
title: title
entities:
- entity: sensor.processor_use
card_mod:
style:
$: |
.card-header {
text-align: center;
}
As for button-card - probably better to ask in the button-card thread.
Thanks but it doesnāt work for me, maybe i need to change the rest of the css code. Iāll try asking in the button-card thread.
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!!