On the phone screen unfortunately it breaks. My CSS skills are obviously not enough to fix it.
2 Likes
We will make a deal, you help me find out how to get this work consistently when accessing HA remotely and ill help with the CSS. Ill take a look when i am back from work 
1 Like
Sure, Iād be happy to help =)
would love to see the code for this aswellā¦if you want to share it
1 Like
Hello everybody
@dimitri.landerloos why i can change the style with .: |
type: grid
cards:
- type: custom:mushroom-cover-card
entity: cover.shellyswitch25_68c63afa44ed
show_position_control: true
show_buttons_control: true
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
{% if states ('cover.shellyswitch25_68c63afa44ed') == 'open'%}
--slider-bg-color: #89DF83!important;
{% else %}
--slider-bg-color: ##FF483F!important;
{% endif %}
}
.: |
ha-card {
border-style: none;
}
I maybe mistaken, but I donāt believe border-style is an option. You can remove the border with: " --ha-card-border-width: 0px"
In addition ā.: |ā needs to line up with āmushroom-cover-position-control$: |ā
type: grid
cards:
- type: custom:mushroom-cover-card
entity: cover.shellyswitch25_68c63afa44ed
show_position_control: true
show_buttons_control: true
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
{% if states ('cover.shellyswitch25_68c63afa44ed') == 'open'%}
--slider-bg-color: #89DF83!important;
{% else %}
--slider-bg-color: ##FF483F!important;
{% endif %}
}
.: |
ha-card {
--ha-card-border-width: 0px;
}
Didnāt work, i think iām doing wrong using .: , or bad indendation, i donāt know
Wrong indentation of .: |.
border style does exist, but is only used to define the type of border not whether or not to apply. So border-style: solid; or border-style: dotted;.
Just using border: 1px solid green; is shorthand for seperate border entries, border-style, border-width, border-color.
Border is set in the theme, so most of the time you need to override it with a !important;
type: grid
cards:
- type: custom:mushroom-cover-card
entity: cover.shellyswitch25_68c63afa44ed
show_position_control: true
show_buttons_control: true
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
{% if states ('cover.shellyswitch25_68c63afa44ed') == 'open'%}
--slider-bg-color: #89DF83!important;
{% else %}
--slider-bg-color: ##FF483F!important;
{% endif %}
}
.: |
ha-card {
border: none !important;
}
1 Like
That is great to know!
Did you copy what i sent directly?
You can change the amount of columns in a grid, and grid makes cards square by default so you will likely want to disable that.
type: grid
columns: 2
square: false
cards:
- type: custom:mushroom-cover-card
entity: cover.office_blinds
show_position_control: true
show_buttons_control: true
card_mod:
style:
mushroom-cover-position-control$: |
mushroom-slider {
{% if states ('cover.shellyswitch25_68c63afa44ed') == 'open'%}
--slider-bg-color: #89DF83!important;
{% else %}
--slider-bg-color: ##FF483F!important;
{% endif %}
}
.: |
ha-card {
border: none !important;
}
The indentation is very important, now itās worked 
1 Like
@dimitri.landerloos I would be grateful if you can help me accomplish the following:
I have a mushroom template card and would like to add another word under the word āNoonā like in the picture:
Or below the time will work too.
Here is the code:
type: custom:mushroom-template-card
primary: Noon
secondary: |
{{ states('sensor.dhuhr_prayer_time') }}
tap_action:
action: more-info
entity: sensor.current_prayer
icon: mdi:weather-sunny
icon_color: '#FFC107'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.current_prayer') == 'Dhuhr' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(0, 224, 56, 0.1) !important;
{% endif %}
width: 300px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Dhuhr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
Add this line span.secondary { white-space: pre; word-break: break-word ; }to your mushroom-state-info$: |
it will look like this:
mushroom-state-info$: |
span.secondary {
white-space: pre;
word-break: break-word;
}
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
The entire card for secondary:
type: custom:mushroom-template-card
primary: Noon
secondary: |
{{ states('sensor.sun_next_noon') }}
Additional Line
tap_action:
action: more-info
entity: sensor.sun_next_dawn
icon: mdi:weather-sunny
icon_color: '#FFC107'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.sun_next_dawn') == 'Dhuhr' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(0, 224, 56, 0.1) !important;
{% endif %}
width: 300px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Dhuhr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
span.secondary {
white-space: pre;
word-break: break-word;
}
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
The entire card for primary:
type: custom:mushroom-template-card
primary: |
Noon
Additional Line
secondary: |
{{ states('sensor.sun_next_noon') }}
tap_action:
action: more-info
entity: sensor.sun_next_dawn
icon: mdi:weather-sunny
icon_color: '#FFC107'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.sun_next_dawn') == 'Dhuhr' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(0, 224, 56, 0.1) !important;
{% endif %}
width: 300px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Dhuhr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
span.primary {
white-space: pre;
word-break: break-word;
}
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
1 Like
Thank you very much. I really appreciate your time and efforts. It worked the way I want. One more request if it s possible: If I could make the font of the āAdditional Lineā as big as the primary one with the same color while leaving the font the color of the time intact!. Thank you again!
1 Like
I would suggest using additional info in the primary: section with this code to match the color and font-height if this what you are trying to achieveā¦
type: custom:mushroom-template-card
primary: |
Noon
Additional Line
secondary: |
{{ states('sensor.sun_next_noon') }}
tap_action:
action: more-info
entity: sensor.sun_next_dawn
icon: mdi:weather-sunny
icon_color: '#FFC107'
layout: vertical
card_mod:
style:
.: |
ha-card {
/* Set size and spacing of button */
{% if states('sensor.sun_next_dawn') == 'Dhuhr' %}
border: 1px outset green; /* Example border color */
background: rgba(70, 130, 180, 0.5) !important;
{% else %}
background: rgba(0, 224, 56, 0.1) !important;
{% endif %}
width: 300px;
--spacing: 8px;
padding-bottom: calc(var(--spacing) * 1.718) !important;
margin-bottom: 5px;
/* Styling of button */
box-shadow: var(--ha-card-box-shadow) !important;
border-radius: calc(var(--ha-card-border-radius, 15px) * 1 ) !important;
/* Center button */
margin-left: auto;
margin-right: auto;
transition: all 0s;
}
/* Add subtle color on hover */
ha-card:hover {
background: rgba(255, 235, 59, 0.5) !important; /* Soft amber on hover with reduced opacity */
border-color: orange; /* Orange border on hover */
}
ha-state-icon {
{% if states('sensor.current_prayer') == 'Dhuhr' %}
animation: spin 2s linear infinite;
{% endif %}
}
@keyframes spin {
0% {transform: rotate(0deg);}
mushroom-state-info$: |
span.primary {
white-space: pre;
word-break: break-word;
}
.container {
--secondary-text-color: rgba(13, 71, 161, 0.9); /* A soft amber for a warm contrast */
}
1 Like
Wow! That s exactly how I wanted. Thank you very much and I am very thankful to you for your time and patience! Thank you again!
Happy to helpā¦Iām in the process of teaching myself to program CSS and your question sparked my curiousity!
Thank you very much. Any resources you can recommend for a newbie to start learning ?
Here is my roku remote hope people like it.
Might need a bit of tweaking due to the way I have set up mine.
Needs the following
- conditional cards
- simple icons
- mini-media player
- bubble card
donāt forget to create an input helper.
I used tv_section for mine
EDIT: I cantāt fit the whole code here, but let me know if you want the other sections
home
type: conditional
conditions:
- condition: state
entity: input_select.tv_section
state: home
card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
icon: mdi:power
fill_container: true
layout: vertical
tap_action:
action: toggle
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--black);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--red) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:chevron-up
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: up
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 70px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:home
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: home
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--black);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--blue) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:chevron-left
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: left
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 70px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:checkbox-blank-circle-outline
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: select
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:chevron-right
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: right
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 70px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:undo-variant
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: back
fill_container: true
layout: vertical
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:chevron-down
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: down
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 70px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:asterisk
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: info
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 70px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:volume-mute
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: volume_mute
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast7) !important;
max-height:125px !important;
max-width:130px !important;
}
primary: ''
- type: custom:mushroom-template-card
icon: mdi:volume-minus
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: volume_down
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast7) !important;
max-height:125px !important;
max-width:130px !important;
}
- type: custom:mushroom-template-card
icon: mdi:volume-plus
fill_container: true
layout: vertical
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: volume_up
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: var(--contrast7) !important;
max-height:125px !important;
max-width:130px !important;
}
layout:
grid-template-columns: 105px 105px 105px
grid-template-rows: auto
grid-template-areas: |
"header header header"
"main main2 main3"
media
type: conditional
conditions:
- condition: state
entity: input_select.tv_section
state: play
card:
type: custom:layout-card
layout_type: custom:grid-layout
cards:
- type: custom:mushroom-template-card
icon: mdi:volume-minus
fill_container: true
layout: vertical
primary: Volume Down
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: volume_down
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
margin-top:-10px;
left: -50%;
justify-content: flex-start !important;
background-color:transparent !important;
}
mushroom-state-info$: |
.primary {
font-family: Montserrat;
font-size: 1.04em !important;
--primary-text-color: var(--contrast40);
text-align:start;
margin-top:-20px;
font-weight:500 !important;
white-space: initial !important;
z-index:1;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:90px !important;
max-width:140px !important;
}
- type: custom:mushroom-template-card
icon: mdi:volume-plus
fill_container: true
layout: vertical
primary: Volume Up
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: volume_up
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
margin-top:-10px;
left: -65%;
justify-content: flex-start !important;
background-color:transparent !important;
}
mushroom-state-info$: |
.primary {
font-family: Montserrat;
font-size: 1.04em !important;
--primary-text-color: var(--contrast40);
text-align:start;
margin-top:-20px;
font-weight:300 !important;
white-space: initial !important;
z-index:1;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:90px !important;
max-width:160px !important;
}
- type: custom:mushroom-template-card
icon: mdi:play-pause
fill_container: true
layout: vertical
primary: Play\Pause
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: play
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--black);
--shape-color: none !important;
margin-top:-10px;
left: -50%;
justify-content: flex-start !important;
background-color:transparent !important;
}
mushroom-state-info$: |
.primary {
font-family: Montserrat;
font-size: 1.04em !important;
--primary-text-color: var(--black);
text-align:start;
margin-top:-15px;
white-space: initial !important;
z-index:1;
}
.: |
ha-card {
background: var(--green) !important;
max-height:180px !important;
max-width:140px !important;
}
- type: vertical-stack
cards:
- type: custom:mushroom-template-card
icon: mdi:arrow-up-drop-circle-outline
fill_container: true
layout: vertical
primary: Channel Up
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: channel_up
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
margin-top:-10px;
left: -65%;
justify-content: flex-start !important;
background-color:transparent !important;
}
mushroom-state-info$: |
.primary {
font-family: Montserrat;
font-size: 1.04em !important;
--primary-text-color: var(--contrast40);
text-align:start;
margin-top:-15px;
font-weight:300 !important;
white-space: initial !important;
z-index:1;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:90px !important;
max-width:160px !important;
}
- type: custom:mushroom-template-card
icon: mdi:arrow-down-drop-circle-outline
fill_container: true
layout: vertical
primary: Channel Down
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: channel_up
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
margin-top:-10px;
left: -65%;
justify-content: flex-start !important;
background-color:transparent !important;
}
mushroom-state-info$: |
.primary {
font-family: Montserrat;
font-size: 1.04em !important;
--primary-text-color: var(--contrast40);
text-align:start;
margin-top:-15px;
font-weight:300 !important;
white-space: initial !important;
z-index:1;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:90px !important;
max-width:160px !important;
}
- type: custom:mushroom-template-card
icon: mdi:skip-previous
fill_container: true
layout: vertical
primary: Previous
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: reverse
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
margin-top:-10px;
left: -50%;
justify-content: flex-start !important;
background-color:transparent !important;
}
mushroom-state-info$: |
.primary {
font-family: Montserrat;
font-size: 1.04em !important;
--primary-text-color: var(--contrast40);
text-align:start;
margin-top:-15px;
font-weight:300 !important;
white-space: initial !important;
z-index:1;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:90px !important;
max-width:140px !important;
}
- type: custom:mushroom-template-card
icon: mdi:skip-next
fill_container: true
layout: vertical
primary: Next
tap_action:
action: call-service
service: remote.send_command
target:
entity_id: remote.roku
data:
command: forward
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-size: 60px !important;
--icon-color:var(--white);
--shape-color: none !important;
margin-top:-10px;
left: -70%;
justify-content: flex-start !important;
background-color:transparent !important;
}
mushroom-state-info$: |
.primary {
font-family: Montserrat;
font-size: 1.04em !important;
--primary-text-color: var(--contrast40);
text-align:start;
margin-top:-15px;
font-weight:300 !important;
white-space: initial !important;
z-index:1;
}
.: |
ha-card {
background: var(--contrast4) !important;
max-height:90px !important;
max-width:160px !important;
}
secondary: ''
layout:
grid-template-columns: 150px 180px
grid-template-rows: auto
grid-template-areas: |
"main main"
footer
type: custom:layout-card
layout_type: custom:masonry-layout
cards:
- type: custom:mini-media-player
noPadding: true
hide:
volume: true
power: true
prev: true
next: true
source: true
runtime: true
runtime_remaining: true
controls: false
mute: false
entity: media_player.roku
info: short
source: icon
artwork: material
volume_stateless: false
group: true
card_mod:
style: |
:host{
font-family: "Montserrat";
font-weight:700;
max-width: 420px;
}
.mmp__bg, .mmp__player, .mmp__container {
border-radius: 10px 10px 0px 0px !important;
-webkit-transform: translateZ(0);
transform: translateZ(0);
}
.entity__info__name{
color: var(--contrast0) !important;
font-weight: 400 !important;
font-size: 15px !important;
}
ha-card.--has-artwork .cover{
border-radius: 10px 10px 0px 0px !important;
}
- type: custom:stack-in-card
mode: horizontal
card_mod:
style:
.: |
ha-card {
border-radius: 0 0 10px 10px;
padding:0px !important;
background: var(--contrast1);
max-width: 420px;
}
cards:
- type: custom:layout-card
layout_type: custom:grid-layout
layout:
grid-template-columns: 25% 25% 25% 25%
grid-template-rows: auto
grid-template-areas: |
"header header header"
cards:
- type: custom:mushroom-template-card
icon: mdi:home-outline
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.tv_section
data:
option: home
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: var(--contrast15);
--icon-size: 45px !important;
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: none;
padding:0px !important;
}
- type: custom:mushroom-template-card
icon: mdi:play-circle-outline
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.tv_section
data:
option: play
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: var(--contrast15);
--icon-size: 45px !important;
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: none;
padding:0px !important;
}
- type: custom:mushroom-template-card
icon: mdi:format-list-numbered
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.tv_section
data:
option: input
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: var(--contrast15);
--icon-size: 45px !important;
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: none;
padding:0px !important;
}
- type: custom:mushroom-template-card
icon: mdi:star
layout: vertical
tap_action:
action: call-service
service: input_select.select_option
target:
entity_id: input_select.tv_section
data:
option: favorites
card_mod:
style:
mushroom-shape-icon$: |
.shape {
--icon-color: var(--contrast15);
--icon-size: 45px !important;
--shape-color: none !important;
background-color:transparent !important;
}
.: |
ha-card {
background: none;
padding:0px !important;
}
layout:
card_margin: 0px
8 Likes