Hey guys, can any CSS gurus look at my code here and give me advise?
So I’ve taken Sam Wakefields css and modified it for my own dashboard.
But my CSS is really bad LOL and I don’t know how to get it to look like the custom button card
So this looks great;
Here is the code for one button;
type: grid
cards:
- type: custom:button-card
color: transparent
entity: input_select.room_lights
show_name: true
color_type: label-card
name: Bedroom
icon: phu:rooms-bedroom
state:
- icon: phu:rooms-bedroom
styles:
icon:
- color: white
- width: 40px
name:
- color: white
- font-size: 12px
- padding-top: 5px
value: Bedroom
- icon: phu:rooms-bedroom
styles:
icon:
- color: white
- opacity: 0.5
- width: 40px
name:
- color: white
- font-size: 12px
- padding-top: 1px
operator: default
styles:
icon: null
tap_action:
action: call-service
service: input_select.select_option
service_data:
entity_id: input_select.room_lights
option: Bedroom
But if you look at the buttons they are a dogs breakfast 
I’ve just added one of the buttons, but would really appreciate someone telling me how I can get the buttons to align like the room selectors.
type: custom:state-switch
entity: input_select.room_lights
states:
Bedroom:
type: grid
cards:
- type: custom:button-card
icon: phu:light-strip
entity: light.bedroom_hall_strip
show_icon: true
aspect_ratio: 1/1
hold_action:
action: more-info
tap_action:
action: toggle
name: Bedroom Hall Strip
show_state: true
state:
- styles:
card:
- background-color: '#242e42'
- border-radius: 10%
- padding: 12%
- color: ivory
- opacity: 0.7
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- height: 100px
- width: 100px
grid:
- grid-template-areas: '"i bright" "n n" "s s"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: 300
- font-size: 10px
- color: white
- opacity: 0.7
- align-self: middle
- justify-self: start
state:
- font-weight: bold
- font-size: px
- opacity: 0.7
- color: white
- align-self: middle
- justify-self: start
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 100%
- opacity: 0.2
- color: white
custom_fields:
bright:
- align-self: start
- justify-self: end
- border-radius: 20px
- border-style: solid
- border-width: 1px
- font-size: 10px
- font-weight: 300
- box-shadow: 2px 2px rgba(0,0,0,0.7)
- border-color: '#67727e'
- padding: 15%
value: 'off'
- styles:
card:
- background-color: '#242e42'
- border-radius: 10%
- padding: 12%
- color: ivory
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
- height: 100px
- width: 100px
grid:
- grid-template-areas: '"i bright" "n n" "s s"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: 300
- font-size: 10px
- color: white
- align-self: middle
- justify-self: start
state:
- font-weight: bold
- font-size: px
- color: white
- align-self: middle
- justify-self: start
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 100%
- color: white
custom_fields:
bright:
- align-self: start
- justify-self: end
- border-radius: 20px
- border-style: solid
- border-width: 1px
- font-size: 10px
- font-weight: 300
- box-shadow: 2px 2px rgba(0,0,0,0.7)
- border-color: '#67727e'
- padding: 15%
value: 'on'
- styles:
card:
- background-color: '#242e42'
- border-radius: 10%
- padding: 12%
- color: ivory
- opacity: 0.7
- font-size: 10px
- text-shadow: 0px 0px 5px black
- text-transform: capitalize
- box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px
- height: 100px
- width: 100px
grid:
- grid-template-areas: '"i bright" "n n" "s s"'
- grid-template-columns: 1fr 1fr
- grid-template-rows: 1fr min-content min-content
name:
- font-weight: 300
- font-size: 10px
- opacity: 0.7
- color: white
- align-self: middle
- justify-self: start
state:
- font-weight: bold
- opacity: 0.7
- font-size: 9px
- color: white
- align-self: middle
- justify-self: start
img_cell:
- justify-content: start
- align-items: start
- margin: none
icon:
- width: 100%
- opacity: 0.2
- color: white
custom_fields:
bright:
- align-self: start
- justify-self: end
- border-radius: 20px
- border-style: solid
- border-width: 1px
- font-size: 10px
- font-weight: 300
- box-shadow: 2px 2px rgba(0,0,0,0.7)
- border-color: '#67727e'
- padding: 15%
value: unavailable
Here is a screen shot from the mobile app