I’m trying out the lyt theme & would like to change the header size & colour of the LYT theme with a css snippet
Things I have tried
I think i found the header size section in the lyt theme css file, so copied it into a header-size.css file and amended the top two values, saved/refreshed snippets, etc but that didnt seem work, so i added important but that also hasn’t worked.
(I noticed in other help suggestions it says em rather than rem after the font size, so i tried both. Not sure why its rem in the lyt theme)
…and they set the inline-title color to inherit; probably the issue with the title not changing (the inline title is usually the same color as h1, but it’s inheriting the body text color in this case).
To make your forum posts here clearer, please start using four backticks surrounding any code or query examples. This will ensure that the text is not treated strangely by the forum software.
Alternatively you could specific for CSS, use ```css in front of the CSS, and ``` after it, to make it look nice, and to stop the forum software doing strange thing to your CSS code. (But using four backticks is a general tips to present any code, CSS or query examples within a forum post like these)
I know, but I wanted to make a point of it, and I hadn’t installed the LYT theme myself, so I couldn’t answer the other part at that point in time. Now however, I’ve installed it, and found that the following seems to do the trick:
It all comes down to CSS specificity, and the LYT theme seems to define these color and size variables related to the body.theme-dark and body.theme-light selectors. This means that if you use just body in your selector, it has a lower specificity, and is therefore ignored.
Do note that in the above code, I’m setting the same color for both light and dark mode, which most likely isn’t a good idea. You should probably duplicate the code and set the colors accordingly to the light or dark mode.
I’m also using px to set the size, as using em is setting the size relative to whatever font size it relates to from before. I’m not well enough versed in CSS to figure that out at all times, so I tend to use px at least for test purposes to get the proper effect.
So feel free to change that back to using em’s or rem’s, as these selectors should override the LYT default selectors, and hopefully should give you reliable results with either size variant.