Docs X: how to change fonts..?

Post Reply
User avatar
stani
Master Bludit
Posts: 73
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: 2592
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>
Gumroad - Useful plugins for Bludit | Nützliche Plugins für Bludit
Planet-Bludit - Tipps, Snippets und hilfreiche Links (auf Deutsch)
User avatar
stani
Master Bludit
Posts: 73
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: 2592
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 2991 times
Gumroad - Useful plugins for Bludit | Nützliche Plugins für Bludit
Planet-Bludit - Tipps, Snippets und hilfreiche Links (auf Deutsch)
User avatar
stani
Master Bludit
Posts: 73
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: 2592
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;
}
Gumroad - Useful plugins for Bludit | Nützliche Plugins für Bludit
Planet-Bludit - Tipps, Snippets und hilfreiche Links (auf Deutsch)
User avatar
stani
Master Bludit
Posts: 73
Joined: Wed Oct 14, 2020 1:34 pm

Edi wrote: Sun Nov 22, 2020 6:23 pm 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;
}
So I finally got to it, but unfortunately it doesn't work .... I tried font-size: 20px, 30px, or 40px, but nothing happens, the font in the left sidebar is still the same.

What I really need:

- (separately) in the left sidebar: change font (size, type) for links. Change font (size, type) for chapter titles. Change background color.

- (separately) for site content: change font (size, type), line height, for plain text. This same for headings. Maybe too background color - but it is not absolutely necessary (white is good for me, but someone maybe would like to change it).

Would it be possible, please?
User avatar
stani
Master Bludit
Posts: 73
Joined: Wed Oct 14, 2020 1:34 pm

So after a long work (I'm a layman and I can't do it), I made adjustments.
Post Reply