User Tools

Site Tools


de:getsimplede:eigene-themes-erstellen

Eigene Themes erstellen

Wie geht man vor, wenn man ganz bestimmte Vorstellungen hat vom Aussehen der Seite, aber keines der vorhandenen Seitenvorlagen entspricht diesen Vorstellungen?

Das Erstellen eigener Seitenvorlagen ist gar nicht schwer.

Haben Sie bereits eine Vorlage, die für GetSimple passend gemacht werden soll, und bereits das HTML-Grundgerüst und die notwendigen CSS-Definitionen und evtl. Scripte enthält., dann müssen Sie nur noch die Template-Tags einbauen, um aus der statischen eine dynamische Vorlage zu machen.

FreeCSStemplates.orgSie können z.B. eine Webseitenvorlage von der Seite Freecsstemplates.org nehmen und dieses für GetSimple anpassen. Schauen Sie sich zum Beispiel diese Vorlage an:
http://www.freecsstemplates.org/preview/greenorange/

Wenn Sie Ihnen gefällt, laden Sie sich die ZIP-Datei herunter, entpacken Sie sie, kopieren Sie sich die datei index.html als template.php und schon haben Sie das Gerüst für eine GetSimple-Seitenvorlage.

Jetzt müssen nur noch die entsprechenden Befehle / Template-Tags eingebaut werden. Was dabei zu tun ist, können Sie sich anschauen beim Template Snail, das auf der GetSimple-Webseite zum Download bereit steht und ebenfalls auf einer Vorlage von freecsstemplates.org beruht.

Der Menü-Bereich aus der Vorlage:

<div id="menu">
                <ul>
                        <li class="current_page_item"><a href="#">Homepage</a></li>
                        <li><a href="#">Portfolio</a></li>
                        <li><a href="#">About</a></li>
                        <li><a href="#">Contact</a></li>
                </ul>
        </div>

wird ersetzt durch:

<div id="menu">
                <ul>
                        <?php get_navigation(get_page_slug(FALSE)); ?>
                </ul>
        </div>

Die Zeile

<?php get_navigation(get_page_slug(FALSE)); ?>

ist ein sogenannter Template-Tag, der automatisch die Menü-Einträge für Ihre Seiten erstellt.

Gehen Sie so Schritt für Schritt in der template.php vor, ersetzen Sie den statischen Inhalt durch die entsprechenden Template-Tags und Sie erhalten eine dynamische Seitenvorlage, die Sie zum Schluß in den /theme/-Ordner Ihrer GetSimple-Installation hochladen, Wenn Sie dann diese Vorlage aktivieren, sieht Ihre Seite so aus wie im Screenshot zu sehen.

Warum gerade Vorlagen von der Seite www.freecsstemplates.org?
Auf der Webseite dort werden die Gründe schon genannt, und wir können uns dem nur anschließen:

  • die Vorlagen sind kostenlos und mit der Creative Commons Attribution Lizenz frei nutzbar
  • die Dateien sind sehr klein  (z.B. werden nur wenige Bilder eingebunden) und laden flott
  • Tabellenfreies Layout
  • Die Vorlagen entsprechen den W3C Standards und validieren korrekt (XHTML Strict)
  • eingebundene Bilder stammen aus “public domain”-Quellen, von  PDPhoto.org and Wikimedia Commons und sind damit auch kostenfrei und rechtefrei.

Zudem gibt es auf dort der Webseite eine recht große Auswahl an netten Vorlagen, die sich sehr gut als Seitenvorlage eignen. Und die auch ästhetisch recht ansprechend sind.

de/getsimplede/eigene-themes-erstellen.txt · Last modified: 2014/05/03 21:57 by Lars