Using CSS to override everything?

Hi everyone,

I am trying to work on my dashboard, but things seem to be a lot different to how webpages generally work. Without using third party addons, is it possible to include a CSS file that will override everything. This will allow for flexibility when modding the dashboard.

The issue I am having is, for example, doing something as simple as changing the background color of the header. I know I can change it by using

--app-header-background-color: "#000"

But that is limiting as each individual element does not have its own identifier that I can style with CSS. I should be able to just put the following code into a CSS file and be done

.header {
  background-color: #000;
}

This allows for much more control.

I am use to theming forum software ( Xenforo ) which is quite easy to get a very custom look with CSS alone. Is this possible with HA?

Cheers!

Have you looked at themes?

Frontend #1: themes.

1 Like

Hi Stiltjack,

Yup. Here is the problem I am having with it. I’ll just use the following as a small example of why overriding the CSS is better than what is there. I have created a new theme, so let’s just focus on the header bar for the moment.

Let’s say I want to make it black as the background and have purple icons. I can open up my theme.yaml file and put in the following code

app-header-background-color: "#000"
app-header-text-color: "#999aca"

Which gives the following result

However, there is another element within the header. Let’s say for whatever reason, I would like to to be a different colour than the black background I just set. Just for the lolz I want to make it a vibrant colour and add a radius to its border. I can do it like this with CSS

.header {
  background-color: #000;
}

#tabs-container {
  background-color: #f0f;
  border-radius: 20px;

This will be the following result

As far as I can see at the moment, there is no other way to do it. I don’t like using third party addons as support for them may stop. Where as the CSS is less likely to have issues in the future, and any it may have is generally easily fixed.

With CSS you have a lot of control over how you want everything to be. For example, I may want each icon in the navigation bar at the top to be a different colour. Or I may want a CSS animation to take place when I put the cursor over it.

I have worked out I can add a .css file into my www directory and then load it in the resources, but nothing I am putting into the file is working. I can see it is being loaded, but no overrides are taking place, even with !important being put at the end.

Hope this explains what I am trying to do a little bit better :slight_smile:

Using CSS you can make the dashboard look like anything you can imagine, but I am not sure how to override things, nor have I looked too deep as to how elements have been named or set out. But you can achieve a lot with a bit of CSS.

Cheers

Yeah that is not a valid assumption. The frontend devs change the variables every now and then. Also card-mod has a very proactive dev who releases patches when issues are identified in core beta testing.

card-mod themes will allow you to change just about everything.

1 Like

Hi Tom,

Thanks for that. I have tried everything to not use any addons but it looks like I am going to have to. One thing I am having issues with is addons working. For example, I installed a theme and none of the images of the theme work ( I did add the code inside of the raw config editor ). The code was background: var(–background-image)

However, no image files seem to display. Is this some sort of security setting in HA?

Cheers!

These are third party integrations, not addons. Addons are something else entirely.

A lot of theme variables have changed. When was the theme you installed last updated (check the github repository)?

Where is background-image defined?

I installed this theme through HACS - GitHub - basnijholt/lovelace-ios-themes: ❤️📱🏠🤖 Themes inspired by iOS Dark ⬛️ and Light ◻️ Mode for Lovelace Home Assistant with different backgrounds

If I go to Studio Code Server on my HA installation, I can see the background image files in themes/ios-themes/

However, none of the images will load.

I checked the ios-themes.yaml file and the image is defined as

background-image: “center / cover no-repeat fixed url(‘/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg’)”

That didn’t work so I changed it to

background-image: “center / cover no-repeat fixed url(‘/themes/ios-themes/homekit-bg-blue-red.jpg’)”

But still no luck.

Did you go to your profile and apply the theme?

Yup. All of the other settings change such as colours of icons, etc. I can see the theme is loaded, but the images fail to load. Any jpg isn’t loading.

P.S - If I go to http://homeassistant.local:8123/hacsfiles/themes/ios-themes/homekit-bg-blue-red.jpg where the background image is meant to be, it is giving me a 404 error. If I move to http://homeassistant.local:8123/themes/ios-themes/homekit-bg-blue-red.jpg I still get a 404

EDIT: If I put the image files in /www/ they appear. Is there a reason for this behaviour?

Yes. That is the /local share available everywhere, even publicly.

1 Like