Also because nobody wanted to make a promo video so I did, because I had too much spare time.
(sorry that i did 3 posts in a row…)
1 Like
hey! i used custom fields to build out three additional areas within the grid on the right side stacked vertically labelled ‘up’, ‘fav’, and ‘down’.
then when you go in define the custom fields instead of using a sensor state or any code, you can actually just use ‘card:’ and code an entire additional card inside of your custom field.
they are custom button cards inside of a custom field that live inside of a custom button card. i assume you could keep embedding buttons inside of buttons forever doing it this way. haha
so the code would be something like:
#style for the custom field
styles:
custom_fields:
custom_label: [css: here]
#define where the custom field is in the grid
grid:
- grid-template-areas: '"n n n" "s s s" ". . custom_label"'
- grid-template-rows: 1fr 1fr 1fr
- grid-template-columns: 1fr 1fr 1fr
#define the content inside of the custom field
custom_fields:
custom_label:
card:
type: custom:button-card
# fill in rest as if it were a regular button
2 Likes
Hi guys, I’m running into some issues with the borders in my config. Edited the way as in the readme file. What am I doing wrong?
Try box-shadow: none; or box-shadow: none !important; in the styles. Mind sharing config?
One of the things I added to my theme was that it doesn’t apply box-shadows to markdown cards.
Sure no problem 
- cards:
- content: |
# Remove these borders
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: light;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
- content: |
# Please
style:
.: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
height: 50px;
}
ha-markdown:
$: |
h1 {
font-size: 15px;
font-weight: thin;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
Odd. Did that fix it or do you still have problems?
Still having problems, this is the part in my theme that says about markdown cards. Looks like it’s been set up good right? (it’s the light-soft-ui):
ha-card.type-markdown {
box-shadow: none;
}
ha-card.type-markdown > ha-markdown {
padding: 8px;
}
ha-card:not(.type-markdown) {
background-color: var(--primary-background-color);
border-radius: var(--ha-card-border-radius);
}
ha-card:not(.type-markdown):not(.type-custom-button-card):not(.type-entities):not(.type-custom-mod-card):not(.type-custom-bar-card):not(.type-history-graph):not(.type-iframe):not(.type-glance) {
margin: 20px 6px;
box-shadow: var(--ha-card-box-shadow);
Try adding an !important in the theme under : none;
Sadly, no succes.
}
ha-card.type-markdown {
box-shadow: none !important;
}
Hmm… That’s odd. I don’t get them, here’s my code:
content: >
# <center>{% if is_state('binary_sensor.evening', 'on') %} Good evening {%
elif is_state('binary_sensor.night', 'on') %} Have a good night {% elif
is_state('binary_sensor.morning', 'on') %} Good morning {% endif %} </center>
style:
.: |
ha-card {
margin: 0 0 15px 0;
}
ha-markdown:
$: |
h1 {
font-size: 2.5em;
font-family: Quicksand, sans-serif;
font-weight: 1000;
}
type: markdown
By the way, per @N-L1’s suggestions, I created a new topic:
@hawk is this what you did for your climate buttons? Would you mind sharing the config for that button?
Read the code… but none work on my end. Unsure how to implemented. Follow the guide
Did you install browser-mod with HACS, restarted, added to configuration.yaml, restarted, and reloaded page?
yes I did…
You should ask on the browser-mod forum thread then, not here.
Hi @weaverprojects, seems like you are using an older version of the code. Try the newer versions on GitHub.
Can anyone help me put this in a vertical stack? I would just like 3 of the same buttons in a stack. I can go and change the names of the other buttons later. Thanks!
cards:
- entity: light.example
icon: 'mdi:lightbulb-multiple'
show_icon: true
show_name: false
state:
- value: 'on'
styles:
card:
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
icon:
- color: var(--paper-item-icon-active-color)
styles:
card:
- width: 60px
- height: 60px
- margin: 10px
- border-radius: 15px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
: '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
navigation_path: /lovelace-home/lights
type: 'custom:button-card'
- cards:
- content: |
# Lights
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px;
margin-top: 15px;
}
ha-markdown:
$: |
h1 {
font-size: 22px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
cards:
- cards:
- entity: light.example
icon: 'mdi:lightbulb-multiple'
show_icon: true
show_name: false
state:
- value: 'on'
styles:
card:
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
icon:
- color: var(--paper-item-icon-active-color)
styles:
card:
- width: 60px
- height: 60px
- margin: 10px
- border-radius: 15px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
: '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
navigation_path: /lovelace-home/lights
type: 'custom:button-card'
- cards:
- content: |
# Lights
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px;
margin-top: 15px;
}
ha-markdown:
$: |
h1 {
font-size: 22px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- cards:
- entity: light.example
icon: 'mdi:lightbulb-multiple'
show_icon: true
show_name: false
state:
- value: 'on'
styles:
card:
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
icon:
- color: var(--paper-item-icon-active-color)
styles:
card:
- width: 60px
- height: 60px
- margin: 10px
- border-radius: 15px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
: '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
navigation_path: /lovelace-home/lights
type: 'custom:button-card'
- cards:
- content: |
# Lights
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px;
margin-top: 15px;
}
ha-markdown:
$: |
h1 {
font-size: 22px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
- cards:
- entity: light.example
icon: 'mdi:lightbulb-multiple'
show_icon: true
show_name: false
state:
- value: 'on'
styles:
card:
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? 'inset -4px -4px 5px rgba(60, 60, 60, .6), inset 4px 4px 5px rgba(0, 0, 0, .5)'
: 'inset -3px -3px 5px rgba(255, 255, 255), inset 3px 3px 5px rgba(0, 0, 0, .08)';
]]]
icon:
- color: var(--paper-item-icon-active-color)
styles:
card:
- width: 60px
- height: 60px
- margin: 10px
- border-radius: 15px
- box-shadow: |
[[[ return states['sun.sun'].state == 'below_horizon'
? '-5px -5px 10px rgba(50, 50, 50, .2), 6px 6px 10px rgba(0, 0, 0, .08)'
: '-5px -5px 8px rgba(255, 255, 255, .5), 5px 5px 8px rgba(0, 0, 0, .03)';
]]]
- background-color: var(--primary-background-color)
icon:
- color: var(--primary-text-color)
tap_action:
action: navigate
navigation_path: /lovelace-home/lights
type: 'custom:button-card'
- cards:
- content: |
# Lights
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
height: 20px;
margin-top: 15px;
}
ha-markdown:
$: |
h1 {
font-size: 22px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
type: vertical-stack
type: horizontal-stack
type: vertical-stack
Just create a new vertical stack next time, hit plus, choose manual, and paste the thing in. Repeat as needed.
1 Like
perfect…thanks!