Lovelace: custom sidebar card

how to resize card of bottom card

its working, nice
how to center bottom card

@martheijnen @doktordoc

Options for bottomCard are minimal i will work on options to better position the card

@martheijnen, @doktordoc

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 yours

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:
weather tile

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 :slight_smile:

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?