i tried googling and tried different examples people had didnt work
id like to increase the Top icons make them bigger
and id like to change the color of Blue to a Different color and or Clear
same with side bar. how do i do that ?
What are the Top icons?
The following theme variables can be used:
app-header-background-color
app-header-selection-bar-color
sidebar-background-color
I am not aware of any variable to control the icons size, but I think we could add that.
as for the Top Icons… you know the icons or well names of each Tab you add at the top basiclly a page name you can change to an Icon… id like to icrease the icon size… as making a touch screen using a 21" -32" tv for my mother to use to touch on the wall and i find the buttons small i working with 19" laptop so i wanna make it bigger for Visual Impared people
as for the app-header
where you place it to work?
right now ive got it at the top of the Raw edit of the dashboard
primary-color: ‘#ffffff’
app-header-text-color: ‘#ffffff’
#app-header-background-color: ‘#8978a0’
app-header-background-color: transparent
title: main
style:
.: |
ha-card {
background-color: transparent !important;
box-shadow: none !important;
}
kiosk_mode:
user_settings:
- users:
- temp
- temp2
hide_sidebar: true
views:
- path: default_view
i also placed it in the lovelace-ui.yami located in the root with the configuration.yaml
but it still doesnt change color
where abouts do i place those codes i tried the transparent ha card that didnt help either i just randomly google and try other peoples codes as i find there is not 1 way to do things i see so i just trial and error everyones stuff
and if things got too bad id move to a 65" tv with touch overlay so you can see buttons easier to press
As I wrote, those are theme variables, so they need to put them into a custom HA theme that you can then select/apply from your user profile. See the docs.
so what did i do wrong. it doesnt like themes and headerthemese line
frontend:
#Theme For The Background and Button Cards
##########################################
themes: !include_dir_merge_named themes
#Theme For The Top Bar To Clear background
##########################################
# primary-color: '#ffffff'
# app-header-text-color: '#ffffff'
# app-header-background-color: ‘#8978a0’
#app-header-background-color: transparent
#app-header-background-color: '#ffffff'
headertheme:
app-header-background-color: '#ffffff'
app-header-selection-bar-color: '#ffffff'
sidebar-background-color: '#ffffff'
# app-header-background-color: red
# app-header-selection-bar-color: blue
# sidebar-background-color: transparent
Error loading /config/configuration.yaml: while parsing a block mapping
in “/config/configuration.yaml”, line 20, column 3
expected , but found ‘’
in “/config/configuration.yaml”, line 28, column 5
i fixed spacing and got error it didnt like my headertheme name
i didnt want happy or sad as the example from the link you sent
Invalid config for [frontend]: [headertheme] is an invalid option for [frontend]. Check: frontend->frontend->headertheme. (See /config/configuration.yaml, line 19).
remember explain it in detail as i still noobie dunno what to do with it
and i added above configuration yaml file
and i dunno where to check for Front end->front end where is that located?
i found the theme under my user name… guess it didnt load the headertheme
and is background color: transparant what i want to be clear
was hoping there was a clear or transparent in those themes listed in there but there wasnt
Either use the !include_dir_merge_named themes approach or specify your theme directly in the configuration.yaml. The mixture that you have will not work.
Something like this:
frontend:
themes:
headertheme:
app-header-background-color: "#ffffff"
app-header-selection-bar-color: "#ffffff"
sidebar-background-color: "#ffffff"
thats what i thought i had? but i broke HA at the moment
i thought i had it like that
frontend:
themes: !include_dir_merge_named themes
headertheme:
app-header-background-color: “#ffffff”
app-header-selection-bar-color: “#ffffff”
sidebar-background-color: “#ffffff”
but thats when the errors started… or you cant do both? as how do you load up both themes?
as i know i remmed out
a different themes one
and HA is broken i had made a test.yaml i copied the nord.yaml in the themes folder
i changed nord: to test:
and added
app-header-background-color: “#ffffff”
app-header-selection-bar-color: “#ffffff”
sidebar-background-color: “#ffffff”
and i broke HA its in safe mode
Logger: frontend.js.latest.202101277
Source: components/system_log/init.py:190
First occurred: 10:49:48 AM (1 occurrences)
Last logged: 10:49:48 AM
http://192.168.0.12:8123/hacsfiles/clock-card/clock-card.js:1:5 SyntaxError: unexpected token: identifier
i deleted the test.yaml and rebooted HA but it wont come out of safe mode i didnt do any changes other then add those 3 lines in
in a test.yaml i did a copy of nord.yaml
As I said don’t mix the two approaches. If you already have existing themes in a themes folder that you include in your configuration, then add your new theme in that folder as well as a new theme file.
well i dont know??
i have
home-assistant-community-themes
ios-themes
you seen the code above
i then went into the iso-themes
did a copy of nord.yaml to test.yaml
i added 3 lines of your code
i did a server restart
it lose the themses under user account
i did a server reboot
and it went into safe mode
i then deleted the test.yaml
i did a reboot again
and still in safe mode
i edit the configuration file
and all i have unremmed is
frontend:
#Theme For The Background and Button Cards
##########################################
themes: !include_dir_merge_named themes
to go back to what i had before still no goo
so that one error is gone
and all the notifications is is
Loading error log…
doesnt do anything but that just sits there
when you goto configuration check configuration i get this error
Invalid config for [frontend]: [homeassistant] is an invalid option for [frontend]. Check: frontend->frontend->homeassistant. (See /config/configuration.yaml, line 19).
Component error: hacs - Integration ‘hacs’ not found.
so i remmed out the frontend: and themese:
restarted so it let me back in
if i un rem
frontend:
themes: !include_dir_merge_named themes
and check configuration it gives me error
Invalid config for [frontend]: [homeassistant] is an invalid option for [frontend]. Check: frontend->frontend->homeassistant. (See /config/configuration.yaml, line 18).
line 18 is frontend:
so how i fix that?
update:… fixed it the next line homeassistant: had a space in front that messed it up
ill do that again make a yaml file… hopefully no issues
ok thank you so far i appreciate … got it to work in a
headertheme.yaml … but i cant get transparent to work… is it a special code?
i did
headertheme:
app-header-background-color: transparent #"#ffffff"
app-header-selection-bar-color: transparent #"#ffffff"
sidebar-background-color: transparent #"#ffffff"
in my headertheme.yaml
it actually goes back to blue… is ia a “#000000” something like that for transparent?
alright i was wrong doesnt work
so my yamil file is
headertheme:
app-header-background-color: "#c41230"
app-header-selection-bar-color: "#c41230"
sidebar-background-color: "#c41230"
so i can get this red to work but is red background black text
but i do this in the configuration.yaml
but it wont do transparent… other then white text white background…
i do the clear cache and then i have to reset user account theme to headertheme from backend-selected
dunno why it keeps going back there
but unable to get the colors right or get a transparancy… but ill keep fiddling later
was unable to to get it to work as its own yaml it seems to work in configuration.yaml
but i cant get transparancy to work…
so muich for it being simple to work with the custom card background stuff… guess i stuck with the bar for now
unless you know how to make it transparent
hi i know old thread
and i was able to get kinda what i wanted above
but has there been option yet to increase Font Size
i have custom header-color.yaml
header-color:
#Header
app-header-background-color: black
app-header-text-color: white
app-header-text-size: 20px
app-header-font-size: 20px
the font-size text-size doesnt seem to work as i guessing no option
but is there an option yet to get that size bigger
1 Like
Hi, I’m digging and not finding a solution to this problem. I want larger icons for the header bar for a touchscreen for the elderly, just as you describe. Did you ever find a solution?
# Enlarging top bar and icons
header-height: 90px # Increase the height of the top bar (This works!)
ha-icon-size: 70px # Increase the size of the icons <--- (This doesn't work!)
header-padding: 10px # Adjust padding if necessary (This doesn't work!)
app-header-background-color: rgba(88, 112, 136, 0.4) # (This works!)
app-header-font-size: 70px # doesnt work to increase icon size
1 Like
A lot changes in 3 years. I suggest starting a new thread.