Docs X: how to change fonts..?

Post Reply
User avatar
stani
Master Bludit
Posts: 79
Joined: Wed Oct 14, 2020 1:34 pm
Has thanked: 1 time

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: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
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>
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
stani
Master Bludit
Posts: 79
Joined: Wed Oct 14, 2020 1:34 pm
Has thanked: 1 time

Thanks.

But how to change (separately) font in the left navigation menu?
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
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 4385 times
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
stani
Master Bludit
Posts: 79
Joined: Wed Oct 14, 2020 1:34 pm
Has thanked: 1 time

I mean font on the website AND in the left navigation menu...
So each one separately. ;)
User avatar
Edi
Site Admin
Posts: 3121
Joined: Sun Aug 09, 2015 5:01 pm
Location: Zurich
Has thanked: 54 times
Been thanked: 77 times
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;
}
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
User avatar
stani
Master Bludit
Posts: 79
Joined: Wed Oct 14, 2020 1:34 pm
Has thanked: 1 time

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: 79
Joined: Wed Oct 14, 2020 1:34 pm
Has thanked: 1 time

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