how to resize card of bottom card
its working, nice
how to center bottom card
Options for bottomCard are minimal i will work on options to better position the card
Just updated the card: https://github.com/DBuit/sidebar-card/releases/tag/0.1.7.4
You can do something like this for example:
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…)
is showing the sidebar, even when sidebar is 0 on phone example of not good and good:
Strange more people have that problem, but i don’t… and i have panel = true
What is your config? can you share the full config of you sidebar
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
Thanks for good work, you are awesome
martheijnen
What is that weather card
The weather card on the screenshot is the standard weather card with CSS styling.
You use homekit card ?
If so how did you implement in 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 %}
}
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?
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:
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
I don’t have the problem with the sidebar even when i use your config.
You screenshot is this on a real smartphone? or pc browser? which browser?