Reduce height of Header and change Site Title font?

Post Reply
BlakesHeaven
Ssr. Bludit
Posts: 24
Joined: Sat Jan 27, 2018 12:32 am

Reduce height of Header & small changes to the header?

Hello, I'm just getting started with Bludit and hope to eventually create my own theme, however, in the meantime I'm using the default theme, "Kernel Panic".

I would like to do three things before releasing the website:

1. Reduce the height of the header to a couple of inches.
2. Change the font of the site title.
3. Add a background picture to the header – it is just white space at the moment.

I have reviewed documentation on themes and looked through files but can’t see where to go.

I would be grateful if someone could tell me the file(s) and/or css attribute(s) to adjust.
Many thanks in advance,
David
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:

BlakesHeaven wrote: Tue Jan 30, 2018 12:08 pm 1. Reduce the height of the header to a couple of inches.
2. Change the font of the site title.
You can see the definitions and the structure of the CSS of a theme using the tools of your browser.

header-kernel-panic.png
header-kernel-panic.png (14.18 KiB) Viewed 2328 times

For example the class "fh5co-intro" has the following definition:

Code: Select all

.fh5co-intro {
    padding: 7em 0;
}
The font size of the site title has the following definition:

Code: Select all

.fh5co-intro .intro-lead {
    font-size: 50px;
    line-height: 60px;
    font-family: "Roboto Slab", arial, sans-serif;
}
There are a lot of tutorials about the browser tools, CSS etc. that can help you.
3. Add a background picture to the header – it is just white space at the moment.
For this you have to modify the file index.php of the theme (at /bl-themes/kernel-panic/).
Clickwork - Websites mit Bludit | Planet Bludit - Tipps und Snippets
BlakesHeaven
Ssr. Bludit
Posts: 24
Joined: Sat Jan 27, 2018 12:32 am

Thanks very much for the fast response; I see exactly what you mean with the browser tools and I have achieved what I needed.

Cheers,
David
Post Reply