Logo(schöne Header-Grafik) oben in Header einbauen

[stefan_w]

Hallo zusammen,
wir verwenden das Template "Andreas08" - oben im Blog befindet sich eine farbige Fläche in welcher über das Admin-Menü ein freier Text eingegeben werden kann.
Nun würde ich aber gerne die farbige Fläche mit einer schönen Header-Grafik bzw. einem Logo in dieser Grösse ersetzen. Leider weiss ich nicht wo ich dies abändern müsste bzw. wie groß diese Grafik sein müsste damit diese gleich gross wäre wie die farbige Fläche?
Hat jemand einen Tipp wie man dies anstellen könnte?

Vielen Dank vorab.

[yellowled]

Nun würde ich aber gerne die farbige Fläche mit einer schönen Header-Grafik bzw. einem Logo in dieser Grösse ersetzen. Leider weiss ich nicht wo ich dies abändern müsste bzw. wie groß diese Grafik sein müsste damit diese gleich gross wäre wie die farbige Fläche?

Es kommt natürlich - wie immer - drauf an[tm] Ja, worauf kommt es denn an? Es kommt darauf an, welche Art von Headergrafik Dir vorschwebt. Ich gehe mal davon aus, dass Dir eine - blogtypische - Bannergrafik vorschwebt, welche den gesamten Header hinterlegt, etwa so wie in meinem Blog.

Wir gucken also in die style.css des Andreas08-Templates und finden dort:

Code: Select all

#header{
	height:110px;
	width:758px;
	margin:0 1px 1px 1px;
	background:#467aa7;
	color:#ffffff; }

Der Header ist also in diesem Template 758 Pixel breit und 110 Pixel hoch, wird jedoch (das ist arg kompliziert zu erklären und zudem browserabhängig) über den margin noch modifiziert, ist also eigentlich 760x111 Pixel. Jetzt kommt es schon wieder darauf an, und zwar darauf, ob Dein beabsichtigtes Hintergrundbild zu diesen Dimensionen passt bzw. in diese gebracht werden kann (verkleinern/vergrößern). Dabei sollte eine Breite von 760 Pixel unbedingt zu erreichen sein, da das gesamte Blog diese Breite über einen Container vorgegeben bekommt - natürlich könnte man auch eine schmalere Bannergrafik verwenden, meiner Meinung nach sieht das aber nicht gut aus.

Nehmen wir also mal an, Du hast eine Bannergrafik, die exakt 760x111 Pixel groß ist. Speichere diese im Unterverzeichnis img des andreas08-Ordners im templates-Verzeichnis, ich nehme mal an, Du speicherst sie als banner.jpg. Ändere dann mit einem Texteditor den oben erwähnten Abschnitt der style.css wie folgt:

Code: Select all

#header{
	height:110px;
	width:758px;
	margin:0 1px 1px 1px;
	background:#467aa7 url({TEMPLATE_PATH}img/banner.jpg) top left no-repeat; 
	color:#ffffff; }

Das sollte bereits passen. Falls Du nun eine Grafik verwenden möchtest, die sich partout nicht auf 760x111 bringen lässt, sondern, sagen wir mal, auf 760x150, dann musst Du lediglich die Höhe des #header anpassen. Das ginge dann so:

Code: Select all

#header{
	height:149px;
	width:758px;
	margin:0 1px 1px 1px;
	background:#467aa7 url({TEMPLATE_PATH}img/banner.jpg) top left no-repeat; 
	color:#ffffff; }

Alles weitere (also kleinere Korrekturen, evtl. Anpassungen an verschiedene Browser) kann man dann aber erst am konkreten Beispiel machen.

YL

[stefan_w]

Hallo Matthias,

danke für die super Erklärung - ist genau das was ich gesucht hab Werde mal versuchen die Grafik auf die Grösse zu bringen.. bis später..

[stefan_w]

Ging leider nicht ganz - siehe PM!

[yellowled]

Ging leider nicht ganz - siehe PM!

Und sollte es jemanden interessieren, was ich stefan_w per PM geraten habe: Ich habe die vorgeschlagene Lösung in eine Art Tutorial verpackt.

http://matthias.yellowled.de/archives/6 ... reich.html

YL

[hackerart]

Ja, das ist sicher von Interesse! Danke für den Hinweis.

[hackerart]

Ich habe mal einfach in einem Testblog das geändert:

Code: Select all

/* container for banner */
#serendipity_banner {
	margin: auto;
	width: 100%;
	height: 72px;
	background-image: url({TEMPLATE_PATH}img/banner.jpg); }

anstatt

Code: Select all

background-image: url({TEMPLATE_PATH}img/background.png);

also eigentlich nur eine gültige Datei in das Verzeichnis img gegeben. Grundsätzlich hat es gepasst. Allerdings bin ich mir noch nicht klar darüber, welche Größe carl_contest will. 760x111 ist IMHO nicht die richtige Größe. Rechts scheint ein Teil der linken Seite zu sein. Ich muss mir das aber erst näher ansehen, ich habe ein ziemlich monotones Testbild gewählt.

[hackerart]

Ich habe jetzt mal ein bißchen trial and error mit carl_contest gemacht. Ich denke mit "convert bild.jpg -resize 905x72! banner.jpg" liegt man nicht sehr daneben. Mit 900x hat sich das Bild wiederhold und über 905 hat sich nichts mehr geändert, d.h. das zu große Bild wurde wieder gestaucht.

Wie macht man denn den Container um 1px kleiner. IMHO ist der Container auf der rechten Seite um 1px zu groß. Vielleicht liegt das aber auch an meinen Padding-Änderungen.

[yellowled]

Also, zunächst mal: Du hast Recht, 760x111 ist nicht passend für carl_contest - das war das Format für das von stefan_w verwendete andreas08-Template.

carl_contest "will" - so man, wie Du, das "height: 72px;" für #serendipity_banner stehen lässt - eine, genau, 72 Pixel hohe Bannergrafik. Das "Problem" dabei ist, dass carl_contest keine Breite vorgibt bzw. schon eine Breite, aber keinen absoluten Wert. Der gesamte "Inhalt" der Blogs (also: Header, Seitenleisten, Eintragsspalte und Footer) wird in einen container #wrap verpackt, dessen Breite jedoch relativ angegeben wird: "width: 90%", was natürlich bedeutet, dass dieser Container immer, genau, 90 Prozent des Browserfensters einnimmt.

Das wiederum macht es schwierig - eigentlich unmöglich -, eine Grafik zu finden, die in jeder Auflösung über die gesamte Breite reicht (weshalb es übrigens auch meiner Meinung nach halbwegs sinnfrei ist, den Bannercontainer anzupassen). Beispiel: Deine ermittelte Breite von 905 Pixeln mag in Deiner Browserfenstergröße (vermutlich 1024 Pixel?) genau passen - in einem Browserfenster mit 1280 Pixeln Breite passt sie nicht, ebensowenig in einem Fenster mit nur 800 Pixeln Breite.

Relativ einfach zu umgehen wäre dieses z.B. über ein Banner, welches zu den Rändern hin eine bestimmte Farbe hat - dann könnte man #serendipity_banner eben diese Farbe als Hintergrundfarbe zuweisen. Eine andere Alternative wäre es, dem Container #wrap eine feste Breite anstelle der 90% zuzuweisen.

YL