Hi, this is my own design by using the custom button card. This has nothing to do with this Homekit style card of DBuit. I will send you a piece of the code later today you can use to create the same icons/colors.
I see,
pity
ohh superb!
Would really appreciate that!
Is it also possible to align the icon inside the tile to the left, as with the text? So it looks lik this home kit card, but with your colours?
any idea when?
Is also possible then to have a slidebar or smth to set the output of the ligt from 0-100% or smth?
My cards do not have that. You can do that by using the correct codes. I advise you to read up on how the custom button cards works: https://github.com/custom-cards/button-card/blob/master/README.md
If you go to the following section you can even create the exact same layout you are asking for: https://github.com/custom-cards/button-card/blob/master/README.md#advanced-styling-options
All the coding is there, so just copy it and experiment with it.
I actually did , before i came to this card…
That was in fact the reason i came here.
I copied the code exactly like you point me to but the icon remains in the middle… instead of to the left…
Here was my old code
type: horizontal-stack
cards:
- type: custom:button-card
entity: light.zithoek_2
label: Lights
show_label: false
show_state: true
icon: mdi:lightbulb-outline
styles:
card:
- width: 200px
- height: 200px
grid:
- grid-template-areas: '"i" "n" "s"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- align-self: start
- text-align: start
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- font-size: 25px
- text-transform: lowercase
state:
- justify-self: start
- padding-left: 10px
state:
- value: 'on'
styles:
card:
- color: white
icon:
- color: yellow
tap_action:
action: togglePossible to still get yours?
Hi, I’m having troubles aligning the icon as well. So my code will not be of use as is. However, I now am intrigued as to how the advanced styling works for other and future elements I might use.
I will try to create my own button but with everything to the left tonight or tomorrow. I will send you the code with my styling (colors, transparant) and the alignment combined if it works.
Superb!
Thx !
here’s what’s working perfectly for me. there are few significant differncences. Note the aspect_ratio and size fields in the main button config, and secondly, the img_cell settings (and never mind the commuted bits of code, this is what I have been experimenting with using the right settings for the pop card):
button_light:
# label: >
# [[[
# var bri = Math.round(entity.attributes.brightness / 2.55);
# return (bri ? bri : '0') + '%';
# ]]]
color: auto-no-temperature
size: 30%
aspect_ratio: 1/1
# show_state: true
# show_label: true
tap_action:
action: toggle
haptic: light
# hold_action:
# action: more-info
# haptic: success
hold_action:
haptic: heavy
action: call-service
service: browser_mod.popup
service_data:
title: >
[[[ return entity.attributes.friendly_name ]]]
card: !include /config/lovelace/includes/include_light_button_popup.yaml
style:
# position: fixed
# z-index: 999
# top: 20
# left: 0
# height: 85%
# width: 30%
display: block
# align-items: center #prevents vertical scrolling on vertical stacks
# justify-content: center
background: rgba(0, 0, 0, 0.8)
color: 'var(--primary-color)'
# flex-direction: column
# margin: 0
# --iron-icon-fill-color: >
# [[[ var bri = states[entity.entity_id].attributes.brightness;
# var bri = 254 - bri;
# return 'hsl(' + bri + ',65%,50%)'; ]]]
# ]]]"#FFF"
# card:
# type: custom:light-popup-card
# entity: >
# [[[ return entity.entity_id ]]]
## icon: {{ icon }}
# # scenesInARow: 2
# sliderColoredByLight: true
# sliderThumbColor: '#161'
# brightnessWidth: 150px
# brightnessHeight: 400px
# switchWidth: 150px
# switchHeight: 400px
# scenes:
# - scene: scene.morning_lights
# color: "#FDCA64"
# name: ontspannen
# - scene: scene.morning_lights
# color: "#FFE7C0"
# name: helder
# - scene: scene.morning_lights
# color: "#BBEEF3"
# - scene: scene.morning_lights
# color: "#8BCBDD"
deviceID:
- this
styles:
card:
- background-color: 'var(--paper-card-background-color)'
- padding-left: 5px
name:
- justify-self: start
- font-weight: bold
- font-family: Helvetica
- font-size: 13px
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-overflow: unset
- white-space: unset
- word-break: break-word
- text-align: start
grid:
- grid-template-areas: '"i" "n" "stateDisplay"' #'"i" "n" "s" "l"'
- grid-template-columns: 1fr
- grid-template-rows: 1fr min-content min-content
img_cell:
- justify-content: start
- align-items: start
# custom_fields:
# slider:
# - filter: opacity(80%)
# - color: rgb(240, 194, 9)
# - padding-left: 0px
# custom_fields:
# slider:
# card:
# type: custom:slider-entity-row
# full_row: true
# hide_state: true
# entity: >
# [[[ return entity.entity_id ]]]
state:
# [[[ var bri = states['light.stue_finnsnes'].attributes.brightness;
# return 'hsl(' + bri + ',65%,50%)';
# ]]]
- value: 'on'
custom_fields:
stateDisplay: >
[[[ var fakestate = `<span style="color: #F0C209;"> ${entity.state}:</span>`;
var fakelabel = `<span style="color: #F0C209;"> ${Math.round(entity.attributes.brightness / 2.55)} %</span>`;
return fakestate +' ' + fakelabel;]]]
styles:
card:
- color: black #'#F0C209'
# name:
# - color: black
# label:
# - color: '#F0C209'
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
# - color: black
id: on-icon
- value: 'off'
custom_fields:
stateDisplay: >
[[[ return entity.state ]]]
styles:
# card:
# - opacity: 0.7
# label:
# - color: rgba(0, 0, 0, 0.0)
icon:
- color: grey
name:
- color: grey
# state:
# - color: grey
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: grey
id: off-icon
- value: 'unavailable'
custom_fields:
stateDisplay: >
[[[ return entity.state ]]]
styles:
card:
- opacity: 0.8
- color: '#D3D3D3'
icon:
- color: '#D3D3D3'
# label:
# - color: rgba(0, 0, 0, 0.0)
custom_fields:
stateDisplay:
- font-size: 11px
- font-family: Helvetica
- justify-self: start
- text-transform: capitalize
- font-weight: bold
- color: '#D3D3D3'
section of my lights:
1 Like
Hi neliss - were you ever able to get deep_press working with this card?
I am trying to use it with the light-popup-card, but it just displays an empty popup screen (iphone 11, iOS 13.3.1). I use this code as part of a button template card:
deep_press: true
hold_action:
action: call-service
service: browser_mod.popup
service_data:
title: Light Control
card:
type: custom:light-popup-card
entity: >
[[[ return entity.entity_id ]]]
fullscreen: false
If i set deep_press: false then everything works fine.
Hello everyone,
So alot of people (@skank) wanna style the tiles on there own way so i did the step add added css variables to change colors and size of the tiles.
So in your config of the card you can now add style and write css. for the css experts you could overwrite every style you want and go freaky. so for the people less familiar with css i added the variables to easily overwrite colors and size of the tile.
Here is the basic css overwrite with all variables and the current default value
- type: "custom:homekit-card"
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
This is available in release 0.4.8
Quick examples:
3 Likes
Cool, thank you, will try right away
Can i adjust the size of icon too? like that?
Will working with template for all icons , work too?
Yes you @skank can it is not a variable but with css you can do everything
you can do this:
style: |
.button-inner .icon {
width:60px; #Default = 50px
height:60px; #Default = 50px
}
.button-inner .icon ha-icon {
width: 50px; #Default = 30px
height:50px; #Default = 30px
}
cool
do i need to start the style with:
–tile-background:
or like .button-inner
Whats the difference between .button-inner .icon and button-inner .icon ha-icon?
what doest my color need to be if i want it transparant when off
like this
So you got these:
:host {
--tile-background: rgba(255, 255, 255, 0.8);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
This are variables you can easily changes.
When you wanna change other things you can write css rules like the one i just shared. (you need to change the .icon and .icon ha-icon to make it all fit this is because of the html structure)
If you wanna change tile background color change --tile-background and --tile-on-background when state is on fully transparent you can set --tile-background: transparent but it is not fully transparent so i think something like this --tile-background: rgba(255, 255, 255, 0.2); if you make 0.2 smaller it is more transparent make it higher it is less transparent 1 is not transparent!
mmm i do something seriously wrong, cause its not changing anything
here’s my code
title: Test
icon: mdi:test-tube
path: test
theme: ios-dark-mode
panel: true
cards:
- type: "custom:homekit-card"
home: false
title: Lichten
enableColumns: true
style: |
:host {
--tile-background: rgba(255, 255, 255, 0.2);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(0, 0, 0, 0.4);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(0, 0, 0, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(0, 0, 0, 0.3);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
.button-inner .icon {
width:60px; #Default = 50px
height:60px; #Default = 50px
}
.button-inner .icon ha-icon {
width: 50px; #Default = 30px
height:50px; #Default = 30px
}
rows:
- row: 1
columns:
- column: 1
tileOnRow: 5
entities:
- title: Inkom
popup:
type: custom:light-popup-card
entities:
- entity: light.inkom
name: Plafondspots
icon: mdi:coach-lampIs it possible to adjust this part, so i get the idea?
Thx
You updated to last version? Maybe if you use HACS use reinstall sometimes it load the old version…
yes i did
gonna reinstall then
It works now, i got to restart everytime if i change smth, normally i dont have to do that…
Only thing left is the icon getting bigger.
But im not sure what to type, you say i need to swap the icon…
code now
title: Test
icon: mdi:test-tube
path: test
theme: ios-dark-mode
panel: true
cards:
- type: "custom:homekit-card"
home: false
title: Lichten
enableColumns: true
style: |
:host {
--tile-background: rgba(0, 0, 0, 0.3);
--tile-border-radius: 12px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: rgba(255, 255, 255, 1);
--tile-name-text-color: rgba(255, 255, 255, 0.7);
--tile-on-name-text-color: rgba(0, 0, 0, 1);
--tile-state-text-color: rgba(255, 255, 255, 0.4);
--tile-on-state-text-color: rgba(0, 0, 0, 1);
--tile-state-changed-text-color: rgb(134, 134, 134);
--tile-unavailable-state-text-color: rgba(255, 255, 255, 0,5);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: rgba(255, 255, 255, 1);
--tile-on-icon-color: #f7d959;
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
}
.button-inner .icon {
width:60px; #Default = 50px
height:60px; #Default = 50px
}
.button-inner .icon ha-icon {
width: 50px; #Default = 30px
height:50px; #Default = 30px
}
rows:
- row: 1
columns:
- column: 1
tileOnRow: 5
entities:
- title: Inkom
popup:
type: custom:light-popup-card
entities:
- entity: light.inkom
name: Plafondspots
icon: mdi:coach-lamp