Have you added browser_mod: line in your config and rebooted HA?
Btw: Long-press?
No actually I just added browser_mod: in my configuration, after restarting I don’t see any apparent change, can you explain me how to make the popups work please, thank you
Hey! I was able to fix the problem but now I have to fix all the missing sensors and add popups to the missing card
Julien
Out of curiosity, what was the actual culprit?
If you only copied @Mattias_Persson’s config, edit and replace sensors in ui-lovelace.yaml file(in config folder) for yours and play with it as much as you wish.
OK… Let’s try this…
This is what my code looks like:
- type: grid
title: Lights
view_layout:
grid-area: lights
columns: 2
square: false
cards:
- type: custom:button-card
entity: group.living_room_overhead_lights
icon: 'bha:ceiling-downlight'
name: Overhead
aspect_ratio: 1.3/1
tap_action:
action: toggle
hold_action:
!include popup/overhead-lights.yaml
template:
- base
- loader
- icon_overhead
- type: custom:button-card
entity: light.living_room_ceiling_fan_lights
name: Fan Lights
aspect_ratio: 1.3/1
template:
- base
- white_light
- icon_ceiling_fan_light
- type: custom:button-card
entity: light.bar_light_switch
name: Bar Lights
aspect_ratio: 1.3/1
template:
- light
- icon_bar_lights
and I get this:
When I change the code to this:
- type: grid
title: Lights
view_layout:
grid-area: lights
columns: 2
square: false
cards:
- type: custom:button-card
entity: group.living_room_overhead_lights
icon: 'bha:ceiling-downlight'
name: Overhead
aspect_ratio: unset
styles:
card:
- height: auto
tap_action:
action: toggle
hold_action:
!include popup/overhead-lights.yaml
template:
- base
- loader
- icon_overhead
- type: custom:button-card
entity: light.living_room_ceiling_fan_lights
name: Fan Lights
aspect_ratio: unset
styles:
card:
- height: auto
template:
- base
- white_light
- icon_ceiling_fan_light
- type: custom:button-card
entity: light.bar_light_switch
name: Bar Lights
aspect_ratio: unset
styles:
card:
- height: auto
template:
- light
- icon_bar_lights
I get this:
Hey, Forgive me, it was an oversight on my part in the setup 
Does it work for you what Mattias wrote?
Hi,
I’m looking to pull entries from my iCloud calendar into the side bar.
Is this possible?
Thanks again
please allow me this question on dynamic view/tab icons. I didn’t spot it in the config so it should fit the ‘different take’ angle 
Matthias, since you’re the UI wizzard here, would you know of a way to change tab icons based on a template/condtion in HA states?
when Custom Header was still alive we could simply set the tab_icon on a view, but without that Custom addition, Ive tried about anything, and had no luck just yet.
Lovelace_gen doesnt manipulate states, card-mod-theme should be able but I can manage yet, and config-template-card is, well, a config templater for cards, not views…
would appreciate if you could have a look, and, as an example in pseudo code for a view:
title: Presence
path: presence
icon: {{states('sensor.presence_icon')}} #mdi:account-multiple
hope you can spare a minute, thanks!
I don’t use views/tabs myself but you can try this css hack
card-mod-root-yaml: |
paper-tab:nth-child(2)>ha-icon$: |
ha-svg-icon {
{% if is_state('automation.macos_notification_motion_hall', 'on') %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='green' d='M16,7V3H14V7H10V3H8V7H8C7,7 6,8 6,9V14.5L9.5,18V21H14.5V18L18,14.5V9C18,8 17,7 16,7Z'/%3E%3C/svg%3E");
{% else %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M20.84 22.73L15.31 17.2L14.5 18V21H9.5V18L6 14.5V9C6 8.7 6.1 8.41 6.25 8.14L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M18 14.5V9C18 8 17 7 16 7V3H14V7H10.2L17.85 14.65L18 14.5M10 3H8V4.8L10 6.8V3Z'/%3E%3C/svg%3E");
{% endif %}
}
paper-tab:nth-child(4)>ha-icon$: |
ha-svg-icon {
{% if is_state('automation.turn_off_monitors', 'on') %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='green' d='M16,7V3H14V7H10V3H8V7H8C7,7 6,8 6,9V14.5L9.5,18V21H14.5V18L18,14.5V9C18,8 17,7 16,7Z'/%3E%3C/svg%3E");
{% else %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M20.84 22.73L15.31 17.2L14.5 18V21H9.5V18L6 14.5V9C6 8.7 6.1 8.41 6.25 8.14L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M18 14.5V9C18 8 17 7 16 7V3H14V7H10.2L17.85 14.65L18 14.5M10 3H8V4.8L10 6.8V3Z'/%3E%3C/svg%3E");
{% endif %}
}
Select icon and “Copy SVG Markup”, paste into URL-encoder and copy “Ready for CSS” (omit background-image)
2 Likes
Yes, here’s a basic example
#configuration.yaml
calendar:
- platform: caldav
username: appleid
password: appleid.apple.com - app-specific password
url: https://caldav.icloud.com
#sidebar in include/template.yaml
cal: >
{% set cal = 'calendar.kalender' %}
{% if state_attr(cal, 'message') != None and state_attr(cal, 'start_time') != None %}
{{ state_attr(cal, 'message') }} {{ state_attr(cal, 'start_time') }}
{% endif %}
You can add this to button_card_templates.yaml#L231
p {
margin-block-start: 0.5em;
margin-block-end: 0.5em;
}
wow, thats magic, thanks!
any idea how I could do that for different dashboards? I mean if we need to count the icons thats going to be an issue…
would you figure this would work too, as I do for the icon colors?
paper-tab[aria-label='Presence'] {
color: {{state_attr('sensor.family_home','icon_color')}};
ha-svg-icon: {
{% if is_state('automation.macos_notification_motion_hall', 'on') %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='green' d='M16,7V3H14V7H10V3H8V7H8C7,7 6,8 6,9V14.5L9.5,18V21H14.5V18L18,14.5V9C18,8 17,7 16,7Z'/%3E%3C/svg%3E");
{% else %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M20.84 22.73L15.31 17.2L14.5 18V21H9.5V18L6 14.5V9C6 8.7 6.1 8.41 6.25 8.14L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M18 14.5V9C18 8 17 7 16 7V3H14V7H10.2L17.85 14.65L18 14.5M10 3H8V4.8L10 6.8V3Z'/%3E%3C/svg%3E");
{% endif %}
}
}
hmm, that didn’t work, nor does this:
paper-tab[aria-label='Presence']>ha-icon$: |
ha-svg-icon: {
{% if is_state('input_boolean.test', 'on') %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='green' d='M16,7V3H14V7H10V3H8V7H8C7,7 6,8 6,9V14.5L9.5,18V21H14.5V18L18,14.5V9C18,8 17,7 16,7Z'/%3E%3C/svg%3E");
{% else %}
content: url("data:image/svg+xml,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg'%3E%3Cpath fill='gray' d='M20.84 22.73L15.31 17.2L14.5 18V21H9.5V18L6 14.5V9C6 8.7 6.1 8.41 6.25 8.14L1.11 3L2.39 1.73L22.11 21.46L20.84 22.73M18 14.5V9C18 8 17 7 16 7V3H14V7H10.2L17.85 14.65L18 14.5M10 3H8V4.8L10 6.8V3Z'/%3E%3C/svg%3E");
{% endif %}
}
posted followup in 🔹 Card-mod - Super-charge your themes! - #1041 by Mariusthvdb to no longer be off topic here thanks!
Hello all, so I’m pretty new to this whole yaml thing. I think for a newb I’m figuring things out pretty decently, however I’m totally lost when it comes to the custom icons. I don’t know where they are located, the names of them, or even how to swap them out for my own.
Can anyone shed some light for me?
Thanks is advance.
To tell you the truth, I’m having a hard time because it’s an icon that Mattias_Persson created himself on photoshop, but since I have a good command of CSS, I might be able to help you with the animations.
By the way, if it can help you the icons on the panel are in the file “button_card_templates.yaml”, these icons can be modified by tweaking the svgs, you’ll have to use various sites to adapt your own svg because Mattias_Persson used precise size.
- Julien
Hi,
I’m looking to make a section of the button cards (such as the four under “hammer” title) into a swipe card so that i can have another four button cards behind them. Has anyone managed it. I know under the media title there is a swipe card but that’s just on one card.
Any help would be really appreciated.
Thanks again for all the help.
Hey Julien, thanks for the reply bro, I’m not too worried about the animations, I jsut want to change the icons. Is it not possible to just use the mdi icons?
Hi,
Can someone please explain me what i’m doing wrong here. I’m trying to add our solar information to the sidebar, just like the weather information.
template.yaml looks like this:
weather: |
{%- set temperature = states('sensor.rasp_temperature') %}
{%- set apparent = states('sensor.rasp_feels_like_temperature') | round %}
{%- set precip = states('sensor.rasp_forecast_precipitation_probability') | round %}
{% if not is_state('sensor.rasp_temperature', 'unknown') %}
{%- if temperature | float(default=0) <= 0.0 -%}
Buiten voelt als {{ apparent }}° met {{ precip }}% kans op sneeuw {{'\u2744\uFE0F'}}
{%- elif temperature | float(default=0) > 0.0 -%}
Buiten voelt als {{ apparent}}° met {{ precip }}% kans op regen {{ '\u2614\uFE0F' if precip > 4 }}
{%- endif %}
{%- else %}
Kan weersinformatie niet laden....
{%- endif %}
solar: |
{%- set current = states('sensor.envoy_122121036776_current_power_production') %}
{%- set estimated = states('sensor.energy_next_hour') %}
{% if not is_state('sensor.envoy_122121036776_current_power_production', 'unknown') %}
{%- if current | float(default=0) <= 0 -%}
Er is geen zon
{%- elif current | float(default=0) > 0 -%}
Er is {{ current }} komend uur {{ estimated }}
{%- endif %}
{%- else %}
Kan geen productie laden...
{%- edif %}
But when i add the solar part i get this in my sidebar:
What am i doing wrong here? 
The last line may cause som issues… 
{%- edif %}
Try to paste the template in the Developer Tools Template editor before adding or changing templates.