Hi, anyone knows how change the division lines color of a history graph card?
Thanks and regards
I believe itās always aligned to the left.
Anyway, this config centers title of Entities card for me
type: entities
title: Test
style: 'div.card-header {justify-content: center}'
entities:
what is it? imho a screenshot would be really helpful.
the lines that form the grid, the perpendicular, vertical and horizontal lines
The blue and red line not, only the grid and maybe numbers too
Thanks again
Iām pretty sure itās not possible using card-mod as it uses canvas
element to create a drawing and everything happens inside charts-render-monitor
script.
Wtf, thanks again bro
hi there, sorry for this very noob questionā¦
iām trying to get an icon to change color based on its state, but Iām a bit confused with some of the variables at play here. What do I need for config.entity and --state-icon-active-color?
eg.
I have an input_boolean.fan_control entity that iād like its icon to change color, how should i go about doing it?
Iāve been reading up and trying my hand at it for 2 days and canāt seem to get it to work.
- entity: input_boolean.fan_control
name: Cooker On/Off
icon: mdi:stove
style: |
:host {
--paper-item-icon-color:
var{% if is_state(input_boolean.fan_control), "on") %}
yellow
{% else %}
blue
{% endif %})
;
}
- entity: input_boolean.fan_control
name: Cooker On/Off
state_color: true
icon: mdi:stove
style: |
:host {
--paper-item-icon-active-color: yellow;
--paper-item-icon-color: blue;
}
that didnāt work
that worked now thank you!!!`
Hi. Could you please help me out with this code? Iām trying to add style to a slider-entity-row (knob and progress bar)
- type: custom:mod-card
debug_cardmod: true
style:
slider-entity-row:
$:
ha-slider:
$: |
.slider-knob {
background-color: rgb(255,255,255);
}
$:
paper-progress:
$: |
div#progressContainer {
background-color: rgb(255,0,0);
}
div#primaryProgress {
background-color: rgb(0,255,0);
}
Itās working separately (or the knob or the bar) but not at the same time. Thank you for your help.
I could use a litle help. Iām trying to change font-color of floated-label-placeholder in paper-input.
Hi @thomasloven,
First of all thank you so much for this great work! Iāve been using card-mod for a while and itās awesome I recently wanted to try the new theme styling feature from release 13. I have the latest release (13) installed from HACS and running Home Assistant 0.108.3 The styling in the theme does not at all reflect in my cards. Is this feature broken for now? Is anyone else having this issue?
Thanks again!
Interesting, it refers to card-mod-themes.yaml
but there is no such fileā¦
because you have 2 identical $ keys under ha-slider
.
this works for me
style:
hui-entities-card:
$:
slider-entity-row:
$:
ha-slider:
$:
'#sliderContainer': |
.slider-knob {background-color: rgb(255,255,255)}
paper-progress:
$: >
#progressContainer {background-color: rgb(255,0,0)}
#primaryProgress {background-color: rgb(0,255,0)}
should be paper-input-container
.
Thank you @AhmadK. I didnāt know how to put the second $ selector into work. You saved my day. Thanks!
how about this (untested)?
ha-card:
hui-input-select-entity-row:
$:
ha-paper-dropdown-menu:
$:
paper-menu-button:
paper-input:
$:
paper-input-container:
$: |
.floated-label-placeholder {
font-size: 16px !important;
--primary-text-color: black !important;
}
btw, no need to use quotes around keys unless they have . or #
youāre welcome. I didnāt know, too. Now I do
actually, it was more about how to ābranchā the map at a certain level.
Thank You AhmadK for pointing me in right direction. The trick was to style just the input_select not the card. The right way to do it was:
- type: entities
image: '/local/custom-lovelace/custom_ui/vacuum.png'
style: |
ha-card {
background-image: url("/local/custom-lovelace/custom_ui/vacuumlist.png");
}
entities:
- entity: input_select.vacuum_room
image: '/local/custom-lovelace/images/vacuumicon.png'
style:
ha-paper-dropdown-menu:
$:
paper-input:
$:
paper-input-container: |
label {
font-size: 16px;
color: white;
}
actually, there was at least one more problem - you tried to style labelās placeholder instead of the label
when you do styling, try adding a styling bit in your browser first to see if it works, make it look as you want and only then use the styling in card-mod
.
Can you elaborate please?
How do you add styling in the browser?