Installed your theme and it looks much better. Thanks for your tip
What did you mean with this?
Still got problems with font and size
What version are you using? Here’s code for 0.110 and lower:
# Example entry
content: |
# Enter what you want to display here
style: |
ha-card {
--paper-card-background-color: 'rgba(11, 11, 11, 0.00)';
box-shadow: 2px 2px rgba(0,0,0,0.0);
}
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
Here’s code for later:
# Example entry
content: |
# Enter what you want to display here
style:
.: |
ha-card {
--ha-card-background: none !important;
box-shadow: none !important;
}
ha-markdown:
$: |
h1 {
font-size: 20px;
font-weight: bold;
font-family: Helvetica;
letter-spacing: '-0.01em';
}
type: markdown
1 Like
Ah, now it works. Great. Thanks again
Is the video tutorial in the works? I so want to set this up but afraid it will go down south.
@hawk
Very nice looking setup. Do you have this in github. This would be a great starter setup.
Thanks, almost working it’s missing your base template, want to share that one also?
sure thing - most of it can probably be removed (or tweaked to your liking) as this just sets up the button grid and sets the general style for when the button isn’t active.
base:
aspect_ratio: 1/1
size: 80%
show_state: 'on'
styles:
card: [font-family: 'Google Sans, Roboto', font-weight: 500, border-style: solid, border-color: '#F5F5F5', border-width: 1px]
grid:
- grid-template-areas: '"i i . ." "i i . ." ". . . ." "n n n n" "s s s s"'
- grid-template-columns: 1fr 1fr 1fr 1fr
- grid-template-rows: 1fr 1fr .25fr .75fr .75fr
- padding: 14px
name: [justify-self: start, font-size: 20px, font-weight: 400, align-self: center, color: var(--primary-name-text-color)]
state: [justify-self: start, font-size: 16px, font-weight: 500, align-self: center, color: var(--primary-state-text-color)]
icon: [color: var(--primary-icon-color), justify-self: start, align-self: start]
EDIT:
There are a few CSS call outs that are custom in my code as well which I set in the theme yaml. My var(–primary-name-text-color) and similar are just various shades of light grey.
Hey! I unfortunately am pretty new to this side of tinkering, so I have nothing there at the moment. My life usually revolves around design files so github is still very foreign to me… but I will look into it and see what I can do. 
I modified your card stuff a little. Given that technically anything you share is under copyright, are you fine if I add this to Soft UI docs?
entity: light.infinity_mirror
state:
- value: 'on'
styles:
icon:
- color: var(--primary-color)
name:
- color: var(--primary-color)
state:
- color: var(--primary-color)
card:
- border-color: var(--primary-color)
- border-width: 2px
- box-shadow: var(--soft-ui-pressed)
show_state: true
style: |
#aspect-ratio {
margin: 10px;
}
* {
--soft-ui-pressed: {% if is_state('sun.sun', 'above_horizon') %}
inset -4px -4px 8px 0 rgba(255,255,255,.5), inset 4px 4px 8px 0 rgba(0,0,0,.03);
{% elif is_state('sun.sun', 'below_horizon') %}
inset -4px -4px 10px 0 rgba(50, 50, 50,.5), inset 4px 4px 12px 0 rgba(0,0,0,.3);
{% endif %}
--soft-ui-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 %}
}
styles:
card:
- font-family: 'Google Sans, Roboto'
- font-weight: 500
- background-color: var(--primary-background-color)
- border-radius: 15px
- box-shadow: var(--soft-ui-shadow)
grid:
- grid-template-areas: '"i n s"'
- grid-template-columns: 33% 40% 27%
- padding: 15px
name:
- font-size: 20px
- font-weight: 400
state:
- font-size: 20px
- font-weight: 500
icon:
- color: var(--primary-text-color)
type: 'custom:button-card'
1 Like
No problem here! Share and modify as you wish!
1 Like
@hawk, your dashboard is so awesome! Definitely the single best one I’ve ever seen 
Unfortunately @duceduc, there will probably be no video. The readme is even more clear and detailed now. You can always just start a new dashboard and try the code. If you really are afraid of messing up your config, just try @KTibow’s themes, they should work without really changing anything. Cheers.
1 Like
Cards similar to ones used in @hawk’s dashboard have been added to the docs, check the Button Cards section of the readme for more details. 
5 Likes
Any chance you would share your .yaml files? 
I made my main dashboard soft UI tiles. Here’s some random stuff:
Map
aspect_ratio: '1:1'
entities:
- entity: device_tracker.gm1917
- entity: device_tracker.sm_g960u
hours_to_show: 7
type: map
style: |
ha-card {
max-width: 100px;
max-height: 100px;
margin: 0 !important;
padding: 0 !important;
}
#root {
padding-bottom: 100% !important;
}
.leaflet-control-attribution {
background: rgba(255, 255, 255, 0.3) !important;
font-size: 0.5em !important;
}
.leaflet-control-zoom-in, .leaflet-control-zoom-out {
font-size: 14px !important;
width: 20px !important;
height: 20px !important;
line-height: 20px !important;
}
.leaflet-control {
margin-left: 4px !important;
margin-top: 4px !important;
}
ha-icon-button[title="Reset focus"] {
left: -8px !important;
top: 39px !important
}
Light
entity: light.infinity_mirror
hide_header: true
smooth_color_wheel: true
style: |
ha-card {
padding: 5px !important;
max-width: 135px;
max-height: 135px;
margin: 10px auto !important;
display: block;
box-shadow: none !important;
}
ha-color-picker {
width: 125px;
box-shadow: var(--ha-card-box-shadow);
border-radius: 50%;
}
.control > ha-icon {
display: none;
}
.light-entity-card-sliders {
display: none;
}
type: 'custom:light-entity-card'
Trash animation
custom_fields:
note: |
[[[ return states['sensor.trash_takeout'].state ]]]
entity: binary_sensor.trash_soon
icon: 'mdi:trash-can'
name: Trash soon
show_state: false
state:
- styles:
card:
- border-width: 2px
- box-shadow: var(--soft-ui-pressed)
- border-color: var(--primary-color)
icon:
- color: var(--primary-color)
- animation: dump 5s infinite
value: 'on'
styles:
custom_fields:
note:
- justify-self: start
- font-weight: bold
- font-size: 15px
- opacity: 0.6
- padding: 0 15px 5px
grid:
- grid-template-areas: '"i" "n" "note"'
style: |
@keyframes dump {
0% {
}
40% {
transform: rotate(135deg);
}
45% {
transform: rotate(135deg) translateY(3px);
}
50% {
transform: rotate(135deg) translateY(-3px);
filter: unset;
}
55% {
transform: rotate(135deg) translateY(3px);
filter: drop-shadow(0px -0px 6px brown);
}
60% {
transform: rotate(135deg) translateY(-3px);
filter: drop-shadow(0px -8px 6px brown);
}
65% {
transform: rotate(135deg) translateY(-3px);
filter: drop-shadow(0px -16px 5px brown);
}
70% {
transform: rotate(135deg);
filter: drop-shadow(0px -24px 4px brown);
}
75% {
transform: rotate(135deg);
filter: drop-shadow(0px -32px 4px transparent);
}
80% {
transform: rotate(135deg);
filter: unset;
}
100% {
}
}
template: info
type: 'custom:button-card'
2 Likes
Is the map card supposed to expand and shrink on certain actions? I have tried hovering, tapping, hold tapping, etc. But it stays the size of a button which is relatively useless for a map. lol I know I must be doing something wrong. Copied your yaml and only changed the device trackers.
No, just shrinks down the size. You can change the max-width and max-height, and as well as everything else.
OK… cool… thanks!
Hey @KTibow, great work in trying this all together with your theme.
I’m still tinkering about but I have an interesting issue with a couple of entity row types where it’s as if it’s being squished to 60% wide.
This also happened when nesting a horizontal stack.
It all behaves as expected when there is no theme applied.
Perhaps you’ve seen this before?
Also, any idea on how I could apply the pressed shadow look to a mini media player card? I’ve tried a couple of things but seems to have no effect.
Cheers, Linton
First of all, I never realized mini media player looked so good with soft UI!
Second, that’s interesting. Because of an issue, the margin is applied to two places, on the columns and the cards. Mind sharing a bigger screenshot?
Third, you might need to mark it as important. Just do
style: |
ha-card {
box-shadow: var(--ha-card-box-shadow-pressed) !important;
}
and apply templating as needed.