This is great and I am trying to incorporate it into my own setup. I am curious. I have multiple timers that are activated based on different automations, but each of the timers is always the same. Would that still require all of the code you have or could I trim some of it out?
would anyone know how I can remove this tap_action from base.yaml?
It’s causing an error popup on fully kiosk browser and it’s driving me mad. Seems to be related to the fully kiosk integration but there doesn’t appear to be a fix for it, yet.
commenting out the lines is causing the dashboard not to load, so obviosuly I need to edit the code but not sure how to approach it.
fully kiosk error:
Failed to load sound: wrong URL or unsupported format?
base.yaml
tap_action:
ui_sound_tablet: |
[[[
let screensaver = states[variables.entity_tablet] === undefined ||
states[variables.entity_tablet].state;
if (variables.state === 'off' && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/on.m4a',
media_content_type: 'music'
});
}
if (variables.state_on && screensaver === 'off') {
hass.callService('media_player', 'play_media', {
entity_id: variables.entity_browser_mod,
media_content_id: '/local/sound/off.m4a',
media_content_type: 'music'
});
}
]]]
Hi, if you don’t want to use the ui_sound_tablet, can you not just delete that entire block of code, leaving the ‘card bounce’ section remaining:
tap_action:
card_bounce: |
[[[ etc etc etc
Delete this post… Figured it out
It’s Poppins
1 Like
How can I use this? Could you share the config? I know I need to upload the fonts in the Fonts folder and do some additional config in fonts.css
add the font link in resources (remove the last comma if it’s your last line)
{ url: 'https://fonts.googleapis.com/css2?family=Poppins:wght@100;200;300;400;500;600;700;800;900&display=swap', type: css },
you can remove any of the font weights from the url you’re not going to use
change the primary-font-family in tablet.yaml
primary-font-family: Poppins, Roboto, system-ui
adjust font weights as needed in css rules in tablet.yaml
1 Like
You should share your HA on GitHub. You have great ideas and solutions 
2 Likes
could u share your config, this is exactly what i need (with fixxed camera ;))
This morning for some reason, all my lights when on, show True as status_display and the button doesn’t go white. When off it says off. Anyone else has this?
Could you share your hole config? Its amazing and the temperature card etc. is exactly what i need (only missing is shutter ;)).
Hey could you share the sidebar edit for solar?
would love to see it 
<3
3 Likes
I’ve searched three times this topic because I know i’ve seen it once. But I can’t find it.
How can I have my 4 bottom icons be all the way down the sidebar. Always staying at the bottom of the side bar?
I did find this from Mathias:
But I have to admit that I don’t understand it.
Post your code for the sidebar here…
Thanks
#################################################
# #
# SIDEBAR #
# #
#################################################
- type: vertical-stack
view_layout:
grid-area: sidebar
cards:
- type: custom:button-card
entity: sensor.template_ptime
template:
- ptime
# Added Weather-forcast Card
- type: weather-forecast
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
show_current: true
show_forecast: false
secondary_info_attribute: precipitation
name: Culver City
# Clock-Weather-Card
- type: custom:clock-weather-card
style: |
ha-card {
background: transparent !important;
color: #fff !important;
overflow: hidden !important;
box-shadow: none !important;
border: none !important;
}
entity: weather.openweathermap
sun_entity: sun.sun
weather_icon_type: line
animated_icon: true
forecast_rows: 5
locale: en-GB
time_pattern: HH:mm
time_format: 24
date_pattern: ccc, d.MM.yy
hide_today_section: true
hide_forecast_section: false
hide_clock: true
hide_date: true
hourly_forecast: false
use_browser_time: true
time_zone: null
- type: "custom:atomic-calendar-revive"
maxDaysToShow: 3
showLoader: true
startDaysAhead: 3
styles:
card:
- border-width: 0
entities:
- entity: calendar.family
name: 'Family'
color: blue
blocklist: '(Zoom)|(word2)'
- entity: calendar.formula_1
name: 'Formula 1'
color: red
- entity: calendar.holidays_in_united_state
name: 'Holidays'
# Sidebar Template
- type: custom:button-card
entity: sensor.template_sidebar
template: sidebar
styles:
card:
- border-width: 0
# Added bottom buttons
- type: horizontal-stack
cards:
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:spotify
icon_color: green
hold_action:
action: none
tap_action: !include popup/spotify.yaml
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto
icon_color: amber
hold_action:
action: none
tap_action: !include popup/all_lights_mushroom.yaml
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:lightbulb-auto-outline
icon_color: brown
hold_action:
action: none
tap_action:
action: call-service
service: scene.turn_on
service_data:
transition: 5
target:
entity_id: scene.living_room_tropical_twilight
- type: custom:mushroom-entity-card
style: |
ha-card {
background: transparent !important;
overflow: hidden !important;
box-shadow: none !important;
}
entity: sun.sun
vertical: true
primary_info: none
secondary_info: none
icon: mdi:radio
icon_color: deep-orange
hold_action:
action: none
tap_action: !include popup/all_lights_mushroom.yaml
Dear Community,
I’m facing an issue and I hope you can help me out. In my sidebar, I have the battery status displayed, but there’s always a distracting border around the battery icon. I’ve already tried to remove the border with different settings, but so far, without success.
Here is the current code I’m using to display the battery status in my sidebar:
- type: ‘custom:bar-card’ entities:
- entity: sensor.4ke_id_state_of_charge name: Battery Status min: 0 max: 100 severity:
- value: 20 color: ‘#ff0000’
- value: 50 color: ‘#ffae00’
- value: 100 color: ‘#00ff00’ icon: ‘mdi:battery’
- entity: sensor.4ke_id_state_of_charge name: Battery Status min: 0 max: 100 severity:
How can I get rid of the border?
Please don’t mind the current chaos; I’m trying to design the sidebar the way I want it, and then I’ll work on the rest. Any ideas regarding the vehicle’s charge status are also welcome
Best regards, Sabrina
So I have 90% of this setup the way I want, but I cannot get the remaining time to show in the center of my circle. I think it is because I don’t have the variables.circle_input defined. I don’t see that defined in your code either. How do I do that?