Static Magazine

Add Header Image

Posted by Myriam

Das Template hat zwar ein Header-Gadget, allerdings müsste dafür noch einiges mehr gemacht werden, als wenn man manuell einen einbaut. Deswegen im folgenden eine Anleitung, wie ihr das macht.

The template does feature a header gadget, but getting an image responsive would require much more work if uploaded through the header widget instead of just adding manually, which is my preferred method, thus the one I will explain in this tutorial.

1. Create Header

Als erstes braucht ihr einen Header. Also ran ans Grafikprogramm und gestalten.

First of all you need a header image. So get your programs out and get designing.

2. Upload Header

Danach müsst ihr das Bild irgendwo hochladen, wo ihr den Bildlink bekommt, also bspweise drive, g+, blogger oder was ganz kreatives

Then you need to upload the image somewhere where you have the image link. So for example google drive, g+, blogger or something a little more exotic

3. Include Code

Geht ins HTML und sucht nach class='head'.

Open up your code and search for class='head'



Darunter befindet sich die Section in dem das Widget drin ist. Das löschen wir. (wer nicht ganz so permanent sein will, darf die Stelle auch gerne zwischen <!-- CODE --> auskommentieren)

Underneath you'll find the section which contains the widget. We delete that (who does not want to be quite as permanent can also just exclude it, by wrapping the code in a comment <!-- CODE -->



Dann fügen wir unser Bild an der Stelle ein. Für gewöhnlich sind Header Home-Links, also packen wir den image-Tag in einem Link, der mit einem Slash versehen ist, das führt dann zur Homepage.

At that spot we add our new code. usually a header image acts as a home link, so we wrap the image tag in a link with an href to a slash, which always brings us to the homepage.

<!-- Header Image Code -->
<a href="/"><img src="IMGLINK"/></a>

Womöglich ist das dann aber viel zu gross.

It is probable, that this happened.

4. Fix CSS

Falls das der Fall ist, müssen wir nochmal in die CSS. Sucht nach .head und darunter fügen wir CSS für das Bild ein. Wir geben dem ganze eine maximale Höhe. In meinem Fall war das 200px.

If that's the case, we have to go back to change the CSS. Search for .head and underneath add the CSS for the image. We add a max-height to it. In my case it was 200px.

.head img{
    max-height: 200px;
    max-width: 100%;
}

Zwei Probleme bleiben. Unter dem Bild ist noch ein weisser Rand, der da nicht sein soll. Und das offensichtlich Problem, der Content wird verdeckt.

Two obvious flaws remain. Underneath the image we have a white space that should not be there and the more severe one, the header is still covering up content.



Der weisse Rand kommt vom line-height, das wir in .head definiert haben. Das entfernen wir und dieses Problem ist gelöst.

The white space comes from a line-height defined in .head. We are going to remove that and the problem is solved.



Für das andere Problem suchen wir nach .contianer und verändern den Wer von top.

For the other problem we search for .contianer and change the value of top.