I think Lovelace defaults to starting new columns. It should work if you just place all the cards inside a Horizontal Stack.
Here’s my code, I don’t know if there’s anything wrong with it.
- title: Home
icon: mdi:home-assistant
cards:
- cards:
- content: |
# Home
## There's 5 lights on.
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
}
h2 {
font-size: 15px !important;
}
type: markdown
type: horizontal-stack
- cards:
type: custom:search-card
- cards:
- content: |
# Scenes
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
}
type: markdown
type: vertical-stack
- cards:
# Entity to control
- entity: scene.sleep_mode
# Icon to display
icon: "mdi:white-balance-sunny"
# Button actions
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
styles:
card:
# Feel free to change the size here
- width: min(20vw, 75px)
- height: min(20vw, 75px)
icon:
- color: var(--primary-text-color)
state:
- value: "on"
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
show_icon: true
show_name: false
card_mod:
class: soft-ui
type: "custom:button-card"
- content: |
# Morning Mode
## Apaga todas las luces de la casa.
style:
.: |
ha-card {
margin-top: 2px;
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px !important;
}
h2 {
font-size: 15px !important;
}
type: markdown
type: horizontal-stack
- cards:
# Entity to control
- entity: scene.sleep_mode
# Icon to display
icon: "mdi:weather-night"
# Button actions
tap_action:
action: toggle
haptic: light
hold_action:
action: more-info
haptic: medium
styles:
card:
# Feel free to change the size here
- width: min(20vw, 75px)
- height: min(20vw, 75px)
icon:
- color: var(--primary-text-color)
state:
- value: "on"
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
show_icon: true
show_name: false
card_mod:
class: soft-ui
type: "custom:button-card"
- content: |
# Night Mode
## Enciende luces de los accesos principales.
style:
.: |
ha-card {
margin-top: 2px;
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px !important;
}
h2 {
font-size: 15px !important;
}
type: markdown
type: vertical-stack
- cards:
# Entity to control
- entity: scene.sleep_mode
# Icon to display
icon: "mdi:sleep"
# Button actions
tap_action:
action: call-service
service: scene.turn_on
service_data:
entity_id: scene.sleep_mode
hold_action:
action: more-info
haptic: medium
styles:
card:
# Feel free to change the size here
- width: min(20vw, 75px)
- height: min(20vw, 75px)
icon:
- color: var(--primary-text-color)
state:
- value: "on"
styles:
card:
- border-style: solid
- border-width: 2px
- border-color: var(--paper-item-icon-active-color)
icon:
- color: var(--paper-item-icon-active-color)
show_icon: true
show_name: false
card_mod:
class: soft-ui
type: "custom:button-card"
- content: |
# Sleep Mode
## Apaga todo excepto entrada principal.
style:
.: |
ha-card {
margin-top: 2px;
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px !important;
}
h2 {
font-size: 15px !important;
}
type: markdown
type: horizontal-stack
You are using a horizontal stack, no vertical, see the last line of your code.
P.S.: If you want one big column, you have to put all your cards into a vertical stack as children of it.
Yes, @pedolsky is right. I messed up the Vertical Stack with the Horizontal Stack in my last comment 
However, the Horizontal Stack at the last line binds the button and description together, so you should not change that. You just need to put all your cards inside one big new Vertical Stack card.
I see, Thank you very much! I will try that.
I think I got it. Thanks you very much
1 Like
Hello, do you guys have a reference to a guide that explains how to group the lights so I can display how many of them are on?
Sure, you have to use the template found here to create a template sensor. Pretty much as so:
template:
- sensor:
- name: "Lights on"
unit_of_measurement: "lights"
state: >
{{ states
| selectattr('entity_id','in',
['light.add_all_your_lights_here','switch.example'])
|selectattr('state','eq','on')
| list
| count }}
So if I created multiple groups, my template should look like this?:
{{ states
| selectattr('entity_id','in',
['group.group_name','group.group_name2'])
|selectattr('state','eq','on')
| list
| count }}
[/quote]
Or should I change something else? So far the temlplate above is not working for me. It works if I use individual entities, but not for groups so far. Am I missing something?
Not quite. In the above, you are counting how many groups are “on” based on the groups you have given.
I am not the strongest with templating. It seems like my comment about how to use groups was not correct. You actually have to use the expand function on the group(s) and then count the lights. Like this:
{{ expand(['group.one', 'group.two'])
| selectattr('state','eq','on')
| list
| count }}
Thank you very much, I’m sorry for the delay, I haven’t had enough time for HA lately. If I wanted to know the name of the entities that are on, instead of just the total count, what should I add to the code?
Thanks in advance!
I don’t know how exactly that would work, but you can make the template display a list of entities by mapping it with the entity_id:
{{ expand(['group.first_floor_lights', 'group.two'])
| selectattr('state','eq','on')
| map(attribute='entity_id')
| list }}
Hi everyone has any of you created a media player to manage Volumio?
If you haven’t made it but you have a card with a media player, could you share the code?
Thanks
Hello everyone I need a lot of help I am at a good point with my lovelace interface but despite having read and reread the forum and the indications of NI1 I have not yet been able to understand how to do to open a pop-up window to adjust the brightness of a light. I can’t find things and where I have to put the information and then have them hooked to the card that represents the light. With Homekitpanel I was successful here I have difficulty can you tell me the steps to take and where to place the right files? thank you
I’m curious why I haven’t seen any posts about this before, but in my case the margins are not working correctly, I have thrown some buttons inside a vertical/horizontal stack and inside a grid card and in that case the margins at the red arrows overlap. Is it just me that sees this behavior? Any idea how to solve this?
How did you set up the styling?
Either the code from lovelace soft ui (below) or the Soft theme give me the same results.
test:
background-color: '#EBF3FA'
primary-background-color: var(--background-color) # background except for sidebar and cards
card-mod-theme: test
card-mod-card: |
ha-card {
margin: 20px;
border-radius: 15px;
background-color: var(--background-color);
box-shadow: -5px -5px 15px #ffffff, 5px 5px 15px #ebebeb;
}
You could see if you could find the variable in Lovelace that controls spacing for the grid/horizontal/vertical stack card, and modify it in a theme.
Hi everyone, I would like to try Soft UI.
I have a dark theme (noctis) and I’m following the installation step to universally style all cards by adding in my noctis.yaml the following line:
# Example dark_theme.yaml entry
theme_name:
card-mod-theme: noctis # Change to your theme name
card-mod-card: |
ha-card {
margin: 20px;
border-radius: 15px;
background-color: var(--primary-background-color);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
# This is needed for the "pressed" buttons
soft-ui-pressed: 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919'
I’m adding this chunck of code at the bootom of noctis.yaml so that the end result is:
noctis:
# Fonts
primary-font-family: 'Raleway,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)"
ha-card-header-font-family: "var(--primary-font-family)"
# Text
text-color: '#ffffff'
primary-text-color: 'var(--text-color)'
text-primary-color: 'var(--text-color)'
secondary-text-color: "#BAC0C6"
text-medium-light-color: '#A0A2A8'
text-medium-color: '#80828A'
disabled-text-color: '#626569'
primary-color: 'var(--accent-color)'
text-light-primary-color: 'var(--text-color)'
# Text Fields an Dropdown
mdc-text-field-fill-color: '#2e3b53'
mdc-text-field-ink-color: 'var(--text-color)'
mdc-select-fill-color: '#2e3b53'
mdc-text-field-label-ink-color: 'var(--secondary-text-color)'
input-fill-color: 'var(--background-color)'
input-ink-color: 'var(--text-color)'
input-label-ink-color: 'var(--text-color)'
input-disabled-fill-color: 'var(--background-color)'
input-disabled-ink-color: 'var(--disabled-text-color)'
input-disabled-label-ink-color: 'var(--disabled-text-color)'
input-idle-line-color: 'var(--background-color)'
input-dropdown-icon-color: 'var(--secondary-text-color)'
input-hover-line-color: 'var(--primary-color)'
code-editor-background-color: '#222c40'
codemirror-property: 'var(--accent-color)'
# Main Colors
app-header-background-color: '#242e42'
header-height: 48px
accent-color: '#1A89F5'
accent-medium-color: 'var(--accent-color)'
# Background
background-color: '#242e42'
primary-background-color: 'var(--background-color)'
background-color-2: '#20293c'
secondary-background-color: 'none'
markdown-code-background-color: 'var(--background-color)'
# Card
card-background-color: 'var(--ha-card-background)'
ha-card-background: 'rgba(43,55,78,1)' #'linear-gradient(145deg, #273246, #2e3b53)'
ha-card-box-shadow: "3px 3px 13px -6px rgba(17,35,52,1)"
ha-card-border-radius: "5px"
border-radius: "5px"
ha-card-border-color: 'rgba(0,0,0,0)'
ha-card-border-width: '0'
# Dialog
ha-dialog-border-radius: "5px"
# Icons
paper-item-icon-color: '#EBEBEB'
paper-item-icon-active-color: 'var(--accent-color)'
# RGB States
rgb-state-default-color: '26, 137, 245'
rgb-accent-color: 'var(--rgb-state-default-color)'
# rgb-state-light-color: 'var(--rgb-state-default-color)'
# rgb-state-switch-color: 'var(--rgb-state-default-color)'
# rgb-state-automation-color: 'var(--rgb-state-default-color)'
# rgb-state-binary-sensor-color: 'var(--rgb-state-default-color)'
# rgb-state-cover-color: 'var(--rgb-state-default-color)'
# rgb-state-fan-color: 'var(--rgb-state-default-color)'
# rgb-state-group-color: 'var(--rgb-state-default-color)'
# rgb-state-humidifier-color: 'var(--rgb-state-default-color)'
# rgb-state-input-boolean-color: 'var(--rgb-state-default-color)'
# rgb-state-media-player-color: 'var(--rgb-state-default-color)'
# rgb-state-remote-color: 'var(--rgb-state-default-color)'
# rgb-state-script-color: 'var(--rgb-state-default-color)'
# rgb-state-timer-color: 'var(--rgb-state-default-color)'
# rgb-state-vacuum-color: 'var(--rgb-state-default-color)'
# rgb-state-alarm-armed-color: var(--rgb-red-color)
# rgb-state-alarm-arming-color: var(--rgb-orange-color)
# rgb-state-alarm-disarmed-color: var(--rgb-grey-color)
# rgb-state-alarm-pending-color: var(--rgb-orange-color)
# rgb-state-alarm-triggered-color: var(--rgb-red-color)
# rgb-state-alert-color: var(--rgb-red-color)
# rgb-state-binary-sensor-alerting-color: var(--rgb-red-color)
# rgb-state-calendar-color: var(--rgb-blue-color)
# rgb-state-camera-color: var(--rgb-blue-color)
# rgb-state-climate-auto-color: var(--rgb-green-color)
# rgb-state-climate-cool-color: var(--rgb-blue-color)
# rgb-state-climate-dry-color: var(--rgb-orange-color)
# rgb-state-climate-fan-only-color: var(--rgb-cyan-color)
# rgb-state-climate-heat-color: var(--rgb-deep-orange-color)
# rgb-state-climate-heat-cool-color: var(--rgb-amber-color)
# rgb-state-climate-idle-color: var(--rgb-disabled-color)
# rgb-state-lock-jammed-color: var(--rgb-red-color)
# rgb-state-lock-locked-color: var(--rgb-red-color)
# rgb-state-lock-pending-color: var(--rgb-orange-color)
# rgb-state-lock-unlocked-color: var(--rgb-red-color)
# rgb-state-person-home-color: var(--rgb-green-color)
# rgb-state-person-zone-color: var(--rgb-blue-color)
# rgb-state-person-not-home-color: var(--rgb-grey-color)
# rgb-state-sensor-battery-high-color: var(--rgb-green-color)
# rgb-state-sensor-battery-low-color: var(--rgb-red-color)
# rgb-state-sensor-battery-medium-color: var(--rgb-orange-color)
# rgb-state-sensor-battery-unknown-color: var(--rgb-disabled-color)
# rgb-state-siren-color: var(--rgb-red-color)
# rgb-state-sun-day-color: var(--rgb-amber-color)
# rgb-state-sun-night-color: var(--rgb-deep-purple-color)
# rgb-state-update-color: var(--rgb-green-color)
# rgb-state-update-installing-color: var(--rgb-orange-color)
# rgb-state-light-color: 'var(--rgb-state-default-color)'
# rgb-state-switch-color: 'var(--rgb-state-default-color)'
# rgb-state-automation-color: 'var(--rgb-state-default-color)'
# rgb-state-binary-sensor-color: 'var(--rgb-state-default-color)'
# rgb-state-cover-color: 'var(--rgb-state-default-color)'
# rgb-state-fan-color: 'var(--rgb-state-default-color)'
# rgb-state-group-color: 'var(--rgb-state-default-color)'
# rgb-state-humidifier-color: 'var(--rgb-state-default-color)'
# rgb-state-input-boolean-color: 'var(--rgb-state-default-color)'
# rgb-state-media-player-color: 'var(--rgb-state-default-color)'
# rgb-state-remote-color: 'var(--rgb-state-default-color)'
# rgb-state-script-color: 'var(--rgb-state-default-color)'
# rgb-state-timer-color: 'var(--rgb-state-default-color)'
# rgb-state-vacuum-color: 'var(--rgb-state-default-color)'
# error-color: #db4437
# warning-color: #ffa600
# success-color: #43a047
# info-color: #039be5
# State Colors
state-active-color: '#1A89F5'
state-red-color: '#FC937E'
state-green-color: '#00CA8B'
state-orange-color: '#F7D88B'
state-alarm_control_panel-armed_away-color: 'var(--state-green-color)'
state-alarm_control_panel-armed_custom_bypass-color: 'var(--state-green-color)'
state-alarm_control_panel-armed_home-color: 'var(--state-green-color)'
state-alarm_control_panel-armed_night-color: 'var(--state-green-color)'
state-alarm_control_panel-armed_vacation-color: 'var(--state-green-color)'
state-alarm_control_panel-arming-color: 'var(--state-orange-color)'
state-alarm_control_panel-disarming-color: 'var(--state-orange-color)'
state-alarm_control_panel-pending-color: 'var(--state-orange-color)'
state-alarm_control_panel-triggered-color: 'var(--state-red-color)'
state-alert-off-color: var(--paper-item-icon-color)
state-alert-on-color: 'var(--state-red-color)'
state-automation-active-color: 'var(--accent-color)'
state-binary_sensor-active-color: 'var(--accent-color)'
state-binary_sensor-battery-on-color: 'var(--state-red-color)'
state-binary_sensor-carbon_monoxide-on-color: 'var(--state-red-color)'
state-binary_sensor-gas-on-color: 'var(--state-red-color)'
state-binary_sensor-heat-on-color: 'var(--state-red-color)'
state-binary_sensor-lock-on-color: 'var(--state-red-color)'
state-binary_sensor-moisture-on-color: 'var(--state-red-color)'
state-binary_sensor-problem-on-color: var(--state-red-color)
state-binary_sensor-safety-on-color: 'var(--state-red-color)'
state-binary_sensor-smoke-on-color: 'var(--state-red-color)'
state-binary_sensor-sound-on-color: 'var(--state-red-color)'
state-binary_sensor-tamper-on-color: 'var(--state-red-color)'
state-climate-auto-color: 'var(--accent-color)'
state-climate-cool-color: 'var(--accent-color)'
state-climate-dry-color: 'var(--accent-color)'
state-climate-fan_only-color: 'var(--accent-color)'
state-climate-heat-color: 'var(--state-orange-color)'
state-climate-heat-cool-color: 'var(--accent-color)'
state-cover-active-color: 'var(--accent-color)'
state-device_tracker-active-color: 'var(--accent-color)'
state-device_tracker-home-color: 'var(--accent-color)'
state-fan-active-color: 'var(--accent-color)'
state-group-active-color: 'var(--accent-color)'
state-humidifier-active-color: 'var(--accent-color)'
state-input_boolean-active-color: 'var(--accent-color)'
state-light-active-color: 'var(--accent-color)'
state-lock-jammed-color: 'var(--state-red-color)'
state-lock-locked-color: 'var(--accent-color)'
state-lock-pending-color: 'var(--state-orange-color)'
state-lock-unlocked-color: var(--paper-item-icon-color)
state-media_player-active-color: 'var(--accent-color)'
state-person-active-color: 'var(--accent-color)'
state-person-home-color: 'var(--accent-color)'
state-plant-active-color: 'var(--state-red-color)'
state-siren-active-color: 'var(--state-red-color)'
state-sun-above_horizon-color: 'var(--amber-color)'
state-sun-below_horizon-color: 'var(--indigo-color)'
state-switch-active-color: 'var(--accent-color)'
state-update-active-color: 'var(--accent-color)'
state-vacuum-active-color: 'var(--accent-color)'
state-sensor-battery-high-color: 'var(--accent-color)'
state-sensor-battery-low-color: 'var(--state-red-color)'
state-sensor-battery-medium-color: 'var(--state-orange-color)'
# Sidebar
sidebar-background-color: 'var(--background-color)'
sidebar-icon-color: '#98a7b9'
sidebar-selected-icon-color: 'var(--accent-color)'
sidebar-selected-text-color: 'var(--text-color)'
paper-listbox-background-color: 'var(--sidebar-background-color)'
divider-color: 'var(--background-color)'
light-primary-color: 'var(--ha-card-background)'
# Sliders
paper-slider-knob-color: 'var(--accent-color)'
paper-slider-pin-color: 'var(--background-color-2)'
paper-slider-active-color: 'var(--accent-color)'
paper-slider-container-color: 'var(--background-color-2)'
# Toggle:
paper-toggle-button-checked-bar-color: 'var(--accent-color)'
mdc-theme-primary: 'var(--accent-color)'
# Switch
switch-unchecked-color: '#70889e'
switch-checked-button-color: 'var(--accent-color)'
switch-unchecked-track-color: 'var(--background-color-2)'
switch-checked-track-color: 'var(--background-color-2)'
# Radio Button
paper-radio-button-checked-color: 'var(--accent-color)'
# Popups
more-info-header-background: 'var(--secondary-background-color)'
paper-dialog-background-color: 'var(--background-color)' #'rgba(47,59,82,0.4)'
popup-border-radius: "5px"
# Tables
table-row-background-color: 'var(--background-color)'
table-row-alternative-background-color: 'var(--ha-card-background)'
# Badges
label-badge-background-color: 'var(--background-color)'
label-badge-text-color: 'var(--text-primary-color)'
label-badge-red: 'rgba(73,85,108,1)'
label-badge-blue: 'rgba(26,137,245,1)'
label-badge-green: 'rgba(0,202,139,1)'
label-badge-yellow: 'rgba(222,176,107,1)'
paper-input-container-focus-color: 'var(--accent-color)'
# Custom Header
ch-background: 'var(--background-color)'
ch-active-tab-color: 'var(--accent-color)'
ch-notification-dot-color: 'var(--accent-color)'
ch-all-tabs-color: 'var(--sidebar-icon-color)'
ch-tab-indicator-color: 'var(--accent-color)'
# Mini Mediaplayer
mini-media-player-base-color: 'var(--text-color)'
mini-media-player-accent-color: 'var(--accent-color)'
mini-media-player-button-color: 'var(--ha-card-background)'
# Alarm
alarm-color-armed: 'rgba(247,53,67,1)'
# Card-Mod #####################################################################
# Uncomment the Code below if you have card-mod installed and want blur effect #
################################################################################
# card-mod-theme: noctis
# card-mod-more-info-yaml: |
# $: |
# .mdc-dialog .mdc-dialog__scrim {
# backdrop-filter: blur(15px);
# -webkit-backdrop-filter: blur(15px);
# background: rgba(0,0,0,.6);
# }
# .mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
# box-shadow: none !important;
# border-radius: var(--ha-card-border-radius);
# }
# .: |
# :host {
# --ha-card-box-shadow: none;
# }
# Example dark_theme.yaml entry
theme_name:
card-mod-theme: noctis # Change to your theme name
card-mod-card: |
ha-card {
margin: 20px;
border-radius: 15px;
background-color: var(--primary-background-color);
box-shadow: -5px -5px 15px #2c2c2c, 5px 5px 15px #191919;
}
# This is needed for the "pressed" buttons
soft-ui-pressed: 'inset -4px -4px 5px #2c2c2c, inset 4px 4px 5px #191919'
I tried to place it at the top but the result is the same.
In my configuration.yaml I have this:
frontend:
themes: !include_dir_merge_named themes
I then proceed to restart HA but it restarts in safe mode until I edit out the chunk of code provided in the instructions.
I am on:
Home Assistant 2023.8.4
Supervisor 2023.08.3
Operating System 10.5
Frontend 20230802.1 - latest
What am I doing wrong?
Thank you
