»» Neue Templates für den Shop Server bereitstellen

  1. Templates für alle Benutzer bereitstellen
  2. Exklusives Kundentemplate bereitstellen
  3. Hinweise zur Templateerstellung
  4. Ein Template fertigstellen
  5. Templatescreenshots bereitstellen
  6. Fragen dazu?

1. Templates für alle Benutzer bereitstellen  

Wenn Sie selbst oder andere neue Templates für den Shop-Server bereitstellen wollen tun Sie bitte folgendes:




Nach oben

2. Exklusives Kundentemplate bereitstellen  

Sollte der Kunde den Wunsch haben nach einem exklusives Template für seinen Shop, so ist auch dieses leicht realisierbar. Die Vorgehensweise der Templatebereitstellung ist ähnlich der vom vorangegangenen Kapitel. Unterschied hier, das Templateverzeichnis und die Template CSS Datei tragen den Namen des Kundenshopverzeichnisses, gefolgt von einer fortlaufenden Nummer.
  1. Beispiel für Templateverzeichnis: s000001_1
  2. Beispiel für Template CSS Datei: s000001_1.css
Beachten Sie hierbei!
Diese exklusiven Templates werden nicht in der Datenbank eingetragen, diese werden von einer Programmroutine ausgelesen und sind nur für den jeweiligen Shopinhaber sichtbar. Bitte halten Sie unbedingt die Schreibweise für den Verzeichnisname und den Namen der CSS datei ein. Wollen Sie dem Kunden mehr als ein exklusives Template bereitstellen, so ist für jedes die angehängte Nummer um eins zu erhöhen, z.B. s000001_2, s000001_2.css

Dem Kunden werden diese dann so in seiner Templateauswahl angezeigt.


Nach oben

3. Hinweise zur Templateerstellung und Anpassung  

Sie können zu Shopserver nahezu beliebig viele Templatesets erstellen. Dies setzt allerdings gute HTML und CSS Kenntnisse vorraus um diese erfolgreich umzusetzen. Wichtig ist vorallem das korrekte einsetzen der Platzhaltervariablen (Muster: <%%$platzhaltervariable%%>) die für die Ausgabe der Shopdaten nötig sind. Diese Platzhaltervariablen müssen auf jeden Fall vollständig integriert sein.

So gehen Sie vor wenn Sie ein Template erstellen möchten:
  1. Erstellung der Grafiken für das Template, falls welche verwendet werden sollen
  2. Anlegen eines Template Ordners auf ihrem Rechner z.B. TPL10007, dieser muss ein Unterverzeichnis /pics für die verwendeten Grafiken besitzen. die folgenden drei Grafiken müssen dabei in jedem fall vorhanden sein:

    Sie werden benötigt für die Festlegung der Menübreite, der Topangebote Kennzeichnung und für den Warenkorbbutton.
  3. Kopieren Sie dann die im folgenden dargestellten Dateien in den erstellten Templateordner
  4. Erstellen Sie nun mittels eines HTML-Editors das HTML Grundgerüst der Seite. Die CSS Angaben können Sie in dieser Phase in der Templatedatei notieren. Zum auslagern und anpassen der CSS Datei später mehr.
  5. Speichern Sie diese Templatedatei als index.html im Templateordner ab.

Nach oben

4. Ein Template fertigstellen  

Nun folgt der etwas schwierigere Teil der Templateerstellung, die Aufteilung der gespeicherten index.html in die Dateien globalshopfooter.html und globalshopheader.html sowie das einsetzen der Platzhalter.

Die Datei globalshopheader.html mit allen nötigen Platzhaltern (Beispiel)

Die hier Fett dargestellten Codeabschnitte haben eine Sonderfunktion und müssen vorhanden sein.
  1. Der Tabellencode Abschnitt bei <%%$shopausgabebreite%%> und in der globalshopfooter.html fast am Dateiende dient dazu die Templatebreite konfigurierbar zu machen. Die Innentabellen müssen deshalb mit 100% Breite angelegt werden.
  2. Der Bereich bei <%%$menuespacer%%> dient dazu die Menübreite anzupassen.
Die anderen Templates brauchen im Regelfall nicht angepasst werden, hier reichen meist die Werte in der CSS Datei um diese für das Template anzupassen. 
<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN">

<html>
<head>
<title><%%$shoptitle%%></title>

<meta http-equiv="content-type" content="text/html; charset=ISO-8859-1">
<meta http-equiv="expires" content="0">
<meta http-equiv="pragma" content="no-cache">
<meta http-equiv="cache-control" content="no-cache">
<meta name="Type" content="Service">


<link rel="stylesheet" type="text/css" href="<%%$templatecssurl%%>">

<%%$meta%%>
<%%$jscript%%>
<%%$fbjs%%>


</head>
<body>

<%%$shopuserheader%%>
<div align="center">

<table cellspacing="0" cellpadding="2" border="0" width="<%%$shopausgabebreite%%>">
<tr>
    <td valign="top">

<%%$betreiberbannercodeoben%%>


<!-- SHOPKOPF START -->
<table cellspacing="0" cellpadding="0" border="0"  width="100%">
<tr>
    <td class="shopgruss"><%%$gast_or_login%%></td>
</tr>
<tr>
    <td class="shopkopf"><%%$shoptopmenue%%> </td>
</tr>
<tr>
    <td><img src="<%%$templateset%%>/pics/pixel.gif" alt="Pixel" width="150" height="3" border="0"></td>
</tr>
</table>
<!-- SHOPKOPF ENDE -->	


<table cellspacing="0" cellpadding="0" border="0" width="100%">
<tr>
	<td align="left" valign="top" class="menue">

<!-- SHOPMENUE START -->
<%%$shopartikelmenu%%>

<img src="<%%$templateset%%>/pics/pixel.gif" alt="Pixel" width="<%%$menuespacer%%>" height="1" border="0"><br>
<!-- SHOPMENUE ENDE -->	
	</td>	
	
	<td><img src="<%%$templateset%%>/pics/pixel.gif" alt="Pixel" width="3" height="10" border="0"></td>
	<td  width="100%" valign="top" class="content">
<!-- SHOPCONTENT START -->

Die Datei globalshopfooter.html mit allen nötigen Platzhaltern (Beispiel) 

<!-- SHOPFUSS ANFANG-->	
<!-- SHOPCONTENT ENDE -->	
	</td>
</tr>
</table>

<!-- SHOPFUSS START -->
<table cellspacing="0" cellpadding="0" border="0"  width="100%">
<tr>
    <td><img src="<%%$templateset%%>/pics/pixel.gif" alt="Pixel" width="150" height="3" border="0"></td>
</tr>
<tr>
    <td class="shopbottom"><%%$bottomlinks%%> </td>
</tr>
</table>
<!-- SHOPFUSS ENDE -->	
<%%$betreiberbutton%%>
<%%$betreiberbannercodeunten%%>
</td>
</tr>
</table>
</div>
<%%$shopuserfooter%%>
</body>
</html>

Die Template CSS Datei mit allen nötigen Anpassungen (Beispiel)

Sind diese Dateien angelegt gilt es dden CSS Code in eine eigene Datei auszulagern. Wichtig ist hierbei die korrekte Anpassung der relativen Pfadangaben zu den verwendeten Bildern und den Verzeichnisnamen.

Die Anpassung muss stets nach dem Muster erfolgen:
../templates/TPL10000/pics/backgnd.jpg

TPL10000 = Templateverzeichnis, im Falle das es ein exklusives Template ist muss der Wert TPL10000 auf z.B. s000004_1 geändert werden. Dokumentieren Sie bitte die CSS Angaben, so fällt es später dem Kunden, bzw. Ihnen leichter dies anzupassen.

Bitte unbedingt beachten - Besonderer Bereich!
Der CSS Block von /* = MENUESPALTE DES SHOPS */ bis Anfang /* = SHOPAUSGABE RECHTE TABELLE */ dient der Menüformatierung. Hier müssen die CSS Bezeichnungen so wie hier angegeben im Template CSS vorhanden sein.

.menue
.menue a
.menue a:hover
.toprubrik
.toprub a
.toprub a:hover

Diese können natürlich von ihren Zuweisungen her (Farben, Schriftarten usw.) angepasst werden.

/* ===================================================================== */
/* = CSS EINSTELLUNGEN FUER SEITE */
/* ===================================================================== */
body {
/* Hintergrundbild - keines verwenden? - Angabe zwischen ("***") entfernen */
background-image: url(../templates/TPL10000/pics/backgnd.jpg);
/* Hintergrundfarbe */
background-color: #f9f7f2;
/* Schriftart */
font-family: Verdana, Arial;
/* Schriftgroesse */
font-size: 12px;
/* Schriftfarbe */
color: #000000;
/* Abstand zu Aussenelementen - Reihenfolge 12,3,6,9 UHR */
margin: 10px 0px 0px 0px;
}
/* ===================================================================== */
/* = ALLGEMEINE LINKS IM SHOP */
/* ===================================================================== */
a {
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Schriftfarbe */
color: #990000;
/* Link unterstrichen none/underline */
text-decoration: none;
}

a:hover {
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Schriftfarbe */
color: #cc9900;
/* Link unterstrichen none/underline */
text-decoration: underline;
}
/* ===================================================================== */
/* = CSS EINSTELLUNGEN SHOPKOPF BEGRUESSUNG UND INFOLINKS (WARENKORB ETC.) */
/* ===================================================================== */
.shopgruss {
/* Rand unten Breite, Art und Farbe */
border-bottom: 1px solid #cc6600;
/* Hintergrundarbe */
background-color: #f5ede0;
/* Randabstand */
padding: 3px;
/* Textausrichtung */
text-align: right;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

.shopkopf {
/* Rand unten Breite, Art und Farbe */
border-bottom: 3px solid #cc6600;
/* Hintergrundarbe */
background-color: #f1e7c7;
/* Randabstand */
padding: 3px;
/* Textausrichtung */
text-align: right;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}
/* ===================================================================== */
/* = LINKS IM SHOPKOPF */
/* ===================================================================== */
.shopgruss a, .shopkopf a {
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Schriftfarbe */
color: #640000;
/* Link unterstrichen none/underline */
text-decoration: none;
}
.shopgruss a:hover, .shopkopf a:hover {
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Schriftfarbe */
color: #000000;
/* Link unterstrichen none/underline */
text-decoration: underline;
}

/* ===================================================================== */
/* = CSS EINSTELLUNGEN FUER SEITENFUSS UNTERHALB SHOP */
/* ===================================================================== */
.shopbottom {
/* Rand oben Breite, Art und Farbe */
border-top: 3px solid #cc6600;
/* Rand unten Breite, Art und Farbe */
border-bottom: 1px solid #cc6600;
/* Hintergrundarbe */
background-color: #f1e7c7;
/* Randabstand */
padding: 3px;
/* Textausrichtung */
text-align: center;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}
/* ===================================================================== */
/* = LINKS IM SHOPKOPF UND SHOPFUSS */
/* ===================================================================== */
.shopbottom a {
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Schriftfarbe */
color: #640000;
/* Link unterstrichen none/underline */
text-decoration: none;
}

.shopbottom a:hover {
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Schriftfarbe */
color: #000000;
/* Link unterstrichen none/underline */
text-decoration: underline;
}

/* ===================================================================== */
/* = MENUESPALTE DES SHOPS */
/* ===================================================================== */
.menue {
/* Hintergrundbild - keines verwenden? - Angabe zwischen ("***") entfernen */
background-image: url(../templates/TPL10000/pics/mbg.gif);
/* Hintergrundbildwiederholung - x, y */
background-repeat: repeat-x;
/* Hintergrundfarbe */
background-color: #F9F7F2;
/* Rand oben Breite, Art und Farbe */
border-top: 2px solid #cc6600;
/* Rand rechts Breite, Art und Farbe */
border-right: 2px solid #cc6600;
/* Randabstand */
padding: 1px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
/* Hoehe */
height:100%;
}

/* ===================================================================== */
/* = LINKS IM HAUPTMENUE DES SHOPS */
/* ===================================================================== */
.menue a {
/* Darstellung als Block, bitte nicht aendern */
display: block;
/* Randabstand - Reihenfolge 12,3,6,9 UHR */
padding: 2px 2px 2px 2px;
/* Abstand zu Aussenelementen */
margin: 1px;
/* Hintergrundarbe */
background-color: #e7cfad;
/* Schriftgroesse */
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Schriftfarbe */
color: #640000;
/* Link unterstrichen none/underline */
text-decoration: none;
}

.menue a:hover {
/* Hintergrundarbe */
background-color: #ffffff;
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
/* Link unterstrichen none/underline */
text-decoration: none;
}

/* ===================================================================== */
/* = TOPRUBRIKENTRENNER IM HAUPTMENUE - STATISCHES MENUE*/
/* ===================================================================== */
.toprubrik {
/* Schriftgroesse */
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Hintergrundarbe */
background-color: #996600;
/* Schriftfarbe */
color: #ffffff;
/* Randabstand - Reihenfolge 12,3,6,9 UHR */
padding: 2px 2px 2px 2px;
/* Abstand zu Aussenelementen */
margin: 1px;
}

/* ===================================================================== */
/* = LINKS FUER TOPRUBRIKEN IM HAUPTMENUE - DYNAMISCHES MENUE*/
/* ===================================================================== */
.toprub a {
/* Darstellung als Block, bitte nicht aendern */
display: block;
/* Randabstand - Reihenfolge 12,3,6,9 UHR */
padding: 2px 2px 2px 2px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Hintergrundarbe */
background-color: #996600;
/* Schriftfarbe */
color: #ffffff;
}

.toprub a:hover {
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Hintergrundfarbe */
background-color: #cc6600;
/* Schriftfarbe */
color: #ffffff;
}

/* ===================================================================== */
/* = SHOPAUSGABE RECHTE TABELLE */
/* ===================================================================== */
.content {
/* Rand oben Breite, Art und Farbe */
border-top: 2px solid #cc6600;
/* Rand links Breite, Art und Farbe */
border-left: 2px solid #cc6600;
/* Hintergrundarbe */
background-color: #ffffff;
/* Randabstand */
padding: 3px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

/* ===================================================================== */
/* = ALLGEMEINE AUSGABE TABELLEN */
/* ===================================================================== */
.atop {
/* Hintergrundbild - keines verwenden? - Angabe zwischen ("***") entfernen */
background-image: url(../templates/TPL10000/pics/rowbg.gif);
/* Hintergrundbildwiederholung - x, y */
background-repeat: repeat-y;
/* Rand unten Breite, Art und Farbe */
border-bottom: 1px solid #caa36c;
/* Hintergrundfarbe */
background-color: #f3ede2;
/* Randabstand */
padding: 3px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

.acont {
/* Hintergrundfarbe */
background-color: #ffffff;
/* Randabstand */
padding: 3px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

.abott {
/* Rand unten Breite, Art und Farbe */
border-bottom: 1px solid #caa36c;
/* Hintergrundfarbe */
background-color: #f3ede2;
/* Randabstand */
padding: 3px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

/* ================================================================== */
/* = CSS EINSTELLUNGEN FUER FIELDSET UND LEGEND */
/* ================================================================== */
fieldset {
/* Randbreite, Art und Farbe */
border: 1px solid #e7cfad;
/* Randabstand */
padding: 4px;
/* Abstand zu Aussenelementen - Reihenfolge 12,3,6,9 UHR */
margin: 10px 0 5px 0;
/* Hintergrundbild - keines verwenden? - Angabe zwischen ("***") entfernen */
background-image: url(../templates/TPL10000/pics/fsbg.gif);
}
legend {
/* Hintergrundfarbe */
background-color: #f3ede2;
/* Randbreite, Art und Farbe */
border: 1px solid #cc6600;
/* Randbstand  - Reihenfolge 12,3,6,9 UHR */
padding: 1px 3px 1px 3px; 
/* Schriftgroesse */
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Schriftfarbe */
color: #000000;
}

/* ===================================================================== */
/* = CSS EINSTELLUNGEN FUER FORMULARTAGS START */
/* ===================================================================== */
.inpu {
/* Randbreite, Art und Farbe */
border: 1px solid #e7cfad;
/* Hintergrundfarbe */
background-color: #f9f7f2;
/* Schriftart */
font-family: Verdana, Arial;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

.inputbutton {
/* Randbreite, Art und Farbe */
border: 1px solid #e7cfad;
/* Hintergrundfarbe */
background-color: #f9f7f2;
/* Schriftart */
font-family: Verdana, Arial;
/* Schriftgroesse */
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Schriftfarbe */
color: #000000;
}


form {
display: inline;
}
/* ===================================================================== */
/* = CSS EINSTELLUNGEN FUER FEHLER HINWEISE ETC */
/* ===================================================================== */
.tippred {
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Schriftfarbe */
color: #cc0000;
}
.tippgreen {
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Schriftfarbe */
color: #339900;
}
/* ===================================================================== */
/* = SEITENNAVIGATION */
/* ===================================================================== */
/* Hintergrund, Randfarbe der Seitennavigationstabelle */
.naviborder {
/* Hintergrundfarbe */
background-color: #cc6600;
}

/* Schriftart, Schriftgroessen und Randabstand in Seitennavigation */
.tc, .tca, .tci {
/* Schriftart */
font-family:Verdana, Arial;
/* Schriftgroesse */
font-size: 11px;
/* Randbstand */
padding: 2px;
}

/* Schriftgewicht, Schriftfarbe, Breite, Ausrichtung und Hintergrundfarbe 
der Seitennavigation - weitere Seiten */
.tc {
/* Textausrichtung */
text-align: center;
/* Hintergrundfarbe */
background-color: #f5ede0;
/* Breite */
width: 18px;
}

/* Schriftgewicht, Schriftfarbe, Breite, Ausrichtung und Hintergrundfarbe 
der Seitennavigation - aktuelle Seite */
.tca {
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Breite */
width: 18px;
/* Textausrichtung */
text-align: center;
/* Hintergrundfarbe */
background-color: #ffffff;
/* Schriftfarbe */
color: #000000;
}

/* Schriftart, Schriftgewicht und Hintergrundfarbe der Seitennavigationsinfo */
.tci {
/* Schriftfarbe */
color: #000000;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Hintergrundfarbe */
background-color: #f1e7c7;
}

/* Eigenschaften der Links in der Seitennavigation */
.tc a {
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Link unterstrichen none/underline */
text-decoration: none;
/* Schriftfarbe */
color: #640000;
}

/* Eigenschaften der Links bei Mouseover in der Seitennavigation */
.tc a:hover {
/* Schriftgewicht normal/bold */
font-weight: normal;
/* Link unterstrichen none/underline */
text-decoration: underline;
/* Schriftfarbe */
color: #000000;
}
/* ===================================================================== */
/* = Standard Info Div's */
/* ===================================================================== */
.infoout {
/* Randbreite, Art und Farbe */
border: 1px solid #e7cfad;
/* Hintergrundarbe */
background-color: #f1e7c7;
/* Schriftfarbe */
color: maroon;
/* Randbstand */
padding: 3px;
}
/* ===================================================================== */
/* = Topangeboteausgabe Startseite */
/* ===================================================================== */

/* Abgrenzung der Topangebote von Startseiteninhalten */
.topangebotespalte {
/* Rand links Breite, Art und Farbe */
border-left:2px solid #caa36c; 
/* Rand unten Breite, Art und Farbe */
border-bottom:2px solid #caa36c;
}

/* Ausgabe des Spalte Aktuelle Topangebote */
.topangebotekopf {
/* Schriftgroesse */
font-size: 11px;
/* Schriftgewicht normal/bold */
font-weight: bold;
/* Hintergrundarbe */
background-color: #996600;
/* Schriftfarbe */
color: #ffffff;
/* Randabstand - Reihenfolge 12,3,6,9 UHR */
padding: 3px 3px 3px 3px;
/* Abstand zu Aussenelementen */
margin-bottom: 5px;
}

/* Topangebotetabelle Abstand unten und Breite */
.topausgabetab {
/* Abstand nach unten */
margin-bottom: 5px;
/* Breite der Topangeboteausgebe */
width: 190px;
}

/* Topangebote Titezelle */
.toptop {
/* Rand unten Breite, Art und Farbe */
border-bottom: 1px solid #caa36c;
/* Hintergrundfarbe */
background-color: #ffcc00;
/* Randabstand */
padding: 3px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

/* Topangebote Ausgabe */
.topcont {
/* Hintergrundfarbe */
background-color: #ffffff;
/* Randabstand */
padding: 3px;
/* Schriftgroesse */
font-size: 11px;
/* Schriftfarbe */
color: #000000;
}

/* ===================================================================== */

Nach oben

5. Templatescreenshots bereitstellen  

Um die Templates für den Admin und Benutzer eines Shops in der Templategalerie bereitzustellen tun Sie bitte folgendes:
  1. Fertigen Sie einen Screenshot von der Templateausgabe an
  2. Speichern Sie diesen mit dem Templatename ab als z.B. TPLxxxxx.png, TPLxxxxx.gif oder TPLxxxxx.jpg
  3. Erstellen Sie mit einem Grafikprogramm, z.B. Photoimpact, Irvan View o.a. eine auf 280 x 197 Pixel verkleinerte Version des Screenshots. Muster

    Auch diesen als als z.B. TPLxxxxx.png, TPLxxxxx.gif oder TPLxxxxx.jpg abspeichern.
  4. Nun die beiden Dateien in das Verz. templatescreens uploaden,

    den großen Screenshot dabei in das Verzeichnis maxi.
  5. Die Dateienn werden dann automatisch ausgelesen und in der Templategalerie dargestellt.

Nach oben

6. Fragen dazu?  

Dieses Tutorial kann natürlich nicht auf alle Details eingehen - zu vielfältig sind die Möglichkeiten ein Templateset zu erstellen, für weitergehende Fragen besuchen Sie bitte das Supportforum unter Inspire-World Dort im Forum gibt es eine Rubrik für den Shopserver.
Nach oben