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.
Could you provide yaml tv card? I would like to get the same effect as you did with Netflix
Oh wow, thank you André! 
Huge thank you to @Mattias_Persson for sharing this. It’s been a lot of fun learning how all of this works and tweaking it.
Just thought I’d share my progress in case it sparks some interest and ideas for people.
Quick overview;
- Time and date format changed a bit… ‘th’ and ‘rd’ are added dynamically.
- Cameras grid is a copy of the Media grid with some tweaks. Clicking a camera opens a popup that looks at the entity for that camera and displays the correct feed, avoiding having to create multiple popup-files.
- The Cameras button displays all 4 cameras at once.
- Automatic popup when the doorbell is pressed, showing the doorbell cam.
- Copied a weather card from this thread.
- All of the cards under the Rooms grids opens all of the entities for that particular room.
- Special occasions template for the sidebar. Manually created a template with all the dates that are (or should be) important to me
This should help me to avoid forgetting valentines… and birthdays… - Sidebar template with a reminder for when trash is picked up. Also warns me the day before.
- RSS feed as the footer with custom icons.
- And some other stuff.
13 Likes
Can you share the camera code?
what the footer informs about?
Yes, but missing things - Conditional_camera