Docs X: how to change fonts..?

Post Reply
User avatar
stani
Ssr. Bludit
Posts: 18
Joined: Wed Oct 14, 2020 1:34 pm

Please, how to change fonts. I mean font type, size, and line height.
On the website, but also separately in the left navigation menu too.

Now is (on the website): Open Sans, 16px, line height 1,5. And I need: Noto Serif, 18px, line height 28px.

thanks
User avatar
Edi
Site Admin
Posts: 2158
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

It's explained here:

Docs X: how to change fonts..?

The CSS would be:

Code: Select all

<style>

body {
   font-family: 'Noto Serif', serif;
   font-size: 18px;
   line-height: 28px;
}

</style>
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
stani
Ssr. Bludit
Posts: 18
Joined: Wed Oct 14, 2020 1:34 pm

Thanks.

But how to change (separately) font in the left navigation menu?
User avatar
Edi
Site Admin
Posts: 2158
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

I think you mean the navigation in the right sidebar...

You can use the developer tools of your browser to inspect the code.

This shows that the plugin Navigation has the class plugin-navigation (see screenshot below).

If for example the font size should be 20px the CSS would be:

Code: Select all

.plugin-navigation {
   font-size: 20px;
}
plugin-navigation.png
plugin-navigation.png (8.62 KiB) Viewed 93 times
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
User avatar
stani
Ssr. Bludit
Posts: 18
Joined: Wed Oct 14, 2020 1:34 pm

I mean font on the website AND in the left navigation menu...
So each one separately. ;)
User avatar
Edi
Site Admin
Posts: 2158
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Contact:

Sorry, I meant the theme Blog X instead of the theme Docs X.

But it's the same, inspect the code with the developer tools of your browser!

For the navigation in the left sidebar the classes are nav flex-column:

Code: Select all

.nav .flex-column {
   font-size: 20px;
}
Planet Bludit, Tipps, Snippets und nützliche Links. - Newsletter, Informationen zu Bludit (auf Deutsch).
Post Reply