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! 
1 Like
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;
}
1 Like
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.
2 Likes
Can you elaborate please?
How do you add styling in the browser?
Well! I never knew you could do that!
Thanks.
Can someone please help? I have been trying for days to find the right combo to remove the padding in the header from fold-entity-row
I found that it is this style i need to mod but what is the correct card-mod style?
Please help me anyone?
it would be great to see your cardās config and your styling.
Is this what you want?
type: entities
style: |
:host
$: |
.card-content {
padding: 0px !important;
}
entities:
- type: 'custom:fold-entity-row'
style: |
:host
$: |
.card-content {
padding: 0px !important;
}
head:
type: 'custom:banner-card'
color: '#5F9BEA'
heading:
- 'mdi:home'
- Nomhus
entities:
- type: 'custom:layout-card'
layout: vertical
cards:
- type: 'custom:layout-card'
column_num: 6
layout: horizontal
cards:
# Theme based on Google app dark theme
# Creater: Juan - @juanmtech
# Website: https://www.juanmtech.com
# YouTube Channel: https://youtube.com/juanmtech
# My Home Assistant Config files: https://github.com/JuanMTech/Home_Assistant_files
#
#
Google Dark Theme:
# Header:
app-header-background-color: "#171717"
app-header-text-color: "#BDC1C6"
# Main Interface Colors
primary-color: "#5F9BEA"
light-primary-color: var(--primary-color)
primary-background-color: "#171717"
secondary-background-color: var(--primary-background-color)
divider-color: var(--primary-background-color)
# Text
primary-text-color: "#BDC1C6"
secondary-text-color: "#5F9BEA"
text-primary-color: "#FFFFFF"
disabled-text-color: "#717171"
# Sidebar Menu
sidebar-icon-color: var(--app-header-text-color)
sidebar-text-color: '#BDC1C6'
sidebar-background-color: "#202124"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#5F9BEA"
sidebar-selected-text-color: var(--sidebar-selected-icon-color))
# States and Badges
state-icon-color: "#5F6267"
state-icon-active-color: "#5F9BEA"
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: "#5F9BEA"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: var(--paper-slider-knob-color)
paper-slider-secondary-color: var(--light-primary-color)
# Labels
label-badge-background-color: "#202124"
label-badge-text-color: "#BDC1C6"
label-badge-red: "#D06568"
label-badge-green: "#80C884"
label-badge-blue: "#5F9BEA"
label-badge-yellow: "#DFC271"
label-badge-gray: "#5F6267"
# Cards
ha-card-border-radius: "15px"
ha-card-box-shadow: 1px 1px 5px 0px rgb(12, 12, 14)
paper-card-background-color: "#202124"
paper-listbox-background-color: "#202124"
# Switches
switch-checked-button-color: "#5F9BEA"
switch-checked-track-color: "#404D64"
switch-unchecked-button-color: "#636466"
switch-unchecked-track-color: "#636466"
# Toggles
paper-toggle-button-checked-button-color: var(--switch-checked-button-color)
paper-toggle-button-checked-bar-color: var(--switch-checked-track-color)
paper-toggle-button-unchecked-button-color: var(--switch-unchecked-button-color)
paper-toggle-button-unchecked-bar-color: var(--switch-unchecked-track-color)
# Table
table-row-background-color: var(--primary-background-color)
table-row-alternative-background-color: var(--secondary-background-color)
data-table-background-color: var(--primary-background-color)
Hi, can you please help me to add backgroud-color to slider-entity-row? .wrapper div should be enough. Then Iād like also to change colors of progress bar to make it the same all along the bar, regardless the position of the pin.
Thanks.
Dear all,
I was searching here in the forum but did not find any solution for this. I tried what the dev told me but my problem is that my Pop-up size will never apply no matter what i do:
This is my config if someone could give me a hand?
name: Vacuum
icon: mdi:robot-vacuum
template: rooms_child
show_state: false
tap_action:
action: call-service
service: browser_mod.popup
service_data:
large: false
title: Vacuum
style: |
ha-card {
color: grey;
opacity: 0.4;
width: 50%
background-color: var(--primary-background-color);
border-radius: 15px;
}
card:
# type: iframe
# url: 'http://192.168.1.162'
# aspect_ratio: 159%
type: vertical-stack
....
I f i change width and height it wonāt be taken into account somehowā¦
result:
