Hallo,
Genau dieses Snippet habe ich nun versucht, bisher hatte ich es mir nur durchgelesen.
Also bevor ich Änderungen an meinem Forum vornehme, führe ich die Änderungen immer in meinem Testforum durch, damit ich mein richtiges Forum nicht zu sehr schädige.
Ihr könnt euch mal Testforum unter folgender Adresse angucken:
http://maps.square7.ch
Also ich erkläre jetzt mal welche Änderungen ich bereits alle vorgenommen habe. Die richteten sich meist nach dem erwähnten Snippet. Vorher möchte ich noch dazu sagen, dass mein Headerbild folgendes ist:
http://maps.square7.ch/banner.gif (Größe 1250x150 Pixel)
Änderungen:
styles/prosilver/theme/common.css
Code: Alles auswählen
.headerbar {
background: #ebebeb none repeat-x 0 0;
color: #FFFFFF;
margin-bottom: 4px;
padding: 0 5px;
Ich habe
margin-bottom und
padding auf 0 gesetzt. Des weiteren habe ich gemäß dem Snippet
height: 150px; beigefügt. Das entspricht der Höhe vom Bild.
Dann habe ich noch folgende Änderungen an der
Overall_header.html vorgenommen:
Im folgenden Abschnitt:
Code: Alles auswählen
<div id="site-description">
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
Vor
<div id="site-description"> wurde das eingefügt:
<div style="height: 140px;"> Gemäß des Snippets wurde die Höhe um 10 Pixel verkleinert. Des weiteren habe ich das Original-Forenbild komplett aus dem Header entfernt indem ich
<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a> per
<!-- &
--> in ein Kommentar verwandelt habe.
Am Ende ergibt sich zusammenfassend in der overall_header folgender Text an der Stelle:
Code: Alles auswählen
<div class="headerbar">
<div class="inner"><span class="corners-top"><span></span></span>
<div style="height: 140px;">
<div id="site-description">
<!--<a href="{U_INDEX}" title="{L_INDEX}" id="logo">{SITE_LOGO_IMG}</a>-->
<h1>{SITENAME}</h1>
<p>{SITE_DESCRIPTION}</p>
<p class="skiplink"><a href="#start_here">{L_SKIP}</a></p>
</div>
<!-- IF S_DISPLAY_SEARCH and not S_IN_SEARCH -->
<div id="search-box">
<form action="{U_SEARCH}" method="get" id="search">
<fieldset>
<input name="keywords" id="keywords" type="text" maxlength="128" title="{L_SEARCH_KEYWORDS}" class="inputbox search" value="<!-- IF SEARCH_WORDS-->{SEARCH_WORDS}<!-- ELSE -->{L_SEARCH_MINI}<!-- ENDIF -->" onclick="if(this.value=='{LA_SEARCH_MINI}')this.value='';" onblur="if(this.value=='')this.value='{LA_SEARCH_MINI}';" />
<input class="button2" value="{L_SEARCH}" type="submit" /><br />
<a href="{U_SEARCH}" title="{L_SEARCH_ADV_EXPLAIN}">{L_SEARCH_ADV}</a> {S_SEARCH_HIDDEN_FIELDS}
</fieldset>
</form>
</div>
<!-- ENDIF -->
</div>
<span class="corners-bottom"><span></span></span></div>
</div>
Das ist ja schon mal ein Anfang. Unter Umständen kann man auch noch die dann an schlechter Stelle positionierte Überschrift und Beschreibung das Forum über
Code: Alles auswählen
<div style="text-indent:100px;"><h1>{SITENAME}</h1></div>
<div style="text-indent:100px;"><p>{SITE_DESCRIPTION}</p></div>
oder ähnliches ändern, aber das ist um Moment Nebensache, darum kümmere ich mich später.
Es gibt nun aber noch einen wichtigen Hacken an der Sache:
Ich weiß ja jetzt nicht, ob das unbedingt so gewollt ist, auf Metzimods.de nachdem ich mich persönlich jetzt ein wenig gerichtet habe ist es aber auch so:
Wenn ich jetzt einfach mal mit Strg+Mausrad die Größe der Seite ändere (oder wahrscheinlich auch, wenn ich einen Bildschirm mit anderer Größe nutze) vermehrt sich das Bild, wenn die Seite kleiner gescrollt wird und es verschwinden Teile der Seite, wenn man weg scrollt. Deshalb würde ich es gerne so haben, dass sich das Rechte Ende des Bildes sozusagen am Rand "festkoppelt" und sich dann beim heran scrollen das Bild nicht verändert. Es wird eben nur auseinander gezogen bzw. zusammengedrückt. Das kann bei nicht gerade hochauflösenden Bildern zwar manchmal schlecht sein, aber ich bin schon dabei ein Bild dafür zu entwickeln, wenn ich eben mit der Konfigurierung des Headers fertig bin.
Gruß
Malte
