Mein Logo passt nicht in den Header

[mtsluft]

Hi,
vielleicht kann mir jemand mal sagen, was ich falsch mache.
Ich nutze den style prosilver und habe ein logo in der grösse 700*90 erstellt, und es mit der ACP funktion versucht in den header einzufügen, aber jetzt sieht es irgendwie komisch aus!
also der header wird nun grösser als das logo ist.
ihr könnte das hier sehen:
heimkinopage.de/phpbb

[TW1920]

Der header ist etwas kleiner als das Bild. Wenn du das Bild unter Beibehalten der Verhältnisse auf eine größe von 80 Pixel schrumpft, würde es reinpassen. Da dann allerings das Design niht zusammenpasst wäre das eher suboptimal.
Hast du die Möglichkeit die Schriftzüge mit transparentem Hintergrund zu versehen. Diesen kannst du dann Problemlos in den Header einbinden, ohne dass man Übergang von dem Logo sieht.

Um die Grafik, so wie sie ist, oben Einzubinden, müsstest du diese als Hintergrund für den entsprechenden div-Container festlegen. Diesen findest du im Stylorner in /temlates/overall_header.html :

Code: Alles auswählen

<div class="headerbar">

Das machst du ganz einfach, indem du den oben genannten Code durch folgendes ersetzt:

Code: Alles auswählen

<div class="headerbar" style="background-image:url(http://www.heimkinopage.de/phpbb/styles/prosilver/imageset/forumheader2.png); background-repeat:no-repeat;">

Ich hofe ich konnte dir helfen

[mtsluft]

hi,

super, danke, mit der transparenz hats gut geklappt.
Sieht nun viel besser aus;)
Das logo an sich wird natürlich vom design her noch verbessert.
jetzt aber noch ne frage, unterhalb vom logo ist jetzt durchgehend im header ein heller-blauer streifen als oben. ist das vom theme so gedacht oder soll das nicht sein?
das transparente logo ist auf jeden fall nun 80px hoch.

[TW1920]

Normal ist das nicht so. Das liegt daran, dass das Bild zu groß ist, du kannst es aber etwas kleiner machen, oder das Transparente als Hintergrund einfügen.

Hintergrund ist ja oben beschrieben.
Wenn dus verkleinerst, ist es wichtig, dass du das Verhältnis beibehältst. Normal müssten bei dir 82 Pixel höhe dann passen

[modernist]

Wenn der Text unter dem Bild so bleiben soll und du nur die Farben vereinheitlichen willst, nimm eine andere Hintergrundfarbe für die Klasse headerbar.

Statt

Code: Alles auswählen

.headerbar { 
background-color: #128AEB;

dann z.B.

Code: Alles auswählen

.headerbar { 
background-color: #1076D5;

[TW1920]

Wenn der Text unter dem Bild so bleiben soll und du nur die Farben vereinheitlichen willst, nimm eine andere Hintergrundfarbe für die Klasse headerbar.

Statt

Code: Alles auswählen

.headerbar { 
background-color: #128AEB;

dann z.B.

Code: Alles auswählen

.headerbar { 
background-color: #1076D5;

Die Codezeilen findest du im Styleordner unter /theme/common.css

Eine weitere Option wäre, dass du nach:

Code: Alles auswählen

.headerbar { 
background-color: #128AEB;

diese Zeile einfügst:

Code: Alles auswählen

	height: 100px;

Damit kannst du dann die größe belibig anpassen

[mtsluft]

hab das eingefügt, ändert aber nichts, auch wenn ich den px wert veränder...
bei mir gibts diese zeilen in der common.css auch nicht so, sondern:

Code: Alles auswählen

.headerbar {
	background: #ebebeb none repeat-x 0 0;
	color: #FFFFFF;
	height: 100px;
	margin-bottom: 4px;
	padding: 0 5px;

(heigh von mir eingefügt)

[TW1920]

Hast du den cache gelöscht? damit änderungen sichtbar werden musst du den cache löschen.


Optional kannst du in der /template/overall_header.html nachsehen, ob dort an der zeile was geändert wurde:

Code: Alles auswählen

<div class="headerbar">

Es sieht danach aus, als wäre dort bereits was modifiziert worden, da die Farbe etwas dunkler als gewöhnlich ist.

[mtsluft]

hab den cache geleert, aber es ändert sich nichts...
mit der zeile "headerbar" ist auch alles ok...

[modernist]

Die Klasse headerbar kommt auch mehrmals im Stylesheet vor.

Du musst nach dieser hier suchen und da die Hintergrundfarbe wie oben erwähnt ändern:

Code: Alles auswählen

/* Round cornered boxes and backgrounds
---------------------------------------- */
.headerbar {
	background-color: #128aeb;
	background-image: url("./styles/prosilveredit/theme/images/bg_header.gif");
	color: #FFFFFF;
}