Si eres de los que disfrutan «customizando» al máximo su panel de control, hoy te enseño a personalizar la barra lateral de HA.
Esto, sin duda, es un nivel superior a la hora de personalizar tu interfaz de Home Assistant. Si bien estamos acostumbrados a ver paneles con temas o tarjetas diferentes, pocos usuarios tienen un menú personalizado como este!
Dándole estilo a tu barra lateral
Para personalizar la barra lateral de HA sigue estos pasos:
- Si aun no la tienes, desde HACS, instala la tarjeta Card Mod. Con ella podremos hacer prácticamente lo que queramos con nuestro menú lateral.
- Incluye las siguientes líneas en tu fichero ‘configuration.yaml’. Si alguna vez has instalado un tema personalizado desde HACS, seguramente ya estén ahí.
frontend: themes: !include_dir_merge_named themes
- Crea una carpeta llamada «themes», dentro de la carpeta «config» de Home Assistant (igualmente, es posible que ya la tengas).
- Dentro de esta, crea una nueva carpeta con el nombre de tu tema personalizado (por ejemplo, «aguacatec»). Dentro de esta, a su vez, crea un nuevo fichero con el nombre del tema (por ejemplo, «aguacatec.yaml»).
- En el fichero que acabas de crear, pega el siguiente código. Si te fijas, en las dos primeras líneas he indicado ‘aguacatec’ porque es el nombre del tema (tú debes indicar el nombre de tu tema). El fragmento de código que aparece a continuación se encarga de (i) ocultar el encabezado por defecto que indica «Home Assistant» y (ii) mostrar un texto personalizado (en este caso, «Aguacatec»).
aguacatec:
card-mod-theme: aguacatec
card-mod-sidebar-yaml: |
.: |
.menu .title {
display: none !important;
}
.menu:after {
content: "Aguacatec";
margin-left: 16px;
}
- Ahora ve a Herramientas para desarrolladores > Acciones, busca «Home Assistant Frontend: Recargar temas» y pulsa en «Realizar una acción».
- Por último, pulsa sobre tu nombre de usuario en la parte inferior de la barra lateral y selecciona el tema creado en el desplegable «Tema» del apartado «Configuración del navegador». Verás que automáticamente cambia, entre otras cosas, el menú lateral.
Opciones de personalización
Obviamente, puedes hacer mucho más a la hora de personalizar la barra lateral de HA. Si has ido razonando los pasos anteriores, básicamente lo que hemos hecho es crear un tema personalizado, en el que hemos alterado (en el ejemplo) el encabezado de la barra lateral.
A partir de aquí puedes hacer cualquier cosa que se te ocurra, utilizando un poco de CSS, preguntando en la comunidad de Aguacatec o consultando este hilo de la comunidad de Home Assistant que contiene varios ejemplos, como:
- Modificar el estilo del encabezado y el icono principal
aguacatec:
card-mod-theme: aguacatec
card-mod-sidebar-yaml: |
.: |
.menu ha-icon-button {
color: green !important;
--mdc-icon-size: 12px;
}
.menu .title {
display: none !important;
}
.menu:after {
content: "Aguacatec";
margin-left: 16px;
color: green;
}
- Incluir información de tus entidades en el encabezado
aguacatec:
card-mod-theme: aguacatec
card-mod-sidebar-yaml: |
.: |
.menu ha-icon-button {
color: green !important;
--mdc-icon-size: 12px;
}
.menu .title {
display: none !important;
}
.menu:after {
content: "Telegram: {{states('input_number.miembros_telegram')|float(default=0)|round(0)}}";
margin-left: 16px;
}
- Cambiar los colores de la barra lateral
aguacatec:
card-mod-theme: aguacatec
card-mod-sidebar-yaml: |
.: |
.menu ha-icon-button {
color: green !important;
--mdc-icon-size: 12px;
}
.menu .title {
display: none !important;
}
.menu:after {
content: "Aguacatec";
margin-left: 16px;
color: green;
}
:host {
background: rgba(196, 235, 14, 0.3) !important;
}
.iron-selected paper-icon-item {
background: black;
}
.iron-selected paper-icon-item ha-icon {
color: black !important;
}
Por cierto, ten en cuenta que no es necesario que crees un tema completo desde cero! Puedes usar el código de cualquier otro tema que te guste y hacer únicamente los cambios deseados.
