As I’m trying to clean up the various HACS plugins I have installed, I decided I really didn’t like the use of button-card for this one, and ended up re-writing it in a Markdown card with heavy use of card-mod.
Mostly I didn’t like the look of the button-card as it was, then I got a bit fixated on this one.
Figured I’d share my work with others, I’ve done a few different options, but mostly I was working towards making it look more like the weather applet.
The first 2 (my favourite) make use of Collapsable cards and Tabbed Card, both from HACS.
Here’s a screenshot of all of them
And the YAML for that entire grid.
square: false
columns: 2
type: grid
cards:
- type: custom:tabbed-card
tabs:
- attributes:
label: Weather
icon: mdi:weather-partly-cloudy
card:
type: custom:collapsable-cards
style: |
hui-weather-forecast-card {width: 100%!important;}
title_card:
type: weather-forecast
entity: weather.home
show_current: true
show_forecast: false
secondary_info_attribute: humidity
card_mod:
class: button-small
style: >
:host([veryverynarrow]) .content {flex-flow: nowrap !important;
align: right !important; }
:host([verynarrow]) .name, :host([verynarrow]) .attribute {
display: block !important; }
:host([veryverynarrow]) .icon-image { margin-right: 16px
!important; }
cards:
- type: weather-forecast
entity: weather.home
show_forecast: true
show_current: false
- attributes:
label: Pollen
icon: mdi:flower-pollen-outline
card:
type: custom:collapsable-cards
card_mod:
style: 'button > :first-child {width: 100%!important;'
title_card:
type: markdown
content: >
{% set day = state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days[0] %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% set advice = 'Get outside' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% set advice = 'Take a tablet' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% set advice = 'Avoid grassy fields' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% set advice = 'Stay indoors' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% set advice = 'Fix shit' %}
{% endif %}
<div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>Pollen forecast<div>{{realdate.strftime('%A')}}</div></div>
<div>{{day.pollen_level}}<div>{{advice}}</div></div>
</div>
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element > div:first-child {margin-top: 0.4em;}
ha-markdown-element > div:last-child {margin-bottom: 0.4em;}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: row;
margin-top: 8px;
margin-bottom: 8px;
font-size: 1.2em;
line-height: 2ex;
}
ha-markdown-element > div > :nth-child(1) {
/* state-badge */
--mdc-icon-size: 48px;
flex: 0 0 40px;
position: relative;
display: inline-block;
width: 48px;
color: var(--paper-item-icon-color);
border-radius: 50%;
height: 48px;
text-align: center;
background-size: cover;
line-height: 48px;
vertical-align: middle;
box-sizing: border-box;
}
ha-markdown-element > div > div:nth-child(2) {
/* info */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 16px;
margin-right: 8px;
flex: 1 1 30%;
}
ha-markdown-element > div > div > div {
/* secondary */
color: var(--secondary-text-color);
}
ha-markdown-element > div > div:nth-child(3) {
/* text-content value */
}
cards:
- type: markdown
content: >
{% for day in state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days[1:] %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% endif %}
<div>
<div>{{realdate.strftime('%a')}}</div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>{{day.pollen_level}}</div>
</div>
{% endfor %}
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element {
display: flex;
flex-direction: row;
justify-content: space-around
}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: column;
}
ha-markdown-element > div > :nth-child(1) {
/* info */
font-weight: bold;
}
ha-markdown-element > div > :nth-child(2) {
/* state-badge */
color: var(--paper-item-icon-color);
margin-top: 0.5em;
margin-bottom: 0.5em;
}
- type: markdown
content: >-
{% for day in state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days[1:] %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% endif %}
<div>
<div>{{realdate.strftime('%a')}}</div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>{{day.pollen_level}}</div>
</div>
{% endfor %}
title: All except today, button style
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element {
display: flex;
flex-direction: row;
justify-content: space-around
}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: column;
}
ha-markdown-element > div > :nth-child(1) {
/* info */
font-weight: bold;
}
ha-markdown-element > div > :nth-child(2) {
/* state-badge */
color: var(--paper-item-icon-color);
margin-top: 0.5em;
margin-bottom: 0.5em;
}
- type: custom:collapsable-cards
card_mod:
style: 'button > :first-child {width: 100%!important;'
title_card:
type: markdown
content: >-
{% set day = state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days[0] %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% set advice = 'Get outside' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% set advice = 'Take a tablet' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% set advice = 'Avoid grassy fields' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% set advice = 'Stay indoors' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% set advice = 'Fix shit' %}
{% endif %}
<div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>Pollen forecast<div>{{realdate.strftime('%A')}}</div></div>
<div>{{day.pollen_level}}<div>{{advice}}</div></div>
</div>
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element > div:first-child {margin-top: 0px;}
ha-markdown-element > div:last-child {margin-bottom: 0px;}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: row;
margin-top: 8px;
margin-bottom: 8px;
}
ha-markdown-element > div > :nth-child(1) {
/* state-badge */
flex: 0 0 40px;
position: relative;
display: inline-block;
width: 40px;
color: var(--paper-item-icon-color);
border-radius: 50%;
height: 40px;
text-align: center;
background-size: cover;
line-height: 40px;
vertical-align: middle;
box-sizing: border-box;
}
ha-markdown-element > div > div:nth-child(2) {
/* info */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 16px;
margin-right: 8px;
flex: 1 1 30%;
}
ha-markdown-element > div > div > div {
/* secondary */
color: var(--secondary-text-color);
}
ha-markdown-element > div > div:nth-child(3) {
/* text-content value */
}
cards:
- type: markdown
content: >-
{% for day in state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days[1:] %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% endif %}
<div>
<div>{{realdate.strftime('%a')}}</div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>{{day.pollen_level}}</div>
</div>
{% endfor %}
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element {
display: flex;
flex-direction: row;
justify-content: space-around
}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: column;
}
ha-markdown-element > div > :nth-child(1) {
/* info */
font-weight: bold;
}
ha-markdown-element > div > :nth-child(2) {
/* state-badge */
color: var(--paper-item-icon-color);
margin-top: 0.5em;
margin-bottom: 0.5em;
}
- type: markdown
content: >-
{% for day in state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% endif %}
<div>
<div>{{realdate.strftime('%a')}}</div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>{{day.pollen_level}}</div>
</div>
{% endfor %}
title: All days, button style
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element {
display: flex;
flex-direction: row;
justify-content: space-around
}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: column;
}
ha-markdown-element > div > :nth-child(1) {
/* info */
font-weight: bold;
}
ha-markdown-element > div > :nth-child(2) {
/* state-badge */
color: var(--paper-item-icon-color);
margin-top: 0.5em;
margin-bottom: 0.5em;
}
- type: markdown
content: >-
{% set day = state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days[0] %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% set advice = 'Get outside' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% set advice = 'Take a tablet' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% set advice = 'Avoid grassy fields' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% set advice = 'Stay indoors' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% set advice = 'Fix shit' %}
{% endif %}
<div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>Pollen forecast<div>{{realdate.strftime('%A')}}</div></div>
<div>{{day.pollen_level}}<div>{{advice}}</div></div>
</div>
title: Today only, alternative entity info
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element > div:first-child {margin-top: 0px;}
ha-markdown-element > div:last-child {margin-bottom: 0px;}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: row;
margin-top: 8px;
margin-bottom: 8px;
}
ha-markdown-element > div > :nth-child(1) {
/* state-badge */
flex: 0 0 40px;
position: relative;
display: inline-block;
width: 40px;
color: var(--paper-item-icon-color);
border-radius: 50%;
height: 40px;
text-align: center;
background-size: cover;
line-height: 40px;
vertical-align: middle;
box-sizing: border-box;
}
ha-markdown-element > div > div:nth-child(2) {
/* info */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 16px;
margin-right: 8px;
flex: 1 1 30%;
}
ha-markdown-element > div > div > div {
/* secondary */
color: var(--secondary-text-color);
}
ha-markdown-element > div > div:nth-child(3) {
/* text-content value */
}
- type: markdown
content: >-
{% for day in state_attr('sensor.melbourne_pollen_forecast_api',
'melbourne_6day_pollen_forecast').days %}
{% set realdate = strptime(day.date, '%d %B %Y') %}
{% if day.pollen_level == 'Low' %}
{% set icon = 'mdi:thumb-up' %}
{% set color = 'lime' %}
{% set advice = 'Get outside' %}
{% elif day.pollen_level == 'Moderate' %}
{% set icon = 'mdi:flower' %}
{% set color = 'yellow' %}
{% set advice = 'Take a tablet' %}
{% elif day.pollen_level == 'High' %}
{% set icon = 'mdi:flower-pollen' %}
{% set color = 'orange' %}
{% set advice = 'Avoid grassy fields' %}
{% elif day.pollen_level == 'Extreme' %}
{% set icon = 'mdi:alert-octagram' %}
{% set color = 'red' %}
{% set advice = 'Stay indoors' %}
{% else %}
{% set icon = 'mdi:robot-confused' %}
{% set color = 'grey' %}
{% set advice = 'Fix shit' %}
{% endif %}
<div>
<ha-icon icon="{{icon}}"></ha-icon>
<div>{{realdate.strftime('%A')}}<div>{{realdate.date()}}</div></div>
<div>{{day.pollen_level}}<div>{{advice}}</div></div>
</div>
{% endfor %}
title: All days, entity style
card_mod:
style:
ha-markdown$: |
/* NOTE: markdown card doesn't keep class, title, or name */
ha-markdown-element > div:first-child {margin-top: 0px;}
ha-markdown-element > div:last-child {margin-bottom: 0px;}
ha-markdown-element > div {
display: flex;
align-items: center;
flex-direction: row;
margin-top: 8px;
margin-bottom: 8px;
}
ha-markdown-element > div > :nth-child(1) {
/* state-badge */
flex: 0 0 40px;
position: relative;
display: inline-block;
width: 40px;
color: var(--paper-item-icon-color);
border-radius: 50%;
height: 40px;
text-align: center;
background-size: cover;
line-height: 40px;
vertical-align: middle;
box-sizing: border-box;
}
ha-markdown-element > div > div:nth-child(2) {
/* info */
white-space: nowrap;
overflow: hidden;
text-overflow: ellipsis;
margin-left: 16px;
margin-right: 8px;
flex: 1 1 30%;
}
ha-markdown-element > div > div > div {
/* secondary */
color: var(--secondary-text-color);
}
ha-markdown-element > div > div:nth-child(3) {
/* text-content value */
}