Unfortunately, that didnāt work, but thank you anyway!
Iāve now created a template where a sensor counts the number of lights switched on in each room (area). Essentially the same as here for the entire area.
Then this works too:
badge:
show: >
[[[ return Number(states['sensor.lichter_an_flur_eg']?.state || 0) > 0; ]]]
color: yellow
THANKS A LOT 
i think itĀ“s selected_color: on a route.
...
routes:
- icon: mdi:home-outline
label: Home
selected_color: red
url: >
/dashboard-main/home
...
or give styles:a try:
styles:
.navbar-card.desktop{
.button.active {
--icon-primary-color: red;
}
}
Hi all, hereās a snippet of my template I defined in the raw config editor of my dashboard:
navbar-templates:
jt_nav:
routes:
- url: /new-dashboard/0
icon: mdi:home
label: Home
- url: /new-dashboard/lights
icon: mdi:lightbulb-group
label: Lights
hold_action:
action: navigate
navigation_path: /config/devices/dashboard
badge:
show: true
count: |-
[[[return Object.keys(states)
.filter(id => id.startsWith('light.') && states[id].state === 'on')
.filter(id => {
const areaId = hass.entities?.[id]?.area_id;
return areaId !== 'outside';
}).length;]]]
- url: /config/automation/dashboard
icon: mdi:creation
label: Automations
- url: /config/dashboard
icon: mdi:cog
label: Settings
- icon: mdi:dots-horizontal
label: More
tap_action:
action: open-popup
popup:
- icon: mdi:cog
url: /config/dashboard
- icon: mdi:hammer
url: /developer-tools/yaml
- icon: mdi:power
tap_action:
action: call-service
service: homeassistant.restart
service_data: {}
confirmation:
text: Are you sure you want to restart Home Assistant?
views:
Template is working fine when I reference it in other views. However, since I moved this section up to the top of the config, I donāt see this card in the edit view anymore, so how am I supposed to make changes to it via the UI?
Can the popup be styled in two columns? I have this with 11 popup entries. Can I putthose in two columns so they look better?
In other words, can a popup have a grid?
Have you managed to get templates working?
It is a little tricky to work it out at first but once you get a template working on another view it is easy to replicate.
The main points are:
No I never did get it to work but I think (not 100% sure) it was for a simple reason that was unclear to me at first.
Templates appear to work for views within a dashboard, but not across dashboards. And my dashboards are complex enough that I donāt use views much so.
yep - correct. Templates will only work within a dashboard. You would need to add the template to each dashboard for your use case I think
Well I appreciate your effort just the same. Good news is that my dashboard navigation is fairly static.
This will need some tweaking to look nice, but adding something like this to the styles gives you 2 columns:
.navbar-popup.open-up {
display: grid !important;
grid-template-columns: 1fr 1fr;
grid-gap: 12px;
}
Nice start, I can firm that this looks great ā¦ with one issue.
I have 7 navbar icons, 6 have popups and only that one I want 2 columns.
So I am trying to target one popup of many with 2 vs 1 column,
But not this one
First popup is āLightsā second one is āHouseholdā ā¦ same navbar
Iāve installed NavBar Card and I noticed that -when in dark mode on my iPhone- the NavBar is white. I am stuggling with css to make it dark for dark mode. Any advise?
Use your background map and apply transparency:
background: rgb( from var(--ha-card-background, var(--card-background-color, "#fff")) r g b / 0.5);
Hello,
how do I delete this space?
type: grid
cards:
- type: custom:navbar-card
desktop:
position: top
mobile:
floating: false
position: bottom
routes:
- icon: local:icone/home-blank
label: Home
url: /dashboard-mathieu/smartphone
icon_color: white
- hold_action:
action: navigate
navigation_path: /config/devices/dashboard
icon: local:icone/lightbulb-on
label: LumiĆØres
url: /dashboard-mathieu/lumieres
icon_color: white
- icon: local:icone/temperature-sun
label: TempƩratures
url: /dashboard-mathieu/meteo
icon_color: white
- icon: local:icone/music_video
label: MĆ©dia
url: /dashboard-mathieu/media
icon_color: white
- icon: local:icone/camera-cctv
label: CamƩras
url: /dashboard-mathieu/camera
icon_color: white
- icon: local:icone/pool
label: Piscine
url: /dashboard-mathieu/piscine
icon_color: white
- icon: local:icone/sprinkler
label: Arrosage
url: /dashboard-mathieu/arrosage
icon_color: white
- icon: local:icone/screwdriver-wrench
label: Outils
url: /dashboard-mathieu/outils
icon_color: white
- icon: mdi:alert-circle-outline
label: ""
url: /dashboard-mathieu/test
styles: |
ha-card {
background: transparent !important;
box-shadow: none !important;
padding: 0 !important; /* supprime les marges internes */
border-radius: 0 !important;
--navbar-box-shadow: none;
--navbar-background-color: transparent;
--navbar-route-icon-size: 50px;
--navbar-route-label-font-size: 16px;
}
grid_options:
columns: 48
rows: auto
column_span: 4
I am not really sure where to place this and how!?
This is my CSS config now:
.navbar-card,
.navbar-card.mobile.floating,
.navbar-card.desktop,
.media-player {
border-radius: 34px !important;
background-color: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
/* zichtbare rand */
border: 1px solid rgba(0, 0, 0, 0.25) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.35),
0 8px 24px rgba(0, 0, 0, 0.12);
}
.navbar-card.mobile.floating {
bottom: 20px !important;
}
.navbar-card.desktop {
padding: 0 !important;
}
Hi, installed 1.3 / when I use the UI, The only options for the desktop are: Min width / pop up label / Hidden. The other options I saw on your video & instructions are not showing. Kind of new at this, Any thoughts?
I just put that
styles: |
.navbar-card {
--navbar-primary-color: var(--primary-color, var(--state-active-color));
background: rgb( from var(--ha-card-background, var(--card-background-color, "#fff")) r g b / 0.5);
backdrop-filter: blur(33px);
'-webkit-backdrop-filter': blur(33px) !important;
}
So for you it would be
styles: |-
.navbar-card {
--navbar-primary-color: var(--primary-color, var(--state-active-color));
background: rgb( from var(--ha-card-background, var(--card-background-color, "#fff")) r g b / 0.5);
backdrop-filter: blur(40px);
'-webkit-backdrop-filter': blur(40px) !important;
}
.navbar-card.mobile.floating,
.media-player {
border-radius: 34px !important;
background-color: rgba(255, 255, 255, 0.92) !important;
backdrop-filter: blur(40px);
-webkit-backdrop-filter: blur(40px);
/* zichtbare rand */
border: 1px solid rgba(0, 0, 0, 0.25) !important;
box-shadow:
inset 0 0 0 1px rgba(255, 255, 255, 0.35),
0 8px 24px rgba(0, 0, 0, 0.12);
}
.navbar-card.mobile.floating { bottom: 20px !important; }
.navbar-card.desktop { padding: 0 !important; }
Try to avoid using hard-coded colors because when you use dark mode, or another theme, your colors wonāt follow and youāll have to redo everything each time.
Hi
The Media player for desktop can always be visible even if itās not playing music?
Thanks
** edit: ** I think I have some sort of cacheing issue. I thought if I do a hard reload, it should update my changes to the yaml. But it doesnāt seem to. Iām not sure how to force it to reload. My navbar config is in a lovelace_gen card for reusability. I wonder if that has anything to do with it
Great card! I am having a bit of trouble trying to style the icon and text color for unselected items. I have tried a number of things. Below is an example:
styles: |
.navbar-card {
background: rgba(255, 255, 255, 0.4);
backdrop-filter: blur(10px);
border: none;
box-shadow: 0 10px 15px rgba(0, 0, 0, 0.1) !important;
}
.button{
--icon-primary-color: red;
}
ha-ripple {
display: none !important;
}
I am trying to make them more legible because depending on the background they can blend in.
