Hi,
I was trying to edit some styles on new badges, without any success.
Tried from this post: š¹ Card-mod - Super-charge your themes! - #1765 by Ildar_Gabdullin
The part on the badges row works fine for me, however the second part with badge specific styles is not working.
Anyone can share a working example please? I am looking to update the font-family on the content.
for the badge specific mods, you should hop over to the card-mod thread where various examples have been added lately.
this thread is for theming
I meant for theme of course.
Tried many examples, for some reasons, the examples for badges row itself are working for me, but diving inside, to change font on any badge not working for me.
a right, sorry for misreading that.
what did you try, please post some yaml so we can check
my MO mostly is to first try using card-mod only on an individual, to get the elements right, and next add that to the card-mod theme settings
Did you already manage an individual badge?
Sure,
This example working for me:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges $: |
@media (max-width: 450px) {
.badges {
justify-content: start !important;
}
}
However this is not working:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges $:
hui-badge:
hui-entity-badge $: |
.badge {
background-color: cyan !important;
}
Took from this threadā¦
check the dom path, and check the mods from the individual badge in the card-mod thread. theyāre not on
.badge
going from the
hui-entity-badge:
$: |
but use these:
card_mod:
style:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size: 24px;
/*color: {{'var(--warning-color)'
if is_state('binary_sensor.werkdag','on')}};*/
}
/*state-display {
font-size: 14px;
color: {{states('sensor.afval_kleur')}};
}*/
.: |
/*hui-entity-badge {
--ha-card-background: {{'var(--success-color)'
if is_state('binary_sensor.werkdag','off') else 'var(--card-background-color)'}};
}*/
ha-card {
border: 2px solid {{states('sensor.afval_kleur')}};
border-radius: 24px;
/*--ha-card-background: gray;*/
/*--primary-text-color: white;*/
--card-mod-icon-color: {{states('sensor.afval_kleur')}}; /*--icon-primary-color:*/
}
(all commented versions work, itās just a matter of preference which one you would use. keeping it as simple as possible)
Tried everythingā¦ itās just not working
Something I am missingā¦
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges $:
hui-badge:
hui-entity-badge $: |
ha-state-icon {
--mdc-icon-size: 24px;
color: red !important;
}
- type: horizontal-stack
cards:
- type: "custom:stack-in-card"
cards:
- type: custom:mushroom-template-card
primary: Energie
icon: mdi:alpha-e-circle-outline
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.dashboard_view # Helper entiteit
option: energie
icon_color: white
fill_container: true
card_mod:
style: |
ha-card {
box-shadow: 0px 2px 5px 0px rgba(0,0,0,0.3) !important;
background-color: rgba({{ states("input_text.kleur_iconen")}},0.2) !important;
}
- type: custom:mushroom-chips-card
chips:
- type: template
entity: climate.ruimte1
icon: mdi:fan
icon_color: white
tap_action:
action: toggle
card_mod:
style: |
ha-card {
border: none !important;
box-shadow: none !important;
}
Iāve made four of these ābuttonsā. How can I make more space between the buttons ?
try things like this:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 2px red solid !important;
}
.content {
font-size: 14px !important;
font-weight: 400;
}
.: |
ha-state-icon {
--mdc-icon-size : 24px;
}
this touches all my badges, and still leaves room for the mods on individual badges.
(was able to do this after @arganto helped me out in the regular card_mod thread on individual badges.)
please help us help you, and move this to regular card-mod thread (its not about theming)
also, provide a picture of the card, and a minimal config of cards, not all details.,ā¦)
Sticky badges
test_badges_sticky:
card-mod-theme: test_badges_sticky
card-mod-view-yaml: |
:first-child:not(hui-sections-view):
$: |
hui-view-badges {
z-index: 2;
position: sticky;
top: calc(var(--header-height) + 8px);
}
hui-sections-view:
$: |
hui-view-badges {
z-index: 2;
position: sticky;
top: var(--header-height);
}
Works at least in a Chrome+Win, iOS Companion App (iOS 15.x).
5 Likes
nice!
does it also work when you card_mod an individual badge for icon color etc?
Ive found the card_mod theme mods to be breaking when I do so. or vice versa of course
Example, I have this in card_nod theme:
card-mod-view-yaml: |
hui-sections-view:
$:
hui-view-badges:
$:
hui-entity-badge:
$: |
ha-state-icon {
--mdc-icon-size : 24px;
}
but need to repeat the icon size when I mod other stuff on an individual badge with:
type: custom:mod-card
card:
type: custom:hui-entity-badge
entity: sensor.afvalwijzer_vandaag
hold_action:
action: navigate
navigation_path: /ui-overzicht/kalender
visibility:
- condition: state
entity: sensor.afvalwijzer_vandaag
state_not: geen
card_mod:
style:
hui-entity-badge:
$:
ha-badge:
$: |
.badge {
border: 2px solid {{states('sensor.afval_kleur')}} !important;
}
.: |
ha-state-icon {
--mdc-icon-size: 24px;
color: {{states('sensor.afval_kleur')}};
}
Interesting.
Usually card-mod-theme & ānormalā card-mod may work together to style same element:
test_overwrite:
card-mod-theme: test_overwrite
card-mod-row-yaml: |
hui-generic-entity-row $: |
state-badge {
color: red;
}
type: entities
entities:
- entity: sun.sun
- entity: zone.home
card_mod:
style:
hui-generic-entity-row $: |
state-badge {
border: 1px solid cyan;
}
yes, even breaks if I merely set a card_mod theme background to the view.
weather-background:
card-mod-theme: weather-background
card-mod-view:
hui-sections-view {
{% if is_state('input_boolean.weer_view_background','on') %}
background: repeat url({{state_attr('camera.buienradar','entity_picture')}}) fixed;
{% endif %}
}
In that case the theme mod to the badges doesnt work either on the view with that background, and I need to mod them individually
Iām trying to add a semi-transparent background to all section divs on my dashboard, but I canāt find out, how. The last few days I tried so many different things without luck, that Iām about to give up. Thus, asking here for help is my last shot. 
Adding a card-mod-view-yaml section to my current theme is my latest approach and I honestly have no more ideas, why this doesnāt work out:
ios-dark-mode-blue-red:
card-mod-view-yaml: |
hui-sections-view:
$:
ha-sortable:
div:
div.section: |
background-color: rgba(0, 0, 0, 0.3) !important;
padding-left: 0.2504em !important;
padding-right: 0.5em !important;
padding-bottom: 0.5em !important;
border-radius: var(--ha-card-border-radius,12px) !important;
grid-column: span var(--column-span) !important;
grid-row: span var(--row-span) !important;
}
Does anyone of you have an idea, why this still doesnāt have any effect?
Start with adding:
card-mod-theme: ios-dark-mode-blue-red
Finally! Thank you for adding this piece to the puzzle. Apart from the missing card-mod-theme attribute the two div selectors still werenāt correct, but after staring at this for another couple of minutes, I got it finally right:
ios-dark-mode-blue-red:
card-mod-theme: ios-dark-mode-blue-red
card-mod-view-yaml: |
hui-sections-view:
$:
ha-sortable:
div: |
div.section {
background-color: rgba(0, 0, 0, 0.3) !important;
margin-left: -0.5em !important;
padding-top: 0.5em !important;
padding-left: 0.5em !important;
padding-right: 0.5em !important;
padding-bottom: 0.5em !important;
border-radius: var(--ha-card-border-radius,12px) !important;
grid-column: span var(--column-span) !important;
grid-row: span var(--row-span) !important;
}
Updating to say I finally found exactly what I was looking for here
Alright, Iāve searched everything that I know of and canāt find anybody else having asked the same question, or posted any solution to it. Note: Iāve been out of the game for a while with the last year of changes.
Since the Sidebar view has been added, the only alignment configuration it has is to the right with the #main div being aligned on the left due to it being the first div generated.
When I inspect the elements, Iām able to manually add āorder: -1ā to the #sidebar element or āorder: 1ā to the #main element to achieve a left aligned sidebar.
I used Mattās card-mod-helper page and got this selector path.
"body>home-assistant$home-assistant-main$ha-drawer>partial-panel-resolver>ha-panel-lovelace$hui-root$#view>hui-view>hui-sidebar-view$#sidebar"
I first tried to use card_mod at the view configuration level, with no results.
type: sidebar
title: Sidebar
path: sidebar
theme: apollo
cards:
- type: custom:digital-clock
timeFormat: hh:mm
dateFormat: LLLL
card_mod:
style: |
ha-card {
text-align: left !important;
background-color: transparent !important;
border: none !important;
padding-left: 15px !important;
}
.first-line {
font-size: 300% !important;
font-weight: normal;
}
.second-line {
font-size: 200% !important;
font-weight: normal;
}
view_layout:
position: sidebar
- type: horizontal-stack
cards:
...
view_layout:
position: sidebar
badges: null
card_mod:
style:
hui-sidebar-view $: |
#sidebar {
order: -1 !important;
}
I then tried to add it to a theme file to see if that was the issue.
card-mod-theme: apollo
card-mod-view-yaml: |
.: |
hui-view {
background: none !important;
}
hui-sidebar-view$:
#sidebar {
order: -1 !important;
}
How the heck can I get this to work?
Thanks for the help!
Hi,
I am using a tile card, but I would like to have the icon itself (not just the color) changed based on the status of that entity.
I tried the YAML below, but was not succesfull. Iām seeing a lot of posts to change the icon colour based on the status, but not the icon itself.
type: tile
entity: sensor.sauna_status
name: Status
vertical: false
hide_state: false
show_entity_picture: false
icon: |-
{% if is_state(entity, '0') %}
mdi:power-off
{% else %}
mdi:power-standby
{% endif %}
I guess this is possible using card-mod?
This thread is for themes, you should ask in the main card-mod thread.