Hallo!
Ist gar nicht sooo schwer!
BEVOR DU LOSLEGST!!!! SICHERUNG ANLEGEN; DATENBANK SICHERN!
1.) Erstelle deine Bilder 660 x 240 pixels und benenne diese in slider1.jpg, slider2.jpg, slider3.jpg und slider4.jpg
2.) Lade diese Bilder in: /includes/templates/DEIN TEMPLATE/images
3.) Lade diese Datei auf deinen Rechner: http://www.kerrinhardy.com/resources...syslider17.zip
4.) Entpacke die Datei, darin sind zwei Dateien enthalten (jscript_easyslider_settings.js und jscript_easySlider1.7.js)
5.) Lade diese beiden Dateien in den Ordner: includes/modules/pages/index
6.) Lade dir folgende Datei auf deinen Rechner: Anhang 611
7.) Diese Datei entpacken und auf deinen Server hochladen unter: includes/templates/DEIN TEMPLATE/jscript/
8.) Sollte der Ordner jscript nicht bestehen, erzeuge diesen Ordner!
9.) Lade dir deine stylesheet.css Datei auf deinen Rechner, du findest sie unter: /includes/templates/DEIN TEMPLATE/css/
10.) Öffne diese CSS Datei mit einem Editor (Notepad++), scrolle bis zum Ende und füge nach der letzten Zeile folgendes ein:
Code:
/* // Easy Slider */
img{border:none;}
/* image replacement */
.graphic, #prevBtn, #nextBtn, #slider1prev, #slider1next{
margin:0;
padding:0;
display:block;
overflow:hidden;
text-indent:-8000px;
}
/* // image replacement */
#container{
margin:2em auto;
position:relative;
text-align:left;
width:660px;
background:#fff;
}
#header{
height:80px;
line-height:80px;
background:#5DC9E1;
color:#fff;
}
#content{
position:relative;
}
/* Easy Slider */
#slider ul, #slider li,
#slider2 ul, #slider2 li{
margin:0;
padding:0;
list-style:none;
}
#slider2{margin-top:1em;}
#slider li, #slider2 li{
/*
define width and height of list item (slide)
entire slider area will adjust according to the parameters provided here
*/
width:660px;
height:240px;
overflow:hidden;
}
#prevBtn, #nextBtn,
#slider1next, #slider1prev{
display:block;
width:30px;
height:77px;
position:absolute;
left:-30px;
top:71px;
z-index:1000;
}
#nextBtn, #slider1next{
left:660px;
}
#prevBtn a, #nextBtn a,
#slider1next a, #slider1prev a{
display:block;
position:relative;
width:30px;
height:77px;
background:url(../images/btn_prev.gif) no-repeat 0 0;
}
#nextBtn a, #slider1next a{
background:url(../images/btn_next.gif) no-repeat 0 0;
}
/* numeric controls */
ol#controls{
margin:1em 0;
padding:0;
height:28px;
}
ol#controls li{
margin:0 10px 0 0;
padding:0;
float:left;
list-style:none;
height:28px;
line-height:28px;
}
ol#controls li a{
float:left;
height:28px;
line-height:28px;
border:1px solid #ccc;
background:#DAF3F8;
color:#555;
padding:0 10px;
text-decoration:none;
}
ol#controls li.current a{
background:#5DC9E1;
color:#fff;
}
ol#controls li a:focus, #prevBtn a:focus, #nextBtn a:focus{outline:none;}
/* // Easy Slider */
11.) Speichere die CSS Datei und lade sie wieder auf deinen Server, dabei wird die Originaldatei überschrieben (Zur Erinnerung:/includes/templates/DEIN TEMPLATE/css/) .
12.) Lade die Datei: tpl_index_default.php auf deinen Rechner, du findest sie unter: /includes/templates/DEIN TEMPLATE/templates/
13.) Öffne diese Datei mit einem Editor (Notepad++) und suche darin folgendes:
Code:
<?php/**
* get the Define Main Page Text
*/
?>
<div id="indexDefaultMainContent" class="content"><?php require($define_page); ?></div>
<?php } ?>
14.) Füge genau darunter folgendes ein:
Code:
<!-- bof Easy Slider 1.7 --><div id="container">
<div id="content">
<div id="slider">
<ul>
<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider1.jpg" /></a>
<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider2.jpg" /></a>
<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider3.jpg" /></a>
<li><a href="#"><img alt="Easy Slider 1.7 for Zen Cart" src="includes/templates/classic/images/slider4.jpg" /></a>
</li></ul>
</div>
</div>
</div>
<!-- eof Easy Slider 1.7 -->
15.) Die rot markierten Stellen musst du noch ändern, in den Namen deines Templates (benutzt du das Template Classic brauchst du natürlich nichts machen)
16.) Datei speichern und auf deinen Webspace wieder hochladen unter: /includes/templates/DEIN TEMPLATE/templates/
Dabei wird wieder die Originaldatei überschrieben.
17.) Deine Webseite aufrufen, Browser aktualisieren und über den Erfolg freuen!
So, ich hoffe es hilft!
Nette Grüße
Thommy
Lesezeichen