Probably your styles are conflicting. Could you please share the full theme so I can reproduce?
@KTibow it’s a theme I use for tablet UI.
I need to widen the columns in case of masonry view and to apply a margin in case of panel view .
tablet:
# Global
primary-color: "#FF9F09" # from Apple systemOrange dark mode
light-primary-color: "#B6B6C1" # light gray (icons on left menu)
primary-background-color: "#2c2c2e" # systemGray5 dark mode
secondary-background-color: rgba(25, 25, 25, 0.7)
divider-color: "#98989d" # from Apple systemGray dark mode
accent-color: rgba(255, 159, 9, 1)
# Text
primary-font-family: "-apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif"
paper-font-common-base_-_font-family: "var(--primary-font-family)"
paper-font-common-code_-_font-family: "var(--primary-font-family)"
paper-font-body1_-_font-family: "var(--primary-font-family)"
paper-font-subhead_-_font-family: "var(--primary-font-family)"
paper-font-headline_-_font-family: "var(--primary-font-family)"
paper-font-caption_-_font-family: "var(--primary-font-family)"
paper-font-title_-_font-family: "var(--primary-font-family)"
primary-text-color: "#FFF"
secondary-text-color: "#d3d3d3"
text-primary-color: "#FFF"
disabled-text-color: "#555" # XXX: https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/2
text-dark-color: "#FFF"
# Sidebar Menu
sidebar-background-color: var(--primary-background-color)
sidebar-icon-color: var(--light-primary-color)
sidebar-text-color: "#F1F1F1"
sidebar-selected-background-color: var(--primary-background-color)
sidebar-selected-icon-color: "#FFF"
sidebar-selected-text-color: var(--sidebar-selected-icon-color)
# States and Badges
state-icon-color: "#FFF"
state-icon-active-color: rgba(255, 214, 10, 1)
paper-item-icon-active-color: rgba(255, 214, 10, 1)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: "#FFF"
paper-slider-knob-start-color: var(--paper-slider-knob-color)
paper-slider-pin-color: var(--paper-slider-knob-color)
paper-slider-active-color: "#0984ff" # from Apple systemBlue dark mode
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, 159, 9, 0.7) # from Apple systemOrange dark mode
# Cards
card-background-color: var(--secondary-background-color) # Unused entities table background
paper-listbox-background-color: var(--primary-background-color)
ha-card-border-radius: 20px
ha-card-background: rgba(10, 10, 10, 0.4)
paper-card-background-color: var(--ha-card-background)
code-editor-background-color: black
# 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)
# Switches
switch-checked-color: "#30d257" # XXX: remove when https://github.com/home-assistant/home-assistant-polymer/pull/4203 is in HA
switch-checked-track-color: "#30d158" # from Apple systemGreen dark mode
switch-checked-button-color: "#FFF"
# Other
paper-dialog-background-color: rgba(55, 55, 55, 0.8) # e.g., background of more-info
paper-item-icon-color: white # also should mini-media-player icon white (but doesn't work by itself)
more-info-header-background: rgba(25, 25, 25, 0.5)
lumo-body-text-color: var(--primary-text-color) # see https://github.com/basnijholt/lovelace-ios-dark-mode-theme/issues/42
app-header-background-color: rgba(155, 155, 155, 0.2)
markdown-code-background-color: "#464646"
# Custom
mcg-title-letter-spacing: .15em
mini-media-player-base-color: white
mini-media-player-icon-color: white
# mini-media-player-artwork-opacity: 0.7 # causing some bug
#mdc-theme-surface: "rgba(22, 45, 66, 1)"
mdc-theme-surface: "#3e3e3e"
masonry-view-card-margin: 5px 15px
card-mod-theme: tablet
card-mod-view-yaml: |
hui-masonry-view$: |
.column {
max-width: 580px!important;
}
hui-panel-view$:
hui-vertical-stack-card$: |
#root {
margin: 20px!important;
}
I think whenever it can’t find an element to shadow-root into, it doesn’t bother rendering the rest. As I said earlier, if you still want that functionality you could
Thanks but i don’t like that solution, I don’t want to use another component
mod-card is a part of card-mod.
Sorry I didn’t know, could you post me an example?
type: custom:mod-card
style:
hui-vertical-stack-card$: |
#root {
margin: 20px !important;
}
card:
type: vertical-stack
cards: PASTE YOUR CARDS HERE AND INDENT THEM
Oh perfect, it basically puts itself as a wrapper and is able to traverse the shadow root.
Thank you!
Hi! I wanted to have a blurred background and a transparent popup card like this:
I have an existing themes.yaml copied from Mattias and want to incorporate the blurred background and transparent popup card into his themes but whenever I copy this syntax
card-mod-card-yaml: |
"#root>hui-image":
$: |
#image {
pointer-events: none;
}
"#root>hui-markdown-card,#key1":
$: |
ha-card>ha-markdown {
padding: 0 !important;
}
"#root>hui-markdown-card,#key2":
$:
ha-card>ha-markdown:
$: |
ha-markdown-element>font>ha-icon {
vertical-align: 3%;
opacity: 0.6;
}
ha-markdown-element>p>span {
font-family: Franklin Gothic Medium;
font-size: 5vw;
font-weight: 400;
margin-left: -0.3vw;
letter-spacing: -0.05vw;
}
to his themes, it became like this:
Complete themes.yaml of Mattias: link
Can you help me figure out what might be the problem?
Is it possible to have different colours for different entities on a custom:multiple-entity-row?
This is what I have now…
- type: custom:multiple-entity-row
entity: input_boolean.heating_upstairs
name: Heating Status
state_header: Upstairs
entities:
- entity: input_boolean.heating_downstairs
name: Downstairs
style: |
:host {
{% if states(config.entity) == 'on' or
states('input_boolean.heating_downstairs') == 'on' %}
--paper-item-icon-color: rgb(255, 165, 0);
{% endif %};
}
Thanks.
Could you mark the screenshot up?
Which browser are you using?
Sorry, what do you mean?
Draw on the screenshot to illustrate what you mean.
Ah, ok…
For downstairs and Upstairs I’d like the word ‘On’ to be in one colour and the word ‘Off’ to be in another colour i.e the state of the input_boolean
Style .entity:nth-of-type(x) div. Change the x to 1 for downstairs and 2 for upstairs. Don’t set --paper-item-icon-color, set color.
1 Like
I’m not sure what you mean by this… How do use that?
In your CSS.
Hi Everyone,
I tried to set up a very “easy” thing, namely to change the border color of a state-badge inside a picture elements card. Nothing happens, and I don’t really get what I’m doing wrong.
I’ve added this to raw editor:
- type: state-badge
entity: binary_sensor.window4
style:
ha-state-label-badge:
$:
ha-label-badge:
$: |
.label-badge .label span{
color: #000 !important;
}
.: |
:host {
{% if is_state('binary_sensor.window4', 'Open') %} --label-badge-red: #03A9F4; {% endif %};
{% if not is_state('binary_sensor.window4', 'Closed') %} --label-badge-red: #fd79a8; {% endif %};
color: #fff;
}
I know it’s working for badges at the header, but seems like it’s not the same for every card.
Try de-indenting
.: |
:host {
{% if is_state('binary_sensor.window4', 'Open') %} --label-badge-red: #03A9F4; {% endif %};
{% if not is_state('binary_sensor.window4', 'Closed') %} --label-badge-red: #fd79a8; {% endif %};
color: #fff;
}
I do not understand what you mean.