Can you share your config for media player card
Thx
Sure, I took this from @martheijnen and I added the popup:
- card: 'custom:mini-media-player'
entity: media_player.tv_sala
noPadding: true
wider: true
higher: true
tap_action:
action: navigate
navigation_path: /lovelace/media
hold_action:
action: popup
cardStyle: |
ha-card {
height: 100%;
background: none !important;
box-shadow: none !important;
position: relative;
font-size: 0.5vw !important;
image
}
ha-card{
overflow: hidden !important;
}
:host #primaryProgress{
background: #474A52 !important;
display: flex !important;
height: 100%;
}
cardOptions:
artwork: full-cover
entity: media_player.appletv_soggiorno
hide:
power: true
progress: false
runtime: true
icon: true
name: true
source: true
volume: true
controls: false
popup:
type: 'custom:media_player-popup-card'
actions:
- service: media_player.appletv_soggiorno
service_data:
entity_id: media_player.appletv_soggiorno
name: previous
icon: 'mdi:skip-previous'
- service: media_player.appletv_soggiorno
service_data:
entity_id: media_player.appletv_soggiorno
name: play/pause
icon: 'mdi:play-pause'
- service: media_player.appletv_soggiorno
service_data:
entity_id: media_player.appletv_soggiorno
name: next
icon: 'mdi:skip-next'
1 Like
Thanks for your compliment! I’ll check what I did with style and come back to you within few days!
Nope. Other than delete the .gz, and make the edits that I mention above to the Javascript.
I found out that I actually have the same. But bcuz of the light-colored background i dont see it.
If it’s evening, it auto-switch to night and then I have the same.
I guess it has to do with some of the style-settings but can’t dive deep into it today so sorry
1 Like
Give this a try. I applied your customisations on my view and they work by adding it to the style param of the Homekit-panel definition
style: |
:host {
--tile-background: rgba(10, 10, 10, 0.22);
--tile-border-radius: 5px;
--tile-width: 100px;
--tile-height: 100px;
--tile-on-background: var(--card-background-color);
--tile-name-text-color: var(--disabled-text-color);
--tile-on-name-text-color: var(--primary-text-color);
--tile-state-text-color: var(--disabled-text-color);
--tile-on-state-text-color: var(--paper-item-icon-active-color);
--tile-state-changed-text-color: var(--primary-text-color);
--tile-unavailable-state-text-color: rgba(255, 0, 0, 1);
--tile-value-text-color: var(--primary-text-color);
--tile-icon-color: var(--disabled-text-color);
--tile-on-icon-color: var(--paper-item-icon-active-color);
--tile-width-mobile: 90px;
--tile-height-mobile: 90px;
--tile-icon-size: 24px;
--tile-padding-top: 0
--tile-image-radius: 0;
}
homekit-button .icon.climate {
background-color:#003fff!important;
}
homekit-button .circle {
background-color: #003fff !important;
border-radius: 5px !important;
}
homekit-button.event.button.on {
box-shadow: 0px 0px 1px 1px #0d0035 !important;
}
.icon.image {
position: absolute;
width: 100%;
height: 100%;
left: 0;
top: 0;
z-index: -1;
}
.icon.image img {
height: 100%;
}
}
Can you explain where to put this code? Ik keep getting indent errors.
Hello guys,
Can you suggest me a way to avoid the white border?
If I sent the tile background to “transparent” the entire tile becomes white.
Any suggestion?
Another thing: is there a way to set the “rules” height? From the documentation i read “default:400px”, but I don’t understand how to customize it…
1 Like
Hi @mkhattab,
First your second question 
you want to hide the circle (you can’t change the color) but set hideState: true on the entity to not show it.
Now the first question the popups. In v0.113 or something the popups changed everything was broken. So the style part changed. you need browser_mod (you got this already) and you need card_mod (it’s lovelace thing also by thomas loven) when you have this the style part of the popups changed. Check out lightpopup card on github there is an example with the changed style (https://github.com/DBuit/light-popup-card)
Also you don’t really need the popup_cards: part because the homekit card already has this functionality in the card. but both ways should work.
Hi @NdR,
First the rules height.
My documentation is really bad sorry the 400px is old the height in minimal 150px and will increase when more info is displayed by the rules.
In the style part of the card you can overwrite the min-height with this variable --min-header-height.
The white border you can set noPadding: true on the entity and that should fix it (i hope)
Thank you DBuit!
Firts of all: your documentation is ok (maybe something need to be updated, but nevermind). Your cards are the most appreciated by me.
After trying Homekit Card, I moved to other UI/Themes in order to try them. They are well done, for sure. But always “locked” to their own style.
Then I switched back to your cards, which give us the possibility to style our UI as we want…always =)
Anyway: the “–min-header-height” worked well and also the “noPadding: true”! I also solved the white colored border on the four angles with a bit of Style on the card (see my comment above: border-radius: 0).
1 Like
Sure. Currently I removed it cause of that issue and I decided to use another card to display the Weather.
Anyway, If you want to understand if there is an issue with your card, you can find my “old” config here: Pastebin HomeKit UI .
You can find the weather card at line 82!
Thanks so much @DBuit - installing card-mod did the trick. Light popups now appear properly. The thermostat popups are still broken but I’ll check the style as you said.
Hiding state also got rid of the circle for me. The last thing (I hope) is hiding the “Off” state label when an entity is off. Is this possible?
Hi,
So when a light is off you only want to see the name of the light?
Not possible atm by default but you could do it with conditionalClass by adding a class when the state is off and style the class so it will hide the off state.
Thanks a lot
@DBuit or anyone else
I am trying to write the conditionalClass for this so I can hide the state when off (hide the word Off)
What is the name of the param / property which needs to be hidden?
Hi,
Use this for conditionalstuff:
conditionalClass: >
[[[
var state = states['light.beganegrond'].state;
if (state == "off")
return "hideState";
else
return "";
]]]
and add this to the style part of the card:
.hideState .state {
visibility:hidden; // you can also use display:none; but then the name will go to bottom of that tile
}