dmatik
November 24, 2024, 2:10pm
1887
Sure,
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)
dmatik
November 24, 2024, 3:56pm
1889
Tried everythingā¦ itās just not working
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;
}
Faecon
November 25, 2024, 7:25am
1890
- 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.@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?
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.
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;
}
peteywhit
December 18, 2024, 6:20am
1902
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!
DriesA
December 18, 2024, 12:05pm
1903
Hi,
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.
