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
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