How do you configure top Icons to be bigger and header to background clear

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