N-l1
July 19, 2020, 7:19pm
180
Hi @Eldudemeister , no worries, glad to help. If you only access the UI from your phone, you can adjust the size of each button (so more will fit) by changing the width + height or by changing the margin. This, however, will probably mess up the sizing of the card on any other display. A better method would be responsive sizing by adjusting the margin here (shrink it to 2 or 1.5px)
@media only screen and (max-width: 600px) {
ha-card {
margin: 3px;
margin-left: 4px;
}
}
You can find out more about it in a similar issue here , and in other closed issues on GitHub . Let me know if you need more help.
Thanks for this, is there a way to move a button onto the next line instead? I’ve tried changing the margin but it doesnt change on my phone…
N-l1
July 22, 2020, 12:43am
182
You can always just create another card for the second row. However, if you would like to do it responsively, you would probably need something like state-switch . E.g. display one single row with 5 buttons when the screen size is big; then if the screen size is small, display 2 rows, one with 4 button and another with a single button
1 Like
If you upgraded to 0.113 and have ‘broken’ markdown cards: see release notes -> breaking changes -> frontend: themes
1 Like
KTibow
July 24, 2020, 2:26am
185
As for that:
First way with card-mod: Just change the margin attribute.
To keep the existing 20px on the left and right, but to change the top margin: 40px 20px (first is top/bottom).
To control each one: 10px 20px 30px 40px (clockwise starting from top)
Second way with button-card:
show_icon: false
show_name: false
style: |
ha-card {
--paper-card-background-color: none !important;
box-shadow: none !important;
}
styles:
card:
- width: 5px
- height: 45px
type: 'custom:button-card'
# Modify height as needed
If you’re using a template sensor, then specify entity_id In 0.115, if not auto-detected, check out Heads up! Upcoming breaking change in the Template integration . I don’t know how to do it client-side.
Use mod-card, just add a card: to the top, indent everything using Ctrl/Command + ] except style, and add type: 'custom:mod-card'
2 Likes
Thanks for your reply! I got the first on fixed and working with adjusting the margin attribute. I will try fix the second later but I can’t get the sensor card working.
I managed to warp it into a mod-card and both shadow and margin attribute works but not the rounded corners. Here is my code.
type: 'custom:mod-card'
style: |
ha-card {
margin: 10px;
border-radius: 15px;
background-color: var(--primary-background-color);
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
card:
type: sensor
entity: sensor.frigate_coral_fps
graph: line
KTibow
July 24, 2020, 2:42pm
188
Based on what you previously posted:
card:
entity: sensor.frigate_coral_fps
graph: line
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
box-shadow: {% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
type: sensor
style: |
ha-card {
margin: 10px;
}
type: 'custom:mod-card'
I just tried it, the bottom part of the card is still not rounded.
I just tried it, the bottom part of the card is still not rounded.
@invinciberry Could you try this part to look like:
box-shadow:
{% if is_state('sun.sun', 'above_horizon') %}
-8px -8px 8px 0 rgba(255,255,255,.5),8px 8px 8px 0 rgba(0,0,0,.03);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
You could also try mini graph card.
1 Like
KTibow
July 25, 2020, 3:49pm
193
Self-promotion (for the sake of it): I made some themes based off of JuanMTech’s, but I added soft UI styling.
Features:
Can instantly add soft-ui to an auto-generated dashboard, without needing to edit it (and disable auto-generation).
Works with auto-generated dashboards and handmade ones
Works with badges
Gives cards in dashboards and cards everywhere soft UI
Adds a compact header with no work required
They’re available as default HACS repos. Here’s the links on GitHub:
🎨 Home Assistant soft UI light theme, with help from @JuanMTech, @thomasloven, and @N-L1. - KTibow/lovelace-light-soft-ui-theme
🎨 Home Assistant soft UI dark theme, with help from @JuanMTech, @thomasloven, and @N-l1. - KTibow/lovelace-dark-soft-ui-theme
2 Likes
@N-l1 I noticed you put your old automations in a singular new one. I tried it but it gives me an error:
Says missed a comma in this line: {% if states('sun.sun') == "above_horizon" %}
NovaG
July 26, 2020, 8:36am
195
Good work, it certainly adds a bit of flair to cards. I just started making my remote card.
I few more color choices would be nice though.
N-l1
July 26, 2020, 7:18pm
196
I’ve updated the automation to use the new choose feature instead of using templates, should work now (if you are on >= 0.113)
1 Like
Thanks! I have a slightly shorter version:
- id: set_theme
alias: "Set theme"
initial_state: 'on'
trigger:
- platform: homeassistant
event: start
- platform: sun
event: sunrise
- platform: sun
event: sunset
action:
- choose:
- conditions:
- condition: state
entity_id: sun.sun
state: 'below_horizon'
sequence:
- service: frontend.set_theme
data:
name: "Google Dark Theme"
default:
- service: frontend.set_theme
data:
name: "Google Light Theme"
1 Like
Since updating to 0.113.1 my markdown cards look like this? Anyone else affected?
KTibow
July 28, 2020, 1:35pm
199
N-L1 already updated the code, but basically instead of
--paper-card-background-color
use one of these:
--ha-card-background
--card-background-color
background-color
To make this easier, open the raw config editor, move it into another text editor and do a find/replace.
1 Like
