No quote available.

Eigene Styles (Übersetzung "Styles")

Styles benutzen

Ein Style legt fest, wie ein Blog sich dem Besucher optisch präsentiert. serendipity bringt einige fertige Themes mit, welche vollständig über Cascading Style Sheets? (CSS) den eigenen Wünschen angepasst werden können.

Um auszuwählen, wie ein Blog aussieht, meldet man sich auf der Verwaltungs-Seite an und wählt Styles verwalten. Man wird auf eine Seite weitergeleitet, die eine Übersicht installierter Styles mit dem Autor des Styles und meist sogar einem kleinen Vorschaubild bietet. Man wählt über den Radiobutton neben den Styles den gewünschten Style aus und klickt auf Save. Das Blog erscheint beim nächsten Reload der Seite im gewünschten Layout.

Wer es seinen Besucher überlassen möchte, wie das Blog aussieht, sollte sich das Template Dropdown Sidebar plugin anschauen.

Einen Style erschaffen

Es ist sehr einfach, seinen eigenen Style zu schaffen. Alle zur Verfügung stehenden Style liegen in jeweils einem eigenen Unterverzeichnis des Unterverzeichnisses templates von s9y.

Um einen neuen Style zu erschaffen, ist es empfehlenswert, ein bereits existierendes Unterverzeichnis (das Standardtheme bietet eine gute Ausgangslage) in ein neues Unterverzeichnis zu kopieren und dort die Dateien zu verändern.

Hinweis: Man muss lediglich die Vorlagedateien kopieren, die man auch verändern möchte. Nehmen wir an, dass die neue Vorlage das Layout von atom.css verändern soll - dann muss nur diese Datei in das Verzeichnis des neuen Style kopiert werden. Alle Vorlagedateien, die im Verzeichnis des neuen Styles nicht vorhanden sind, werden aus dem Verzeichnis des Standardthemes übernommen. Dieses gilt jedoch nur für Vorlage- und andere Dateien, die über {serendipity_getFiles}-Funktionen nachgeladen werden. Dateien, die in style.css eingebunden werden (wie z.B. "background-image: {TEMPLATE_PATH}"), suchen lediglich im Verzeichnis des Styles; daher können auf diese Weise keine Dateien des Standardthemes nachgeladen werden, es sei denn, man kopiert die betreffenden Dateien in das Verzeichnis des neuen Styles. Das klingt allerdings komplizierter, als es ist: Man muss nur sicherstellen, dass alle Dateien, die in style.css über {TEMPLATE_PATH} eingebunden werden, auch im Verzeichnis des Styles existieren.

Dieses ist im neuen Vorlageschema, welches mit serendipity 0.8 eingeführt wurde, von besonderer Bedeutung! Zudem ist auf jeden Fall eine info.txt notwendig; ohne diese erscheint die Vorlage nicht in der Auswahlliste in der Verwaltungsoberfläche!

Eine leere Standardvorlage für ein Stylesheet von Stefan Willoughby gibt es hier.

In jedem Unterverzeichnis eines Style gibt es verschiedene Dateien:

Die CSS-Dateien

Das Wichtigste sind die CSS-Dateien, welche die optische Darstellung einer Seite definieren.

style.css

Dieses Stylesheet enthält alle CSS-Eigenschaften für die Oberfläche und Verwaltungsseiten des Weblogs.

atom.css

Dieses Stylesheet gehört zur Atom-Version des RSS/XML Syndications Links. Es beschränkt sich auf nur ein paar Elemente, die zu verwendeten XML-Anweisungen passen.

htmlarea.css

Wenn man den WYSIWYG-Editor verwendet, um Einträge zu verfassen, möchte man vielleicht, dass dessen Eingabefeld sich optisch dem Rest der Oberfläche anpasst. Über die CSS-Klassen in dieser Datei kann man die Optik des Eingabefeldes verändern.

Ein neues HTML-Layout erschaffen (Serendipity 0.8)

Seit Version 0.8 bietet serendipity eine neue, flexible Methode, die optische Darstellung eines Blog zu verändern. Man ist nicht länger auf CSS beschränkt - obwohl es weiterhin vorzuziehen ist, Veränderungen nur über die oben erwähnten CSS-Dateien vorzunehmen!

Die bekannte Datei 'layout.php' aus serendipity 0.7 ist nunmehr veraltet, wird jedoch aus Gründen der Abwärtskompatibilität nach wie vor unterstützt, so dass alte Styles, die auf layout.php basieren, in serendipity 0.8 nach wie vor funktionieren sollten. Dennoch erhält man beim Wechsel der Styles einen Warnhinweise, wie in der FAQ, Section 5, beschrieben.

An Stelle der layout.php finden sich im Verzeichnis der Standardvorlage nun verschiedene *.tpl-Dateien, welche man den eigenen Vorstellungen anpassen kann. Wie bereits erwähnt muss man zur Erschaffung eines eigenen Styles die betreffende .tpl-Datei in ein eigenes Unterverzeichnis kopieren, ehe man diese verändert. Alle Dateien, die man nicht verändert, werden aus templates/default/ geholt.

Die .tpl-Dateien verwenden Smarty Template-Codes. Dabei handelt es sich in erster Linie um (X)HTML-Code, versetzt mit einigen besonderen Variablen. Die verschiedenen {$variable}, die in diesen .tpl-Dateien vorkommen, werden verwendet, um spezielle Inhalte aus serendipity darzustellen.

Es gibt ziemlich viele .tpl-Dateien, über die spezifische Blöcke des Layouts verändert werden können. Wenn man also nur den Kalender unterschiedlich zum Standardtheme darstellen lassen möchte, kann man nur die Datei plugin_calendar.tpl in das Unterverzeichnis des neuen Styles kopieren und die anderen Dateien auslassen.

Ein wichtiger Hinweis an dieser Stelle: Wenn man serendipity aktualisiert und eigene .tpl-Dateien verwendet, wäre es möglich, dass neue Funktionalitäten der neuen serendipity-Version verloren gehen, weil gelegentlich .tpl-Dateien im Standardstyle verändert werden. In diesem Fall müssten diese Änderungen in den modifizierten Vorlagedateien manuell nachgetragen werden. Wer veränderte .tpl-Dateien in seinem eigenen Style verwendet sollte also stets neue Versionen der Datei NEWS auf Veränderungen in den Vorlagedateien überprüfen.

Nun zu den verschiedenen .tpl-Dateien und ihrer Bedeutung:

entries.tpl

Vielleicht die wichtigste unter den .tpl-Dateien. Sie umfasst Inhalt und Layout für die Anzeige von Einträgen (Übersicht und erweiterter Eintrag).

index.tpl

Dieses ist die alles umfassende Hauptseite (de facto also der Ersatz für 'layout.php'). Hier sollte man Veränderungen vornehmen, wenn man beispielsweise die Darstellung der Seitenleiste oder des Banners verändern möchte.

plugin_calendar.tpl

Enthält den HTML-Code für das Kalender-Plugin.

sidebar.tpl

Der umschließende Code für die Plugin-Seitenleiste des Blogs.

trackbacks.tpl

Diese Datei stellt die Liste der Trackbacks für einen Eintrag dar.

commentform.tpl

Diese Datei enthält das Kommentar-Formular, welche in der vollständigen Ansicht eines Eintrages angezeigt wird. Wichtiger Hinweis: Die Feldnamen der Eingabefelder sollten nicht verändert werden, das sich das serendipity-System von den vordefinierten Namen abhängt.

commentpopup.tpl

Diese Datei enthält das Layout für das Popup-Fenster für Kommentare.

comments.tpl

Diese Datei enthält das Layout für die Kommentarliste zu einem Eintrag.

content.tpl

Dieses ist im Wesentlichen eine zentrale Datei, die andere .tpl-Dateien miteinander verknüpft.

entries_archives.tpl

Diese Datei enthält eine Liste der Einträge pro Monat/Woche/Tag in der Archiv-Unterseite von serendipity.

entries_summary.tpl

Diese Datei enthält eine Übersichtsseite der Einträge pro Monat/Woche/Tag in der Archiv-Unterseite von serendipity.

config.inc.php / Smarty erweitern

Diese Datei existiert normalerweise nicht in der Standardvorlage. Aber man kann sie einem Vorlageverzeichnis hinzufügen, um spezielle PHP-Operationen vorzunehmen. In serendipity 0.7 konnte man den betreffenden Code direkt in layout.php integrieren, aber nachdem diese Datei nicht mehr existiert, brauchte es einen neuen Platz für eigenen PHP-Code.

Die Datei config.inc.php wird von serendipity direkt nach der Erstellung des Smarty-Grundgerüstes ausgeführt. Daher ist dieses ein guter Punkt, um beliebigen eigenen PHP-Code einzufügen, um das Smarty-Grundgerüst zu verändern.

Man könnte z.B. mit folgendem Code eigene Funktionen einbinden:

<?php
$serendipity['smarty']->register_function('my_custom_function', 'my_custom_function');

function my_custom_function($params, &$smarty) {
  return 'I customized this: ' . $params['stuff'];
}
?>

Auf diese Weise kann man auf die so registrierte Funktion in allen .tpl-Dateien zugreifen. Hinweise zur Smarty-API finden sich in der Smarty-Dokumentation.

Die Datei config.inc.php kann auch verwendet werden, um jeglichen anderen PHP-Code vor der Darstellung des Ausgabe auszuführen.

Das Layout der Verwaltungsoberfläche (Serendipity 0.8)

Seit serendipity 0.8 kann die Verwaltungsoberfläche unabhängig von der Blogoberfläche über eigenen CSS-Code verändert werden. Das Unterverzeichnis 'admin/' enthält Grafiken und die style.css für die Verwaltungsoberfläche. .tpl-Dateien können hierfür allerdings nicht verändert werden.

Wenn man zuvor die Verwaltungsoberfläche über CSS-Tags in der style.css des Blogs verändert hatte, müssen diese in die neue Datei admin/style.css verschoben werden. Wir bedauern diese Umstände, aber dieser neue Weg macht es einfacher, den Code zu verwalten. Zudem war es vorher schwieriger, die Verwaltungsoberfläche zu gestalten, weil es Überschneidungen zu den CSS-Tags des Blogs gab.

Die layout.php verändern (Serendipity <= 0.7)

Diese PHP-Datei ist das Herzstück von serendipity 0.7. Sie kombiniert die Seitenleisten anhand verschiedener Parameter mit dem Bereich für Einträge. Normalerweise sollten Benutzer diesen Code gar nicht verändern, will man jedoch den Kern von s9y verändern, ohne sich mit internen Dateien beschäftigen zu müssen, kann man über diese Datei auf den kompletten Umfang der s9y-API zugreifen. Gängige Anwendungen dafür werden in den Beispieldateien demonstriert.

Wenn diese Datei im Unterverzeichnis eines neuen Styles nicht vorhanden ist, wird die grundsätzliche Darstellung der Datei /default/layout.php entnommen.

Seit serendipity 0.8 sind diese Hinweise hinfällig.

info.txt erzeugen

In dieser Datei können Angaben zum Autor eines Styles untergebracht werden, die dann in der Verwaltungsoberfläche von s9y angezeigt werden.

preview.png erzeugen

Um einen schnellen Eindruck zu haben, wie ein Style aussieht, sollte man einen kleines Bildschirmfoto des Layouts in der Datei preview.png abspeichern.

Grafiken

Im Unterverzeichnis img des Verzeichnisses einer Vorlage können verschiedene Grafiken enthalten sein:

back.png

Diese Grafik wird im Kalender-Plugin als 'Zurück'-Pfeil verwendet.

forward.png

Diese Grafik wird im Kalender-Plugin als 'Vorwärts'-Pfeil verwendet.

xml.gif

Diese Grafik wird verwendet, um Links aus XML-Dateien (wie etwa für die RSS-Feeds oder das Kategorien-Plugin) anzuzeigen.

cry_smile.gif, embaressed_smile.gif, omg_smile.gif, regular_smile.gif, sad_smile.gif, shades_smile.gif, teeth_smile.gif, tounge_smile.gif, wink_smile.gif

Verschiedene Emoticons, die vom Emoticate Event Plugin verwendet werden, um Text-Smilies in grafische Smiles umzusetzen. Man könnte diese Grafiken der Optik der Vorlage anpassen.

Um Smilies individuelle Grafiken zuzuordnen kann man im Unterverzeichnis des Styles eine Datei 'emoticons.inc.php' anlegen und folgendes Array benutzen:

   <?php
   $serendipity['custom_emoticons'] = array(
    ":'("  => serendipity_getTemplateFile('img/cry_smile.gif'),
    ':-)'  => serendipity_getTemplateFile('img/regular_smile.gif'),
    ':-O'  => serendipity_getTemplateFile('img/embaressed_smile.gif'),
    ':O'   => serendipity_getTemplateFile('img/embaressed_smile.gif'),
     ...
    );
    ?>

Das überschreibt das Standardset Emoticons in der Datei plugins/serendipity_event_emoticate/serendipity_event_emoticate.php.

Hinweis: Die Smilies im obigen Beispiel erwarten Array-Schlüssel als einfache Strings. Wenn man reguläre Ausdrücke benutzen will oder muss, sollte man in der Datei die Variable

$serendipity['custom_emoticons_regexp'] = true;

setzen, damit serendipity reguläre Ausdrücke auswertet.

Verfügbare IDs/Klassen im Style

Übliche HTML-Elemente

Das Element <h1> wird für den Titel der Seite, das Element <h2> für den Untertitel verwendet. <h3> umfasst das Datum eines Eintrages, <h4> den Titel.

Seitenleisten-Plugins werden - von der layout.php abhängig - entweder in <table>-Elementen oder <div>-Behälter eingebettet. Abhängig davon sind Unterelemente entweder <td> oder ebenfalls ein <div>.

Alle anderen HTML-Elemente können jeweils über ein umfassendes Element (entweder eine Klasse oder eine ID) gestaltet werden.

.emoticon

Ein vom Emoticon Markup Event Plugin erzeugter Smily.

#serendipity_banner

Der Kopfbereich einer Seite, der Blogtitel (<h1>) und Beschreibung (<h2>) enthält.

a.homelink1, a.homelink2

Umfasst die Links in Blogtitel (<h1>) und Beschreibung (<h2>).

.serendipity_calendar

Umfasst die Tabelle des Kalender-Plugins (welche <td>s und <tr>s enthält).

td.serendipity_weekDayName, td.serendipity_calendarHeader

Tabellenzellen, die entweder einen Wochentag oder die Kopfzeile der Tabelle umfassen.

td.serendipity_calendarBlankDayFirstInRow, td.serendipity_calendarDayFirstInRow, td.serendipity_calendarBlankDay, td.calendarDay, td.serendipity_calendarBlankDayLastInRow, td.serendipity_calendarDayLastInRow

Bereiche für Tage (ohne Eintrag).

#mainpane

Der Behälter für den hautptsächlichen Inhalt inklusive der Seitenleiste(n).

#content

Der Behälter für die Einträge auf der Hauptseite.

#serendipityLeftSideBar

Die komplette linke Seitenleiste.

#serendipityRightSideBar

Die komplette rechte Seitenleiste.

.serendipitySideBarItem

Umfasst jeweils ein Plugin im Bereich der linken oder rechten Seitenleiste.

h3.serendipitySideBarTitle

Der Titel eines in einer Seitenleiste angezeigten Plugins.

.serendipitySideBarContent

Der Inhalt eines in einer Seitenleiste angezeigten Plugins.

.serendipity_Entry_Date

Dieser Behälter umfasst alle Einträge eines Tages.

h3.serendipity_date

Das Datum eines Eintrags.

h4.serendipity_title

Der Titel eines Eintrags.

.serendipity_entry

Dieser Behälter umfasst den kompletten Inhalt eines Eintrags.

.serendipity_entry_body_folded

Umfasst den "Anreißer"-Test eines Eintrage. Wir nur in der Eintrags-Übersicht, aber nicht in der Einzelansicht eines Eintrags benutzt.

.serendipity_entry_body_unfolded

Umfasst den "Anreißer"-Test eines Eintrage. Wir nur in der Einzelansicht eines Eintrags, aber nicht in der Eintrags-Übersicht benutzt.

.serendipity_entry_extended

Umfasst den Text des erweiterten Eintrags, wir nur in der Einzelansicht eines Eintrags benutzt.

.serendipity_entryFooter

Zeigt innerhalb von serendipity_entry die detaillierten Informationen über den Verfasser (Name, Zeit, zu der der Eintrag geschrieben wurde usw.) an.

.serendipity_commentsTitle

Titel für den Kommentarbereich.

.serendipity_comment

Kommentarbereich in der Einzelansicht eines Eintrags (pro Kommentar).

.serendipity_comment_source

Enthält Details über den Verfasser eines Kommentars.

.serendipityCommentForm

Umfasst das Kommentar-Formular.

.serendipity_commentsLabel

Umfasst im Kommentar-Formular die Beschreibung eines Eingabefeldes.

.serendipity_commentsValue

Umfasst im Kommentar-Formular das Eingabefeld selbst.

#serendipity_comment_page

Der umfassender Behälter im Popup-Fenster eines einzelnen Kommentars.

.serendipity_imageComment_center, .serendipity_imageComment_left, .serendipity_imageComment_right

Für Kommentare zu Grafiken aus der s9y-Mediendatenbank. Umfasst innerhalb von .serendipity_entry die komplette Kommentarbox.

.serendipity_imageComment_img, .serendipity_imageComment_txt

Die eingebetteten Teile innerhalb von .serendipity_imageComment_*, die Kommentar und die eigentliche Grafik voneinander trennen.

#serendipity_admin_entries_page, #serendipity_admin_image_page, #serendipity_admin_page

Verwaltungsoberfläche: Der gesamte Seitenbereich für Einträge, Mediendatenbank und Administration.

.serendipity_Admin_title

Verwaltungsoberfläche: Titel der Verwaltungsoberfläche.

.serendipity_Admin

Verwaltungsoberfläche: Inhaltsbereich.

Das ist zu viel!

Obwohl oder gerade weil es viele verschiedene Kombinationen und Möglichkeiten gibt, diese IDs und Klassen zu benutzen, kann man leicht von ihrer Vielfalt verwirrt werden. Mozilla Firefoxes EditCSS kann dabei ein hilfreiches Werkzeug sein.

Mithelfen!

Wer einen eigenen Style erschaffen hat, kann diesen gerne einreichen? :-)

Serendipity

PHP-powered, flexible Blogging/CMS application