Same as directly above: This is not card-mod-theme-related, is it? So I would suggest to put your question in the card-mod topic and not here.
Thanks a lot
Hey all, I am new to HA and am having trouble with creating a theme with a side panel. I finally figured out how to create a new theme and move the side bar to the left using card-mod-theme. Now I am trying to change the background of the sidebar to a gray color; or change the background of a vertical stack card using this theme to a gray color. Could anyone help me with this? I am sure Iām missing something simple, but canāt seem to find it on Google anywhere. Here is what I currently have for trying to turn the background of a vertical stack a new color,
Left_sidebar_test:
card-mod-theme: Left_sidebar_test
card-mod-card: |
hui-vertical-stack-card $: |
#root {
background-color: black;
border-radius: var(--ha-card-border-radius);
box-shadow: var(--ha-card-box-shadow);
}
card-mod-view-yaml: |
hui-sidebar-view $: |
.container {
flex-direction: row-reverse;
}
1 Like
I am trying to hide as much as I can from the new stats in more-info in version 2022.11.
Since you can click min/mean/max and show/hide the values,
could you force it to always only show mean (or state if there are no min/mean/max) ?
Like changing the default value from āshow all threeā to āshow only meanā.
And as a separate question, could we hide the <div class="chartLegend"> to get rid of the legend?
card-mod thread ā 1st post ā link at the bottom ā styles for statistics card
Do not think this can be controlled by CSS.
You cannot hide some graph since it is a ācanvasā element.
And you cannot simulate āswitched-offā legendās element too.
Another point is that āmean graphā is NOT a āreal graphā at all - it is absolutely wrong idea to show approximate data in more-info popup.
So, the right way is āshow a real history graph (like it was before 2022.11)ā and (optionally, and only if available) āshow statistical graphā (probably with min/max/mean).
Thanks, I didnāt know about that other thread.
I really donāt understand the change to statistics in more-info but balloob made it quite clear there will be no reverting to the old state graphs and there will be no options to use states. So until someone invents a replacement for all more-info, Iāll try to make the best of it.
I suppose you mean this https://community.home-assistant.io/t/card-mod-add-css-styles-to-any-lovelace-card/120744/3414.
I have tried to read up on how it works, but I just donāt get it yet so I donāt know how to use the example in my scenario (within more-info). I hide a lot of other elements, but thatās thanks to you and Mariusthvdb and hours of trial and errorā¦
Example of theme where I hide other more-info stuff: https://hatebin.com/hqqaomlwws
Once again a new HA release has changed how more-info popups show up. They for some reason changed the position yet again, while it alread was changed in september and it broke. Can someone pinpoint me what the correct code now is to center more-info dialogs?
.: |
ha-dialog {
--vertial-align-dialog: center !important;
}
Like anything else is done for more-info - like āhide logbookā etc.
Sad if it is true.
A part of a trend āmake HA usable for inexperienced peopleā like getting rid of yaml for integrations and moving everything to UI.
Nice commit. I suggested that in beta when I realised I wonāt get the states back. No response then, but someone listened. Thanks!
Is it possible to use arribute of a device to drive card background color?
I am quite happy with my theme setup right now, with active cards having a highlighted color. However, my smart ovens only shows activity through attribute.
my code:
card-mod-card: |
ha-card {
background: {% if is_state(config.entity, 'on') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'home') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'open') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'heating') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% elif is_state(config.entity, 'playing') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% endif %}
}
ha-card { background: {{ 'rgba(225, 225, 225, 1)' if
is_state_attr('config.entity', 'hvac_action',
'heating') }}; --primary-text-color: black;
}
Try achieving the same result (i.e. dependingly of your oven) by using card-mod WITHOUT a theme.
That works very fine, and i could continue doing that. I just want to have most of my settings in my theme to keep it simple.
I proposed to test it w/o a theme it since I thought that there could be some problem with your styles.
You need a styles for the oven entity only - then you should ālimitā it correspondingly - like it is done here for a fan entity only:
card-mod-row-yaml: |
hui-generic-entity-row $: |
state-badge {
{% if config is defined %}
{% if config.entity is defined %}
{% if config.entity.startswith('fan.') and is_state(config.entity, 'on') %}
animation: spin 3s infinite linear;
{% endif %}
{% endif %}
{% endif %}
}
@keyframes spin {
0% {
transform: rotate(0deg);
}
100% {
transform: rotate(359deg);
}
}
Aah, i see!
Iām a hack at this, but will try to play around with it and see if i could get it to work!
Thanks! 
Edit:
Works like a charm.
ha-card {
background: {% if config.entity.startswith('climate.') and is_state_attr(config.entity, 'hvac_action', 'heating') %} rgba(225, 225, 225, 1);
--primary-text-color: black;
{% endif %}
}
Iāve been using card-mod for quite awhile, but Iām just getting into creating some themes. Unfortunately, I can get neither my icons to change color or to get the battery level bars to appear using the theme below:
iPhone_Default:
card-mod-theme: iPhone_Default
background-image: "center / cover no-repeat fixed url('/local/images/tall/background1.jpg')"
lovelace-background: var(--background-image)
primary-color: "#FFFFFF"
light-primary-color: "#888888"
primary-background-color: "#e5e5ea"
secondary-background-color: rgba(255, 255, 255, 0.9)
divider-color: "#FFFFFF"
accent-color: rgba(255, 159, 9, 1)
# Text
primary-text-color: "#FFFFFF"
secondary-text-color: "#888888"
text-primary-color: "#FFFFFF"
disabled-text-color: "#FFFFFF"
text-dark-color: "#888888"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: var(--light-primary-color)
sidebar-text-color: var(--light-primary-color)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFFFFF"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: white
state-icon-active-color: red
state-icon-unavailable-color: var(--disabled-text-color)
paper-item-icon-active-color: "#FFFFFF"
# Sliders
paper-slider-knob-color: "#FFFFFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#007aff"
paper-slider-secondary-color: var(--paper-slider-knob-color)
paper-slider-container-color: rgba(255, 255, 255, 0.5)
paper-slider-font-color: "#000"
ha-slider-background: none !important
# Labels
label-badge-background-color: "#23232E"
label-badge-text-color: "#F1F1F1"
label-badge-red: rgba(255, 149, 9, 0.7)
# Cards
card-background-color: var(--secondary-background-color)
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: rgba(245, 245, 245, 0.4)
paper-card-background-color: var(--ha-card-background)
ha-card-border-width: 0
# Toggles
paper-toggle-button-checked-button-color: "#484848"
paper-toggle-button-checked-bar-color: "#484848"
paper-toggle-button-unchecked-button-color: var(--paper-toggle-button-checked-button-color)
paper-toggle-button-unchecked-bar-color: var(--disabled-text-color)
# Table row
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
# Toggle Switches
switch-checked-color: "#30d257"
switch-checked-track-color: "#3092FF"
switch-checked-button-color: "#00B3FF"
# Other
paper-dialog-background-color: rgba(200, 200, 200, 0.8)
paper-item-icon-color: "#333333"
more-info-header-background: rgba(230, 230, 230, 0.5)
lumo-body-text-color: var(--primary-text-color)
app-header-background-color: rgba(61, 107, 86, 0.4)
markdown-code-background-color: "#FFFFFF"
code-editor-background-color: "#FFF"
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
input-ink-color: var(--primary-text-color)
input-fill-color: transparent
input-disabled-fill-color: transparent
input-label-ink-color: var(--primary-text-color)
input-disabled-ink-color: var(--disabled-text-color)
input-dropdown-icon-color: var(--primary-text-color)
input-idle-line-color: var(--secondary-text-color)
input-hover-line-color: var(--secondary-text-color)
codemirror-property: var(--accent-color)
card-mod-row: |
:host {
display: block;
{% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
{% if battery %}
background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
{% endif %}
}
I expect the icons in my entities cards to be white, and to change to red when activeā¦ but the icons are actually a dark grey color irrespective of state. And the battery bars, wellā¦ no sign of those. I welcome any input.
A very humble proposal - to describe the issue you may safely remove everything between these lines since it is not related to card-mod.
The post becomes shorter.
Also , the ābatteryā variable seem be true or false - do not think this is what you need.
Great idea - proposal accepted, see below. I originally included everything in case something else was impacting my icon colors, but admittedly thatās not related to card-mod (I donāt believe).
iPhone_Default:
card-mod-theme: iPhone_Default
background-image: "center / cover no-repeat fixed url('/local/images/tall/background1.jpg')"
lovelace-background: var(--background-image)
primary-color: "#FFFFFF"
light-primary-color: "#888888"
primary-background-color: "#e5e5ea"
secondary-background-color: rgba(255, 255, 255, 0.9)
divider-color: "#FFFFFF"
accent-color: rgba(255, 159, 9, 1)
[ ... ]
# States and Badges
state-icon-color: white
state-icon-active-color: red
state-icon-unavailable-color: var(--disabled-text-color)
paper-item-icon-active-color: "#FFFFFF"
card-mod-row: |
:host {
display: block;
{% set battery = state_attr(config.entity, 'battery') or state_attr(config.entity, 'battery_level') %}
{% if battery %}
background: linear-gradient(to right, rgba(0,255,0,0.5), {{battery}}%, white {{battery}}%);
{% endif %}
}
I started using this today, and using the art-nouveau theme, I canāt see the background image. If I use a local image, one that works outside of the theme, still nothing. If I use background outside the theme, it appears for a split second.
Hi,
Iām no CSS profi but try many thinks with your great card-mod, but I ca not find a solution for the mini-graph-card.
I want to have a distance from the fine border line to the graph but always the graph is going to the border. Here my code:
- type: custom:mini-graph-card
card_mod:
style: |
ha-card {
padding: 10px;
}
name: CPU Auslastung
entities:
- entity: sensor.processor_use
state_adaptive_color: true
show_fill: false
decimals: 1
hour24: true
hours_to_show: 3
height: 150
line_width: 4
points_per_hour: 360
show:
name: false
graph: line
icon: false
state: false
legend: false
points: false
labels: false
color_thresholds:
- color: '#6aa84f'
value: 0
- color: '#f1c232'
- color: '#e69138'
- color: '#cc0000'
value: 100
Thank you for a little help.
Steffen