Any ideas anyone? 
Iām trying to setup a weather card inside a button but having troubles to get it right
Although is set wide to 3 he doesnt do it
What am i doing wrong?
How do i get the weather inside it good?
Edit: can it be sthat the higherSize and widerSize setting doesnt work?
I dont get any result and if i use āwider: trueā it does work. However still the card isnt shown as expected
I want it like this inside the button
png file maker
2nd question: anyone have buttons working in this homekit style card AND the sidebar card?
In both cards, here they dont work:
Not using url, not using navigation_path.
Hereās my code
- card: custom:button-card
noPadding: true
cardOptions:
icon: mdi:access-point
tap_action:
action: url
url: "!secret url_unifi_controller"
show_state: true
name: Unifi Controller
styles:
card:
- width: 120px
- height: 120px
- font-size: 15px
name:
- justify-self: start
- padding-left: 10px
- font-weight: bold
- padding-bottom: 25px
img_cell:
- justify-content: start
- padding-left: 25px
icon:
- justify-self: start3th question: anyone have a custom check button card working inside a tile?
Here no luck at all
quick question:
how did you manage to implement the recent movies to different cards?
Iām using the plex sensor but its not working because the position will not be recognized.
I am a total newbie when it comes to adding custom cards. I am not sure what I am doing wrong but I canāt get this to work.
What I have done is to add the custom repo and the resources. However the resource is added through config - Lovelace dashboards - resources is this correct?
After that I do a copy/paste of the first code on the GitHub page and add to a manual card in Lovelace. I only get ācustom card is not configured/does not existā
What I am doing wrongā¦ I really like this layout and want to build my whole dashboard around it. So if someone could be really really detailed on how to get this work on the latest HA version (2021.11.1) I would be very grateful.
My suggestion would be to Google adding custom repo to home Assistant and read the github Page of This card. All you need is there. TƄ start out you need hacs to make it easy fƶr you. You can allso search homeassistant forum here for your questions. We all have been here and the answers to your question has been Answerd before. Gl
Anyone know any solution for all or some of the 3 questions please?
Edit: solved question 2
So only remains a good weather tile and the ability to do the check button , not sure of that one
SOLVED
Hi,
HACS is installed. Custom repo is added. I have added the resource code under config ā lovelace dashboard ā resources
And then copy/paste the code of the first card on the github page, I have played around with the intendents to see if it differs when using the lovelace ui instead of config yaml
I have tried to add the code directly to the dashboard and not via a custom card but still nothingā¦
Willing to give such a working weather forecast but for
tiles wide 3 and heigth 2 too?
This is how mine looks now
And this is the code
card: weather-forecast
noPadding: true
wider: true
widerSize: 3
higher: true
cardOptions:
entity: weather.thuis
cardStyle: |
ha-card {
padding: 5px!important;
flex-direction: column!important;
box-shadow: none!important;
border-radius:0!important;
}
.content {
display: flex!important;
flex-direction: row!important;
}
.icon-image {
min-width: auto!important;
}
.icon-image > * {
height: 57px!important;
flex: 0 0 70px!important;
}
.info .name-state {
font-weight: 500;
}
.info .name-state .state {
font-size:20px!important;
text-align:right;
}
.info .name-state .name {
font-size:14px!important;
}
.info .temp-attribute {
width:100%;
font-weight: 500;
}
.info .temp-attribute .temp {
font-size: 25px!important;
}
.info .temp-attribute .temp span {
font-size: 25px!important;
}
.forecast {
font-size: 25px!important;
padding-top: 5px!important;
}
.forecast-image-icon {
padding:0!important;
}
.forecast-image-icon > * {
width:50px!important;
height:50px!important;
margin: 0 auto!important;
}
.forecast .temp {
margin-top:0!important;
font-size:15px!important;
}
.forecast .templow {
display:none;
} But you see the text alignment is a bit a mess
- the button doesnt fill completely
I tried also with this code:
card: weather-forecast
noPadding: true
wider: true
widerSize: 3
higher: true
higherSize: 2
cardOptions:
entity: weather.thuis
cardStyle: |
:host {
display: flex;
width: 100%;
height: 100%;
}
But then i got
Im trying to get the pop-up function to work. My code looks like this:
type: custom:homekit-card
panel: true
path: Home
enableColumns: true
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;
--min-header-height: 150px;
--tile-icon-size: 30px;
--tile-image-radius: 100%
--slider-width: 120px;
--slider-height: 120px;
}
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Vardagsrum
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.vardagsrum
name: Vardagsrum
Shouldnāt this trigger the pop-up?
I adjusted width and heigth of my tiles ā¦
As i did my custom button card is doing strange stuff
As you can see here, my second button is normal size but the custom button doesnt fill the tile
However i normally add ānoPadding: trueā, but when i do now, the tile size gets bigger?
I have no idea why
Any idea why? It seems after changing the style of the homekit button (especialaly width and heigth), the noPadding settings doenst change with it?
Hereās my adjusted tile setting
style: |
:host {
--tile-background: rgb(255, 255, 255);
--tile-icon-size: 40px;
--tile-border-radius: 10px;
--tile-width: 85px;
--tile-height: 85px;
--tile-on-background: #464446;
--tile-name-text-color: #464446;
--tile-on-name-text-color: rgba(255, 255, 255, 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, 255, 255, 0,5);
--tile-value-text-color: rgba(255, 0, 0, 1);
--tile-icon-color: #464446;
--tile-on-icon-color: rgba(255, 255, 255, 1);
--tile-width-mobile: 85px;
--tile-height-mobile: 85px;
}
.button-inner .icon {
width:55px;
height:55px;
}
.button-inner .icon ha-icon {
width: 40px;
height:40px;
}Edit: Watching on mobile i dont see this strange thing
Why do we get 0 response here?
Search in the thread, this has been solved before. And you can find working examples aswell. Gl
I am using the working solutions that are mentioned here but it get strange results as i said.
For the weather forecast card , i am using your working code, but i want it to be widerSize:3 and higherSize: 2 but that aint working either.
I also dont understand if i use noPAdding: true, why it makes the card largerā¦ (it is said in this topic to use it) but since i adjusted the tile width and heigth, the noPadding behaves strangely
So please, iām desperate to find the solution
Anyone has tiles used for input selects ?
If i set the input select as entity, when i push the tile, i cant select something
Iām using a few cards (horizontal stack, browser mod, mod card, light popup and switch popup) in combination here to get the desired effect of two popups side by side. Iām trying to get a handle on the final styling of the card.
Can anyone tell me how to make the white background behind the switches transparent?
Iām also not sure why the fan switch is whiteā¦it should be colored like a slider.
Thanks!
Code:
type: button
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: null
hide_header: true
type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:light-popup-card
entity: switch.kitchen_lights
fullscreen: false
switchWidth: 150px
switchHeight: 380px
cardStyle: |
background-color:#FFF;
- type: custom:mod-card
card:
type: custom:switch-popup-card
entity: switch.basement_bathroom_exhaust_fan
icon: mdi:fan
noActiveState: '-'
entity_value_path: attributes.speed
service: fan.set_preset_mode
service_data: null
entity_id: this
speed: value
entities:
- switch.basement_bathroom_exhaust_fan
buttons:
- icon: mdi:fan
value: high
name: High
color: '#000000'
icon_color: rgba(255,255,255,1)
- icon: mdi:fan
value: medium
name: Medium
color: '#000000'
icon_color: rgba(255,255,255,1)
- icon: mdi:fan
value: low
name: Low
color: '#000000'
icon_color: rgba(255,255,255,1)
- icon: mdi:fan-off
value: 'off'
name: 'Off'
fullscreen: false
switchWidth: 150px
switchHeight: 380px
target: {}
name: Fan | Light Combo
icon: mdi:ceiling-fan-light
Picture:
Iām having the same issue
The background is white, and the buttons arent visible for the mediaplayer-popup-card
Hereās my code
entity: media_player.woonkamer
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.woonkamer
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Woonkamer
card:
type: custom:media_player-popup-card
entity: media_player.woonkamer
icon: none
fullscreen: false
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-nextWell I made some progress, I think this might work for youā¦to some degree. Not sure about your button visibility but it fixes the background
type: button
tap_action:
action: call-service
service: browser_mod.popup
service_data:
title: null
hide_header: true
type: custom:mod-card
card:
type: horizontal-stack
cards:
- type: custom:mod-card
card:
type: custom:light-popup-card
entity: switch.kitchen_lights
fullscreen: false
switchWidth: 150px
switchHeight: 380px
cardStyle: |
background-color:#FFF;
- type: custom:mod-card
card:
type: custom:switch-popup-card
entity: switch.basement_bathroom_exhaust_fan
icon: mdi:fan
noActiveState: '-'
entity_value_path: attributes.speed
service: fan.set_preset_mode
service_data: null
entity_id: this
speed: value
entities:
- switch.basement_bathroom_exhaust_fan
buttons:
- icon: mdi:fan
value: high
name: High
color: '#000000'
icon_color: rgba(255,255,255,1)
- icon: mdi:fan
value: medium
name: Medium
color: '#000000'
icon_color: rgba(255,255,255,1)
- icon: mdi:fan
value: low
name: Low
color: '#000000'
icon_color: rgba(255,255,255,1)
- icon: mdi:fan-off
value: 'off'
name: 'Off'
fullscreen: false
switchWidth: 150px
switchHeight: 380px
style:
$: |
.mdc-dialog .mdc-dialog__container {
width: 100%;
}
.mdc-dialog .mdc-dialog__container .mdc-dialog__surface {
#width:100%;
box-shadow:none;
}
.: |
:host {
--mdc-theme-surface: rgba(0,0,0,0);
--secondary-background-color: rgba(0,0,0,0);
--ha-card-background: rgba(0,0,0,0);
--mdc-dialog-scrim-color: rgba(0,0,0,0.8);
--mdc-dialog-min-height: 100%;
--mdc-dialog-min-width: 100%;
--mdc-dialog-max-width: 100%;
}
mwc-icon-button {
color: #FFF;
}
target: {}
name: Fan | Light Combo
icon: mdi:ceiling-fan-light
icon_height: 30px
Mmm
Tried but didnt fix it here
Hereās my code, dont you use the homekit style button? I see you use the mod card
column: 2
tileOnRow: 3
entities:
- title: Mediaspelers
entities:
- entity: media_player.woonkamer
tap_action:
action: call-service
service: media_player.toggle
service_data:
entity_id: media_player.woonkamer
styles:
card:
- background: rgba(0,0,0,0)
hold_action:
action: fire-dom-event
browser_mod:
command: popup
title: Woonkamer
card:
type: custom:media_player-popup-card
entity: media_player.woonkamer
icon: none
fullscreen: false
cardStyle: |
background-color:#FFF;
actions:
- service: media_player.media_previous_track
service_data:
entity_id: this
name: previous
icon: mdi:skip-previous
- service: media_player.media_play_pause
service_data:
entity_id: this
name: play/pause
icon: mdi:play-pause
- service: media_player.media_next_track
service_data:
entity_id: this
name: next
icon: mdi:skip-nextAfter the latest HA updates, none of the mode iconās are working anymore. You can see from the screenshot that they are still there and also clickable, but no icon is shown. I saw that there was a issue logged on your github as well for this. @DBuit could you please fix this?
Yes the only way I could get everything I was doing to work was to use custom button card and then combine card mod, horizontal stack, the popup light and popup switch and then mod-card to apply the styling to those popups. It ends up being a lot to get it all working. I donāt know if it would work if the top level button on my dashboard was the homekit button.