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)
Found that this css from this post - Default theme - changing Headers size as a snippet - changes the colour of H2 - H6, but not H1, for some reason, and doesnt change the size of any of them.
Have you tried installing the Style settings plugin? I believe LYT supports being customized through that plugin, and it’ll be a whole lot easier than fiddling with the CSS files yourself.
…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).
The reason we can’t group everything together (as in your second post) is of how they decided to set up the theme. Tested in a bit older LYT vault, but should be fine.
That’s the beauty of variables and that’s why @kepano went to great lengths to implement them at the very base of the Obsidian CSS. You generally don’t have to bother with old fashioned CSS selectors.
Ahh thanks so much everyone! I did have the stylesettings plugin @holroy, switching from the minimal theme, but there’s no settings in there for lyt that i can see sadly.
Thats good to now about the variables in the base @OlivierPS though im finding they dont work in this instance for me for some reason
I did get @ariehen colours to work (inc the h1) but the size is still not working. Here’s what i have in the snippet. Any newbie mistakes im making, or other things to try?
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)
Thanks @holroy. I more meant newbie mistakes with my code for the header size not working, but thats really useful as im new to discord too, so will do
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.
Amazing! Thanks @holroy Works perfectly and learnt another thing. Much appreciated everyone
p.s can i also ask as part of this - what to add to change the header on mobile as that seems to be a seperate section, so assume i would need another block in the same css snippet for that?
-update- actually i see its reflected now sync has updated and seems to autosize accordingly (as far as i can tell) via the calc sections in the original css file.
Only thing i can’t work out is changing the link colour, (tried changing everything related to magenta, or links color in lyt stylesheet) but that’s another question so might one be for another post.
Works perfectly and learnt another thing. Much appreciated everyone