So sorry for all the questions to you all…
@DBuit
I have this code now:
bottomCard:
type: 'custom:mini-media-player'
cardOptions:
entity: media_player.spotify_mart
style: |
ha-card {
border-radius: 12px;
overflow: hidden !important;
box-shadow: none !important;
width: 300px;
height: auto;
align: right;
margin-bottom: 100px
}
hide:
name: true
power: true
source: true
volume: true
views:
!include_dir_merge_list views/
How can I make the width of the mediaplayer be static, and center aligned in the sidebar? If I resize the sidebar///switch to tablet view with other resolution for example, it’s messing up.
here are 2 examples to show.
Thanks !
how to resize card of bottom card
its working, nice
DBuit
May 27, 2020, 8:25am
199
@martheijnen @doktordoc
Options for bottomCard are minimal i will work on options to better position the card
DBuit
May 27, 2020, 8:45am
200
@martheijnen , @doktordoc
Just updated the card: https://github.com/DBuit/sidebar-card/releases/tag/0.1.7.4
bottomCard:
type: custom:mini-media-player
cardOptions:
entity: media_player.keuken
cardStyle: |
:host {
width: 100%;
}
But when you change style of the card it could look weird so you have to tweak more css maybe to make it fit nicely
Thanks, and what about this issue:
The homekit card (panel-true = causing it, because if i disable it, it works…)
DBuit
May 27, 2020, 9:32am
202
Strange more people have that problem, but i don’t… and i have panel = true
Sidebar:
sidebar:
title: "Sidebar title"
digitalClock: true
date: true
bottomcard: true
style: |
:host {
--sidebar-background: rgba(0, 0, 0, 0.5);
--sidebar-text-color: #f0f0f0;
}
.sidebarMenu li.active {
background-color: rgba(35, 39, 41, 0.6)!important;
icon-size: 225px;
}
.digitalClock {
text-align: center;
padding-bottom: 1px;
padding-top: 20px
font-size: 205px;
line-height: 95px;
}
.date {
text-align: center;
}
h1 {
text-align:center;
}
# width in percentage (dont add the %)
width:
mobile: 0
tablet: 15
desktop: 15
sidebarMenu:
- action: navigate
navigation_path: /lovelace/home
name: Home
active: true
icon: mdi:home
- action: navigate
navigation_path: /lovelace/floorplan
name: Floorplan
active: true
icon: mdi:floor-plan
- action: navigate
navigation_path: /lovelace/test
name: test
active: true
icon: mdi:account-cog
- action: navigate
navigation_path: /lovelace/homekittest
name: homekittest
active: true
icon: mdi:account
template: |
<li>
{% if now().hour < 5 %} Goedenacht {{'\U0001F634'}}
{% elif now().hour < 12 %} Goedemorgen {{'\u2615\uFE0F'}}
{% elif now().hour < 18 %} Goedemiddag {{'\U0001F44B\U0001F3FB'}}
{% else %} Goedenavond {{'\U0001F44B\U0001F3FB'}}{% endif %}
</li>
bottomCard:
type: 'custom:mini-media-player'
cardOptions:
entity: media_player.spotify_mart
hide:
name: true
power: true
source: true
volume: true
cardStyle: |
:host {
width: 100%;
}
ha-card {
border-radius: 12px;
overflow: hidden !important;
box-shadow: none !important;
margin-bottom: 42px
}
views:
!include_dir_merge_list views/
The view that is having the issue:
- title: Homekittest
path: homekittest
panel: true
cards:
- type: "custom:homekit-card"
home: true
rules: |
{% if "Vandaag" in states('sensor.blink_gft') %} <li>Vandaag groenebak aan de straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_papier') %} <li>Vandaag oudpapier aan de straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_pmd') %} <li>Vandaag plastic aan de straat</li> {% endif %}
{% if "Vandaag" in states('sensor.blink_restafval') %} <li>Vandaag grijzebak aan de straat</li> {% endif %}
{% if states('sensor.current_lights_on') | float > 0 %} <li>{{states('sensor.current_lights_on')}} lampen aan</li> {% endif %}
{% if states('sensor.current_media_players_on') | float > 0 %} <li>{{states('sensor.current_media_players_on')}} speakers aan</li> {% endif %}
title: "Demo"
useBrightness: false
titleColor: "#FFF"
enableColumns: true
# statePositionTop: true
entities:
rows:
- row: 1
columns:
- column: 1
tileOnRow: 4
entities:
- title: Lichtstrip
popup:
type: custom:light-popup-card
scenesInARow: 2
brightnessWidth: 130px
brightnessHeight: 350px
switchWidth: 110px
switchHeight: 300px
entities:
- entity: light.beganegrond
name: Lichtstrip
icon: mdi:led-strip-variant
popupExtend:
actions:
- service: scene.turn_on
service_data:
entity_id: scene.ontspannen
color: "#FDCA64"
name: ontspannen
- service: scene.turn_on
service_data:
entity_id: scene.helder
color: "#FFE7C0"
name: helder
- service: scene.turn_on
service_data:
entity_id: scene.concentreren
color: "#BBEEF3"
name: concentreren
- service: scene.turn_on
service_data:
entity_id: scene.energie
color: "#8BCBDD"
name: energie
- entity: light.zithoek
name: Zithoek
icon: mdi:floor-lamp
- entity: light.eettafel
name: Eettafel
icon: mdi:ceiling-light
- entity: light.kookeiland
name: Kookeiland
icon: mdi:ceiling-light
- column: 2
tileOnRow: 3
entities:
- title: Buiten verlichting
entities:
- entity: light.voordeurlicht
name: Voordeur
- entity: light.buitenverlichting_achter
name: Achter
- entity: light.buitenverlichting_bomen
spin: true
name: Bomen
- row: 2
columns:
- column: 1
tileOnRow: 4
entities:
- title: "Overig"
entities:
- card: custom:blinds-tile-card
tap_action:
action: more-info
entity: input_number.blindone
cardOptions:
name: Luxaflex
entities:
- entity: input_number.blindone
positions:
- 60
- 0
- -45
- entity: input_number.blindtwo
positions:
- 75
- 0
- -50
- entity: input_number.blindthree
positions:
- -65
- 0
- 50
- card: custom:mini-graph-card
noPadding: true
cardOptions:
entities:
- sensor.wasmachine_energieverbruik
- entity: binary_sensor.wasmachine_status
- entity: weather.weersverwachting
- column: 2
tileOnRow: 3
entities:
- title: Muziek
entities:
- entity: media_player.keuken
icon: mdi:speaker-wireless
offIcon: 'mdi:garage'
offStates:
- "off"
- "unavailable"
- "paused"
- entity: media_player.woonkamer
icon: mdi:speaker-wireless
offStates:
- "off"
- "unavailable"
- "paused"
- entity: media_player.slaapkamer
icon: mdi:speaker-wireless
offStates:
- "off"
- "unavailable"
- "paused"
- row: 3
columns:
- column: 3
entities:
- title: Overig
entities:
- entity: switch.doorbell_chime_active
spin: true
- entity: switch.doorbell_chime
- entity: switch.doorbell_restart
- entity: binary_sensor.doorbell_button
I know entities in the card doenst exist and such… Just making the built of the interface/design first before using real entities and such.
Thanks for all your effort @DBuit
DBuit
martheijnen
The weather card on the screenshot is the standard weather card with CSS styling.
You use homekit card ?
I don’t know what weather card you mean, sorry.
I only have name of city and sunny
This is the code for that weather think
- entity: weather.home
type: weather-forecast
style: |
ha-card {
background-color: var(--primary-background-color);
border-radius: 15px;
margin: 20px;
box-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);
{% else %}
-8px -8px 8px 0 rgba(50, 50, 50,.5),8px 8px 8px 0 rgba(0,0,0,.15);
{% endif %}
}
DBuit
May 27, 2020, 12:02pm
213
Did you get this working with my other card? homekit? this won’t show like yours does??
No, this is not a homekit card. My only (yet) homekit card is the one I shared earlier with you Here
The homekit card is showing the sidebar behind the homekit card on mobile, wile width is set to 0. Can you help me with that?
DBuit
May 27, 2020, 1:06pm
216
Cool i like the look if you or someone else wanna use it in homekit card as a tile you can do it like this:
- card: weather-forecast
noPadding: true
cardOptions:
entity: weather.weersverwachting
cardStyle: |
ha-card {
padding: 5px!important;
display: flex!important;
flex-direction: column!important;
}
.content {
display: flex!important;
flex-direction: row!important;
}
.icon-image {
min-width: auto!important;
}
.icon-image > * {
height: 32px!important;
flex: 0 0 32px!important;
}
.info .name-state {
font-weight: 500;
}
.info .name-state .state {
font-size:14px!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: 16px!important;
}
.info .temp-attribute .temp span {
font-size: 14px!important;
}
.forecast {
font-size: 10px!important;
padding-top: 5px!important;
}
.forecast-image-icon {
padding:0!important;
}
.forecast-image-icon > * {
width:20px!important;
height:20px!important;
margin: 0 auto!important;
}
.forecast .temp {
margin-top:0!important;
font-size:12px!important;
}
and it looks like this:
3 Likes
Thanks! Is there any fix on the sidebar with the homekit card? Maybe, if you don’t have the sidebar issue with your homekit card… can you share your homekit ui config part? It’s a good start
