So ändern Sie ein Template selber ab

Geschrieben von: Jan H. Samstag, den 03. September 2011 um 14:55 Uhr

Kleine Hilfe zum ändern des xtcModified „Kids Splashart“ Template.

In diesem Artikel möchte ich Ihnen ein paar Tipps mit auf den Weg geben, wie Sie die hier auf janswerk.de bereitgestellten Templates ändern können.

Die Informationen in diesem Beitrag beziehen sich größtenteils auf das Template Kids Splashart, lassen sich aber ohne Probleme auf andere Templates anwenden.

Webshop Logo – ändern der Grafik

Wenn Sie sich das Template heruntergeladen und installiert haben, sehen Sie standardmäßig ein Demologo. In diesem Fall „Onlineshop“ es liegt im Verzeichnis kids_spleshart/images/logo.gif.

Als Alternativ Tag wurde der Platzhalter für den Webshopname (alt="{$store_name}) hinterlegt. Das Logo misst 243px x 83px. Sie können nun ganz einfach Ihre Logografik mit ebenfalls diesen Maßen erstellen und einfach das Template-Logo mit Ihrem überschreiben, indem Sie es im Benannten Ordner speichern.

Selbstverständlich können Sie auch das mitgelieferte Logo überarbeiten, indem Sie die Erstellungsdatei öffnen und nach Belieben ändern. Die Erstellungsdatei finden Sie im Ordner kids_splashart/images/Source, logo.png. (Nicht im Ordner kids_splashart/Source) Alle Grafiken wurden mit Adobe Fireworks erstellt und in Ebenen erstellt.

Da es sich hierbei um Vektorgrafiken handelt, können Sie die einzelnen Grafiken nach belieben vergrößern, verkleinern oder die Farben ändern. Geringe Programmkenntnisse zum bearbeiten der Fireworks PNG Dokumente sind für diese Vorgänge jedoch vorausgesetzt. Eine Fireworks Testversion die Sie 30 Tage uneingeschränkt benutzen können, finden Sie hier auf der Website von Adobe.

Abändern der Webshop Überschriften H1

Ein klein wenig komplizierter wird es, wenn Sie das Aussehen der Überschriften im Template kids_splashart ändern möchten.

Das Design der Überschriften besteht aus Grafik und dynamischen Text, der aus Ihrem xtcModified Webshop erzeugt wird. Das Design wird über CSS Tags in der stylesheet.css Datei im Template Verzeichnis festgelegt. Der Eintrag für die Überschriften sieht wie folgt aus

h1 {
    font-size: 20px;                     /* legt die Schriftgröße fest*/ 
    color: #66CCFF;                    /* für die Farbe*/
    font-family: Verdana, Arial, Helvetica, sans-serif;    /* Schriftart nebst Alternativen*/
    height: 32px;                        /* Höhe der Zeile*/
    padding-left: 15px;                    /* Abstand nach links*/
    margin-bottom: 10px;                    
    font-weight: normal;
    margin-right: 12px;
    margin-top: 10px;
    background-image: url(images/h1_ueberschrift.gif);/* Pfad zum Hintergrundbild*/
    background-repeat: no-repeat;            /* Hintergrundbild Verhalten*/
    background-position: bottom;            /* Anordnung unten*/
}

h1:first-letter {
    color:#FF6C0B;
    font-size: 32px;
    font-family: Geneva, Arial, Helvetica, sans-serif;
}

Die wirre Linie die als unterstrich dient, hat den Namen ueberschrift.gif und befindet sich ebenfalls im images Ordner. Die Bearbeitungsdatei finden Sie wieder im Order images/Source.

Auf die selbe Art und Weise können Sie auch den Kopfbereich ( images/header_kids.gif) verändern, der als Hintergrundbild m Template ein eingefügt wird.

#header{
    position:relative;
    height:170px;
    width:970px;
    display:block;
    overflow:auto;
    margin-bottom: 15px;
           background-image: url(images/header_kids.gif);
    background-repeat: no-repeat;
    padding-left: 10px;
    margin-top: 10px;
}