Hello to all!.
After searching here endless posts, I´ve tried to create a dashboard on my own for my wife without much experience on CSS (just really basic understanding) but I´m spending hours trying to formatting it for the correct screen size (Samsung galaxy S22+).
The thing is that every item I add it´s correct in concept but not in placement.
Here is the code:
kiosk_mode:
hide_header: false
views:
- title: Home
sections: []
type: custom:vertical-layout
icon: mdi:home
swipe_nav:
enable: false
cards:
- type: horizontal-stack
cards:
- type: custom:mushroom-chips-card
chips:
- type: menu
card_mod:
style: |
ha-card {
border: none;
}
- type: custom:button-card
name: |
[[[
return states['weather.forecast_casa'].attributes.temperature + '<span style="font-size:0.6em">°C </span>'
]]]
custom_fields:
icon: |
[[[
var weather = states['weather.forecast_casa'].state;
return '<img src = "/local/weather_icons/' + weather + '.svg" width="70" height="70">'
]]]
styles:
grid:
- grid-template-areas: '"n icon"'
card:
- background: none
- overflow: visible
- padding-right: 8px
- padding-left: 8px
- width: auto
- border: none
name:
- justify-self: end
- font-size: 35px
- font-weight: 500
custom_fields:
icon:
- justify-self: end
- align-self: end
- padding-right: 3px
- border: none
card_mod:
style: |
:host {
border: none;
box-shadow: none;
}
- type: custom:mushroom-chips-card
chips:
- type: entity
entity: person.flor
name: Flor
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-height: 40px;
--chip-font-size: 20px;
}
- type: entity
entity: person.federico
name: Fefo
icon_color: green
use_entity_picture: true
card_mod:
style: |
ha-card {
--chip-height: 40px;
--chip-font-size: 20px;
}
- type: custom:mushroom-title-card
title: All rooms
alignment: start
title_tap_action:
action: none
subtitle_tap_action:
action: none
card_mod:
style: |
ha-card {
margin-top: -20px; /* Ajusta el valor según la cantidad de espacio a reducir */
padding: 0px; /* Elimina espacio adicional dentro de la tarjeta */
}
- type: custom:css-swipe-card
cardId: swiper
template: slider-horizontal
auto_height: true
pagination: true
navigation: true
card_gap: 2rem
timer: 3
navigation_next: mdi:chevron-right
navigation_prev: mdi:chevron-left
height: 10rem
cards:
- type: picture
alt_text: Cocina
theme: Flor
tap_action:
action: navigate
navigation_path: /Cel-Flor/cocina
image: /api/image/serve/4f7a3794ace1fe371a29a8a9e17e5f08/512x512
card_mod:
style: |
ha-card {
position: relative; /* Permite posicionar elementos dentro de la tarjeta */
height: 300px !important; /* Ajusta la altura */
width: 120px !important; /* Ajusta el ancho */
overflow: hidden; /* Oculta contenido fuera de los límites */
}
img {
object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
}
.text-overlay {
position: absolute; /* Posiciona el texto sobre la imagen */
top: 50%; /* Centra verticalmente */
left: 50%; /* Centra horizontalmente */
transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
color: white; /* Color del texto */
font-size: 18px; /* Tamaño de la fuente */
font-weight: bold; /* Texto en negrita */
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
ha-card::before {
content: 'Cocina'; /* Agrega el texto sobre la tarjeta */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
- type: picture
alt_text: Living
theme: Flor
tap_action:
action: navigate
navigation_path: /Cel-Flor/living
image: /api/image/serve/799b3c781d9cfb7f095394f501402a44/512x512
card_mod:
style: |
ha-card {
position: relative; /* Permite posicionar elementos dentro de la tarjeta */
height: 300px !important; /* Ajusta la altura */
width: 120px !important; /* Ajusta el ancho */
overflow: hidden; /* Oculta contenido fuera de los límites */
}
img {
object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
}
.text-overlay {
position: absolute; /* Posiciona el texto sobre la imagen */
top: 50%; /* Centra verticalmente */
left: 50%; /* Centra horizontalmente */
transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
color: white; /* Color del texto */
font-size: 18px; /* Tamaño de la fuente */
font-weight: bold; /* Texto en negrita */
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
ha-card::before {
content: 'Living'; /* Agrega el texto sobre la tarjeta */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
- type: picture
alt_text: Escalera
theme: Flor
tap_action:
action: navigate
navigation_path: /Cel-Flor/comedor
image: /api/image/serve/5600cc454cd86c3d30694a94935f0f2f/512x512
card_mod:
style: |
ha-card {
position: relative; /* Permite posicionar elementos dentro de la tarjeta */
height: 300px !important; /* Ajusta la altura */
width: 120px !important; /* Ajusta el ancho */
overflow: hidden; /* Oculta contenido fuera de los límites */
}
img {
object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
}
.text-overlay {
position: absolute; /* Posiciona el texto sobre la imagen */
top: 50%; /* Centra verticalmente */
left: 50%; /* Centra horizontalmente */
transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
color: white; /* Color del texto */
font-size: 18px; /* Tamaño de la fuente */
font-weight: bold; /* Texto en negrita */
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
ha-card::before {
content: 'Escalera'; /* Agrega el texto sobre la tarjeta */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
- type: picture
alt_text: Cuarto
theme: Flor
tap_action:
action: navigate
navigation_path: /Cel-Flor/cuarto
image: /api/image/serve/05cbe824f2253cf70b0908b385d1b305/512x512
card_mod:
style: |
ha-card {
position: relative; /* Permite posicionar elementos dentro de la tarjeta */
height: 300px !important; /* Ajusta la altura */
width: 120px !important; /* Ajusta el ancho */
overflow: hidden; /* Oculta contenido fuera de los límites */
}
img {
object-fit: cover; /* Hace que la imagen ocupe toda la tarjeta */
height: 100%; /* Ajusta la altura de la imagen al 100% de la tarjeta */
width: 100%; /* Ajusta el ancho de la imagen al 100% de la tarjeta */
}
.text-overlay {
position: absolute; /* Posiciona el texto sobre la imagen */
top: 50%; /* Centra verticalmente */
left: 50%; /* Centra horizontalmente */
transform: translate(-50%, -50%); /* Ajusta el texto al centro exacto */
color: white; /* Color del texto */
font-size: 18px; /* Tamaño de la fuente */
font-weight: bold; /* Texto en negrita */
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7); /* Sombra para mejor visibilidad */
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
ha-card::before {
content: 'Cuarto'; /* Agrega el texto sobre la tarjeta */
position: absolute;
top: 50%;
left: 50%;
transform: translate(-50%, -50%);
color: white;
font-size: 18px;
font-weight: bold;
text-shadow: 1px 1px 4px rgba(0, 0, 0, 0.7);
pointer-events: none; /* Hace que el texto no interfiera con el botón de tap */
}
custom_css:
'--navigation-button-next-color': pink
'--navigation-button-next-background-color': transparent
'--navigation-button-next-width': 50px
'--navigation-button-next-height': 50px
'--navigation-button-prev-color': pink
'--navigation-button-prev-background-color': transparent
'--navigation-button-prev-width': 50px
'--navigation-button-prev-height': 50px
'--pagination-bullet-active-background-color': pink
'--pagination-bullet-distance': 5px
- type: sections
max_columns: 1
title: Cocina
path: cocina
icon: mdi:gas-burner
theme: Flor
subview: false
dense_section_placement: false
background:
opacity: 22
alignment: center
size: cover
repeat: no-repeat
attachment: scroll
sections:
- type: grid
cards:
- type: heading
heading: Nueva sección
- type: sections
max_columns: 1
title: Living
path: living
icon: mdi:television
theme: Flor
sections:
- type: grid
cards:
- type: heading
heading: Nueva sección
cards: []
- type: sections
max_columns: 1
title: Escalera
path: comedor
icon: mdi:stairs
theme: Flor
sections:
- type: grid
cards:
- type: heading
heading: Nueva sección
cards: []
- type: sections
max_columns: 1
title: Cuarto
path: cuarto
icon: mdi:bed-double-outline
theme: Flor
sections:
- type: grid
cards:
- type: heading
heading: Nueva sección
This would be associated with this custom theme:
Flor:
# Colors
text: "#BB9C87"
subtext1: "#5c5f77"
subtext0: "#6c6f85"
overlay2: "#7c7f93"
overlay1: "#8c8fa1"
overlay0: "#9ca0b0"
surface2: "#acb0be"
surface1: "#bcc0cc"
surface0: "#ccd0da"
base: "#c1b38a"
mantle: "#e6e9ef"
crust: "#dce0e8"
rosewater: "#dc8a78"
flamingo: "#dd7878"
pink: "#ea76cb"
mauve: "#8839ef"
red: "#d20f39"
maroon: "#e64553"
peach: "#fe640b"
yellow: "#df8e1d"
green: "#40a02b"
teal: "#179299"
sky: "#04a5e5"
sapphire: "#209fb5"
blue: "#1e66f5"
lavender: "#7287fd"
primary-font-family: "Kalam"
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)"
###########################
# Header
app-header-background-color: var(--mantle)
app-header-text-color: var(--text)
# Main Interface colors
primary-color: var(--blue)
light-primary-color: var(--primary-color)
primary-background-color: var(--mantle)
secondary-background-color: var(--mantle)
accent-color: var(--yellow)
# Text
primary-text-color: var(--text)
secondary-text-color: var(--subtext1)
text-primary-color: var(--text)
divider-color: var(--base)
disabled-text-color: var(--overlay0)
text-accent-color: var(--text)
# Sidebar
sidebar-background-color: var(--crust)
sidebar-selected-background-color: var(--primary-background-color)
sidebar-icon-color: var(--subtext0)
sidebar-text-color: var(--subtext0)
sidebar-selected-icon-color: var(--mauve)
sidebar-selected-text-color: var(--mauve)
# Buttons
paper-item-icon-color: var(--subtext0)
paper-item-icon-active-color: var(--primary-color)
# States and Badges
state-icon-color: var(--lavender)
state-icon-active-color: var(--primary-color)
state-icon-unavailable-color: var(--disabled-text-color)
# Sliders
paper-slider-knob-color: var(--blue)
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(--blue)
# Labels
label-badge-background-color: var(--surface0)
label-badge-text-color: var(--text)
label-badge-red: var(--red)
label-badge-green: var(--green)
label-badge-blue: var(--blue)
label-badge-yellow: var(--yellow)
label-badge-gray: var(--overlay0)
# Cards
card-background-color: var(--base)
ha-card-background: transparent
ha-card-border-radius: "15px"
ha-card-box-shadow: none
paper-dialog-background-color: var(--overlay0)
paper-listbox-background-color: var(--overlay0)
paper-card-background-color: var(--card-background-color)
# Switches
switch-checked-button-color: var(--green)
switch-checked-track-color: var(--surface0)
switch-unchecked-button-color: rgb(--overlay0)
switch-unchecked-track-color: rgb(--surface0)
# 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)
mdc-checkbox-unchecked-color: var(--overlay0)
# Dropdowns
material-background-color: var(--primary-background-color)
material-secondary-background-color: var(--primary-background-color)
mdc-theme-surface: var(--primary-background-color)
# Pre/Code
markdown-code-background-color: var(--surface0)
# Checkboxes
mdc-select-fill-color: var(--surface0)
mdc-select-ink-color: var(--primary-text-color)
mdc-select-label-ink-color: var(--subtext1)
mdc-select-idle-line-color: var(--primary-text-color)
mdc-select-dropdown-icon-color: var(--secondary-text-color)
mdc-select-hover-line-color: var(--accent-color)
# Input
input-fill-color: var(--secondary-background-color)
input-dropdown-icon-color: var(--secondary-text-color)
input-ink-color: var(--primary-text-color)
input-label-ink-color: var(--secondary-text-color)
input-idle-line-color: var(--primary-text-color)
input-hover-line-color: var(--accent-color)
input-disabled-ink-color: var(--disabled-text-color)
input-disabled-line-color: var(--disabled-text-color)
input-outlined-idle-border-color: var(--disabled-text-color)
input-outlined-hover-border-color: var(--disabled-text-color)
input-outlined-disabled-border-color: var(--disabled-text-color)
input-disabled-fill-color: rgba(0, 0, 0, 0)
# Toast
paper-toast-background-color: var(--overlay0)
# Colors
error-color: var(--red)
warning-color: var(--yellow)
success-color: var(--green)
info-color: var(--blue)
state-on-color: var(--green)
state-off-color: var(--red)
1- I can´t get the person´s entity cards to be equaly spaced on that horizontal grid.
2- I have created swipe cards to navigate to other tabs (to put all entities from that rooms), but I cannot get them together (I have only put 4, but there are 9 meant to be there). And now they even do not show the complete button on the card.
This is the inspiration:
And this is the lame result lol:
Honestly I have spent hours wiht the inspection tab on Chrome (and validating it on the cellphone), but it seems there is some knowledge that I obviously do not have.
Could someone provide some help regarding this?
Thank you!