Diese Dokumention kann keine umfassende Anleitung zur Erstellung eines Templates geben, jedoch eine Übersicht für Anfänger, die sich mit dem Aufbau eines Themas beschäftigen möchten.

In "Blog-Ansicht" bestimmen Sie, welches Thema Sie haben wollen. Um ein Thema zu installieren, klicken Sie auf den Karteireiter "Theme installieren oder aktualisieren". Sie können entweder eine Datei lokal oder von einer URL Adresse uploaden.

Wenn wir ein Thema bestimmt haben, erlaubt Dotclear zwei verschiedene Wege, um ein bereits vorhandenes Thema zu ändern:

Entweder Sie bearbeiten das Thema im "Theme Editor" oder Sie downloaden sich das Thema aus Ihrem "theme" Ordner und ändern es lokal. Wir raten zu letzterem, da Änderungen in CSS und auch HTML nicht immer voraussehbare Fehler erzeugen können. Es ist immer ratsam, ein Thema unter einem neuen Namen abzuspeichern, um nicht das Original zu überschreiben.

Wenn Sie im Theme-Editor sind, werden Sie sehen, dass die eigentlichen Templatedateien mit der Endung .html einen schwarzen Listenpunkt haben. Dagegen hat die CSS Datei style.css einen orangen Punkt.

Theme Editor

Das bedeutet, dass das Thema "Blue Silence" die von Dotclear vorgegebenen Templatedateien verwendet und das gesamte Aussehen des Themas nur mit Hilfe der CSS Datei style.css erstellt wurde.

  1. Sie downloaden das Thema auf Ihre lokale Festplatte.
  2. Erzeugen Sie eine Kopie des Ordners und ändern den Namen um "mein-eigenes-Thema". Verwenden Sie keine Leerzeichen!
  3. Öffnen Sie den Ordner "mein-eigenes-Thema" und die darin befindende _define.php. Sie können diese mit einem Editor wie Scite bearbeiten.
  4. Ändern Sie /* Name */ "Blue Silence",in/* Name */ "Mein eigenes Thema"
  5. Uploaden Ihren eigenen Themenordner mit FileZilla oder zippen Sie Ihr Thema und verwenden den Uploader in Dotclear.

Ergebnis: Obwohl Ihr Thema identisch mit dem Originalthema ist, können sie nun erkennen, was Ihre Version ist.

Mein eigenes Thema

Das Thema "Blue Silence" verwendet nur 1 CSS Datei, um das Aussehen zu bestimmen. Es gibt andere Themen, deren Layout in einer zusätzlichen Datei layout.css festgelegt ist. Man kann die Namen der CSS Dateien beliebig festlegen, sollte aber geläufige Bezeichnungen geben.

Klickt man auf die style.css im Theme-Editor, bekommt man den Inhalt zu sehen.

Eines der häufigsten Fragen in Blogforen ist, wie man den Header, das Titelbild austauschen oder die Schrift verändern kann.

Die meisten style.css Dateien folgen einem bestimmten Muster, der von den Aerokits vorgegeben ist, und wie diese auch in der finalen Webpage vorzufinden ist:

  • Background
  • die meist geläufigsten Befehle wie "a" für Links usw.
  • Page, wo sich unser Blog befindet
  • Top, wo Titelbild und Blogname zu finden sind
  • Content
  • Sidebar 
  • Footer

Das Thema "Blue Silence" hat folgende Angaben in

#top { width: 732px; margin: 0 auto; padding: 54px 34px 46px; background: transparent url(img/top.jpg) no-repeat left bottom; }

Das bedeutet, dass Top eine Weite von 732px hat und ein Hintergrundbild "top.jpg" verwendet, das sich im Themenorder "blueSilence" im Ordner "img" befindet. In der Tat, wenn Sie das Thema "BlueSilence" heruntergeladen haben, werden Sie dort einen Ordner "img" vorfinden.

Titel

Wenn man nun das Hintergrundbild ändern will, tauscht man entweder nur das Bild im Order "img" aus und lädt das neue Bild unter dem gleichen Namen "top.jpg" wieder hoch oder aber man gibt seinem Bild einen eigenen Namen und ändert dann die Angabe in der style.css zum Beispiel:

background: transparent url(img/mein-eigenes-bild.jpg) no-repeat left bottom;

Fuer weitere Layoutfragen, empfehle ich folgende Links:

W3Schools - http://www.w3schools.com/css/default.asp

Klicken Sie auf ein Thema Ihrer Wahl und beachten Sie, dass auch eine Beispielübung ausprobiert werden kann. Sie klicken dazu in CSS Examples auf "Try-It-Yourself!" und Sie werden an Hand Ihrer eigenen Änderungen sehen, wie sich eine Änderung auswirkt.

Sie werden mit wiederkehrenden Begriffen konfrontiert und wir empfehlen, sich die Punkte CSS Styling und CSS Box Model anzusehen. Zum Beispiel:

Wer sich mit CCS3 beschäftigen will, findet ebenfalls auf W3Schools das passende:

Zum Beispiel die borders - http://www.w3schools.com/cssref/css3_pr_border-radius.asp

Wenn Sie auf Play it drücken, können Sie selbst ausprobieren, was passiert.

Gerade bei der Verwendung von CSS3 ist es wichtig die Browser-Kompatibilität zu beachten. W3Schools zeigt diese an, jedoch wird das eine oder andere in Browsern durch ein jüngstes Update bereits unterstützt.

Generell sollten alle Templates in allen gaengigen Browsern relativ gleich aussehen. Das ist nicht immer einfach und erfordert viel Geduld und Erfahrung.


Hinweis:
Diese Dokumentation, wurde Original von Ben Griffith am 14.01.2012 auf dem ehemaligen Dotclear-Germany Portal veröffentlicht