Den Header kannst du ganz leicht über die
.psd-Datei im Archive abändern. Sobald das Bild entsprechend abgeändert ist speicherst du es einfach als
header.jpg und packst das Bild in den Ordner
images/style/LCL_Simply_Black.
Wenn die Bild-Höhe deines neuen Bildes anders sein sollte kannst du das relativ leicht abändern. Gehe einfach in dein
AdminCenter > Sonstiges > Vorlagen und wähle das Template-Packet
LCL Simply Black aus. Wähle nun den Eintrag
site und suche das:
| Quellcode <img border="0" src="images/style/LCL_Simply_Black/header.jpg" width="1000" height="196"> | |
Bei
height="196" wird die Höhe des Bildes festgelegt; hier also 196 Pixel hoch. Einfach abändern ;o
--
Was die Bilder-Reihe angeht:
Im Grunde wie oben vorgehen, nur diesmal das suchen:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 | | Quellcode <td width="113">
<a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="include.php?path=start">
<img border="0" src="images/style/LCL_Simply_Black/home_off.jpg" width="113" height="36" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="images/style/LCL_Simply_Black/home_on.jpg"></a></td>
<td width="112">
<a onmouseover="var img=document['fpAnimswapImgFP2'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP2'].src=document['fpAnimswapImgFP2'].imgRolln" href="include.php?path=forumsdisplay">
<img border="0" src="images/style/LCL_Simply_Black/forum_off.jpg" width="112" height="36" id="fpAnimswapImgFP2" name="fpAnimswapImgFP2" dynamicanimation="fpAnimswapImgFP2" lowsrc="images/style/LCL_Simply_Black/forum_on.jpg"></a></td>
<td width="113">
<a onmouseover="var img=document['fpAnimswapImgFP3'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP3'].src=document['fpAnimswapImgFP3'].imgRolln" href="include.php?path=guestbook">
<img border="0" src="images/style/LCL_Simply_Black/book_off.jpg" width="113" height="36" id="fpAnimswapImgFP3" name="fpAnimswapImgFP3" dynamicanimation="fpAnimswapImgFP3" lowsrc="images/style/LCL_Simply_Black/book_on.jpg"></a></td>
<td width="112">
<a onmouseover="var img=document['fpAnimswapImgFP4'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP4'].src=document['fpAnimswapImgFP4'].imgRolln" href="include.php?path=news">
<img border="0" src="images/style/LCL_Simply_Black/news_off.jpg" width="112" height="36" id="fpAnimswapImgFP4" name="fpAnimswapImgFP4" dynamicanimation="fpAnimswapImgFP4" lowsrc="images/style/LCL_Simply_Black/news_on.jpg"></a></td>
<td width="110" rowspan="2">
<img border="0" src="images/style/LCL_Simply_Black/center.jpg" width="110" height="61"></td>
<td width="112">
<a onmouseover="var img=document['fpAnimswapImgFP5'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP5'].src=document['fpAnimswapImgFP5'].imgRolln" href="include.php?path=contentarchive&type=1">
<img border="0" src="images/style/LCL_Simply_Black/article_off.jpg" width="112" height="36" id="fpAnimswapImgFP5" name="fpAnimswapImgFP5" dynamicanimation="fpAnimswapImgFP5" lowsrc="images/style/LCL_Simply_Black/article_on.jpg"></a></td>
<td width="109">
<a onmouseover="var img=document['fpAnimswapImgFP6'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP6'].src=document['fpAnimswapImgFP6'].imgRolln" href="include.php?path=contentarchive&type=4">
<img border="0" src="images/style/LCL_Simply_Black/dload_off.jpg" width="109" height="36" id="fpAnimswapImgFP6" name="fpAnimswapImgFP6" dynamicanimation="fpAnimswapImgFP6" lowsrc="images/style/LCL_Simply_Black/dload_on.jpg"></a></td>
<td width="113">
<a onmouseover="var img=document['fpAnimswapImgFP7'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP7'].src=document['fpAnimswapImgFP7'].imgRolln" href="include.php?path=contentarchive&type=3">
<img border="0" src="images/style/LCL_Simply_Black/links_off.jpg" width="113" height="36" id="fpAnimswapImgFP7" name="fpAnimswapImgFP7" dynamicanimation="fpAnimswapImgFP7" lowsrc="images/style/LCL_Simply_Black/links_on.jpg"></a></td>
<td width="106">
<a onmouseover="var img=document['fpAnimswapImgFP8'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP8'].src=document['fpAnimswapImgFP8'].imgRolln" href="include.php?path=contact">
<img border="0" src="images/style/LCL_Simply_Black/mail_off.jpg" width="106" height="36" id="fpAnimswapImgFP8" name="fpAnimswapImgFP8" dynamicanimation="fpAnimswapImgFP8" lowsrc="images/style/LCL_Simply_Black/mail_on.jpg"></a></td> | |
|
Das kannst du entweder als Vorlage benutzen und die ganzen Pfade abändern, also z.B.:
- Aus dem:
| Quellcode <a onmouseover="var img=document['fpAnimswapImgFP1'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP1'].src=document['fpAnimswapImgFP1'].imgRolln" href="include.php?path=start">
<img border="0" src="images/style/LCL_Simply_Black/home_off.jpg" width="113" height="36" id="fpAnimswapImgFP1" name="fpAnimswapImgFP1" dynamicanimation="fpAnimswapImgFP1" lowsrc="images/style/LCL_Simply_Black/home_on.jpg"></a></td> | |
Wird dem (Beispiel: FC Schalke, FCSchalke_off.jpg = normales Bild, _on.jpg das Hover-Bild):
| Quellcode <a onmouseover="var img=document['fpAnimswapImgFP_FCSchalke'];img.imgRolln=img.src;img.src=img.lowsrc?img.lowsrc:img.getAttribute?img.getAttribute('lowsrc'):img.src;" onmouseout="document['fpAnimswapImgFP_FCSchalke'].src=document['fpAnimswapImgFP_FCSchalke'].imgRolln" href="include.php?path=start">
<img border="0" src="images/style/LCL_Simply_Black/Banner/FCSchalke_off.jpg" width="113" height="36" id="fpAnimswapImgFP_FCSchalke" name="fpAnimswapImgFP_FCSchalke" dynamicanimation="fpAnimswapImgFP_FCSchalke" lowsrc="images/style/LCL_Simply_Black/FCSchalke_off_on.jpg"></a></td> | |
Oder du machst es so:
- Kompletten Code von oben wie folgt abändern (bzw. die restlichen selber erweitern):
| Quellcode <td id="HeaderWappen">
<a id="FCSchalke" href="Link" title="FC Schalke">FC Schalke</a>
<a id="FCBayern" href="Link" title="FC Bayern Münschen">FC Bayern Münschen</a>
<!-- Test-Beispiel -->
<a id="test" href="Link" title="test">test</a>
</td> | |
- Im AdminCenter > Sonstiges > Designs > LCL Simply Black > Optionale Angaben fügst du folgendes hinzu:
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 | | Quellcode /* Default-Daten */
#HeaderWappen
{
height: 36px;
margin: 0px;
padding: 0px;
position: relative;
}
#HeaderWappen a
{
background: no-repeat;
display: block;
float: left;
width: 40px;
height: 36px;
overflow: hidden;
}
#HeaderWappen a:hover
{
outline: 2px solid #ff0000;
}
/* Wappen direkt: FC Schalke */
#HeaderWappen #FCSchalke
{
background: url('{IMAGEDIR}/Banner/FCSchalke_off.jpg');
}
#HeaderWappen #FCSchalke:hover
{
background: url('{IMAGEDIR}/Banner/FCSchalke_on.jpg');
}
/* Wappen direkt: FC Bayern Münschen */
#HeaderWappen #FCBayern
{
background: url('{IMAGEDIR}/Banner/FCBayern_off.jpg');
}
#HeaderWappen #FCBayern:hover
{
background: url('{IMAGEDIR}/Banner/FCBayern_on.jpg');
} | |
Das ganze müsste man jetzt noch weiterführen, bis alle Wappen im Header sind. Hab das jetzt einfach mal mit FC Schalke und FC Bayern als Beispiel / Vorlage gemacht.
Die Wappen hab ich in obigen Code in den Ordner images/style/LCL_Simply_Black/Banner/ gepackt.
Am ende must du aber entscheiden welche Methode dir lieber ist. Die untere, die nach mehr Arbeit aussieht, ist die aktuellere und mehr am aktuellen Standard angeknüpft. Vorallem ist kein JavaScript im Code* was ansich schon wieder dafür sprechen würde
Sollten noch fragen; ich bin ja da ;o
* Im Original-Style von LCL wird JavaScript für die Hover-Bilder benutzt (sieht nach Dreamweaver aus ;o). Sobald aber jemand JavaScript abschaltet wird zwar das Bild angezeigt, aber es kommt kein Hover.