Das Blog hat nun sein eigenes Theme

Heute habe ich das neue Theme für das Blog zu 90% fertig und Scharf geschaltet.
Ich hoffe das auf Twenty Thirteen basierende Theme gefällt.
Hier und da gibt es noch einiges zu schleifen, es kommt auch noch ein nettes Logo in den Header, die Footerfarbe muss noch geändert werden, die Sociallinks in der Sidebar und unter den Artikeln angepasst werden.
Kommt Zeit kommt Rat

Erstellen eigener Seitenleisten in Serendipity

Da ich mich ein wenig problematisch angestellt habe in der Erstellung eigener Seitenleisten in Serendipity, habe ich einen sehr langen thread hervorgerufen, bis ich auf die Lösung des Problems kam. YellowLed sprach mich an, doch meinen Geistesblitz in schriftlicher Form niederzulegen und das werde ich auf jeden Fall machen, denn dann dürfte auch weiterhin Einigen die Erstellung eigener Themes mit mehr als einer Sidebar leichter fallen.

Bei der Erstellung eigener Sidebars ist der Dreh- und Angelpunkt in Serendipity die Datei confic.inc.php , die sich im Verzeichnis des Themes befindet, welches man selbst erstellt hat. Innerhalb der Datei config.inc.php lassen sich Variablen für das Theme erstellen, welche später für das Aussehen des Blogs zuständig sind. Als Beispiel nehme ich einmal das Theme von diesem Blog, auch wenn es noch nicht ganz fertig ist.
Das Theme besitzt eine sidebar, welche sich oben und eine sidebar welche sich im unteren Bereich direkt über den footer befindet.
Die obere sidebar spreche ich mit:

{if $is_single_entry !=true and $staticpage_pagetitle ==''}
<div id="sidebar_top">{if $topSidebarElements > 0}
 {serendipity_printSidebar side="top"}
 {/if}</div>
<!-- /#sidebar -->
 {else}
 {/if}

an.
Zeilen:
1. Wenn Du kein Einzeleintrag und keine statische Seite bist dann zeige an
2. DIV für die sidebar_top, div teilt den Inhalt in einzelne Abschnitte. Jeder Abschnitt kann seinen eigenen Format, der durch CSS bestimmt wird, haben und dies wird dann in der style.css definiert. Sprich Ort, Aussehen etc.
3. Wenn es Inhalte/Elemente gibt, welche größer als 0 sind dann gebe aus, die
4. sidebar Namens top
5-9 schliessen das Ganze, welches oben geöffnet wurde ab

Das Gleiche könnte man nun auch mit der unteren sidebar Namens footer machen, jene wird aber bei mir überall angezeigt und damit ist auch dementsprechend das Statement in der index.tpl kürzer:


Um diese beiden sidebars in der Konfiguration für die Plugins anzusprechen muss nun die config.inc.php angepasst werden:

$template_config = array(
array(
‘var’ => ‘sidebars’,
‘name’ => SIDEBAR_TITLE,
‘type’ => ‘hidden’,
‘default’ => ‘top,hide,footer,’
),
…. etc

Normalerweise startet innerhalb der config.inc.php des Templates ein array mit den Einstellungen für das Theme. An dieser Stelle wird definiert, welche Einstellungen das Theme besitzt. Siehe auch Was ist ein Array. In der index.tpl wurde in Zeile 4 im ersten Beispiel die sidebar top definiert und im zweiten Beispiel die sidebar footer. Diese finden wir in Zeile 6 wieder und haben sie als default definiert. Der Typ versteckt (hidden) in Zeile 5 bewirkt, dass ich nicht möchte, dass in den Themeeinstellung eine à„nderung vorgenommen werden kann und sie somit versteckt sind. Wenn dieser Typ ein string wäre, könnte man z.B. die sidebar top oder footer löschen.
Damit ich diese sidebars nun auch in der Oberfläche Plugins verwalten ansprechen kann und auch in meinem Theme vorhanden sind, stellt man an das Ende von seiner config.inc.php noch für jede sidebar eine Definierung für smarty:

$topSidebarElements = serendipity_plugin_api::count_plugins(‘top’);
$serendipity['smarty']->assign_by_ref(‘topSidebarElements’, $topSidebarElements);

$footerSidebarElements = serendipity_plugin_api::count_plugins(‘footer’);
$serendipity['smarty']->assign_by_ref(‘footerSidebarElements’, $footerSidebarElements);

In diesen Zeilen werden einmal für die obere sidebar ( top) und einmal für die untere sidebar (footer) die Anzahl der Plugins pro sidebar gezählt und smarty bekannt gemacht. Wenn der Zähler höher als 0 ist werden die Plugins ausgegeben, siehe dazu auch die Abfrage in dem Beispiel 1 Zeile 3 für die obere sidebar ( top).
Was man nun beachten sollte, ist die Zukunftssicherheit für das Theme, falls es noch unter einer späteren Smartyversion verfügbar sein soll.
Bei smarty hat sich der Aufruf der Funktion assign_by_ref geändert, welches sich in einer späteren Version von Serendipity widerspiegelt.
Das ganze würde dann für die ersten zwei Zeilen so aussehen:

$topSidebarElements = serendipity_plugin_api::count_plugins(‘top’);
if (strpos($serendipity['smarty']->_version, ’2′, 1)) {
assign_by_ref(‘topSidebarElements’, $topSidebarElements);
} else {
assignByRef(‘topSidebarElements’, $topSidebarElements);
}

Es wird abgefragt, welche Version von Smarty genutzt wird, handelt es sich noch um die Version 2 nutze assign_by_ref , wenn nicht nutze das neue assignByRef.
Hoffe ein wenig geholfen zu haben.

Neues Serendipity Template 2

So ein wenig mehr geschafft.
Die sozialen Links sind nun da, wo ich sie haben möchte und haben ein Ausblendeffekt mit CSS bekommen.
Der Facbook-like Knopf macht keine Verfolgung zu Facebook und wird erst nach einem Klick von Facebook geholt, somit sind die Facebookmenschen glücklich und solche Personen wie ich, welche kein Facebook mögen, werden nicht genervt ツ
In der Adminoberfläche, werden die Links in dem Theme nun automatisch generiert, wenn man sie eingetragen hat und es gibt auch eine Dropdown-Funktion. Das Menü ist auch reines CSS und mit li und ul konzipiert. Extra für die Kommentare wurde auch schon das Plugin für die Avatare direkt eingebunden, sprich, wenn es installiert ist, hat es seinen angestammten Platz.
Ein wenig Tricky, auf alle Fälle für mich, war das Verständnis die $sidebars in den Plugins richtig zu definieren, aber Dank der starken Hilfe im Serendipity-Forum habe ich auch das am heutigen Morgen geschafft. Sie lassen sich in dem Pluginbereich in der Adminoberfläche nun richtig mit Namen ansprechen.
Was ich gerne noch machen möchte bevor ich das Theme freigebe:
– à„nderung der Theme-Farben nach der Tageszeit des Besuchers
– à„nderung des Themes in der Form, dass es nicht direkt meinem gleicht, sprich Farben, verwendete Bilder ändern… man möchte ja irgendwo individuell bleiben.
– Noch eine optionale rechte Seitenleiste für jene, welche sie unbedingt brauchen.
– Aufräumen des Codes
– ein eigenes Mobiletemplate
– Google Plus1 für das serendipity_event_findmore-Plugin für einzelnen Einträge zum laufen bekommen

und noch ein paar Dinge die mir nun auch noch die Tage einfallen….

Neues Serendipity Template

Wie man langsam sieht, nimmt das Template immer mehr Gestalt an.
Ein paar Stellen gefixt, Menü auf reiner CSS-Basis mit Konfiguration im Adminbereich gemacht, Kommentare werden nun jedes 2te mit einer anderen Hintergrundfarbe versehen.
Nun muss ich mich um ein paar andere Dinge am Theme kümmern, dann die Farben und das Logo abändern, Code aufräumen und dann werde ich es dem Serendipity-Team unter der GPL zur weiterverbreitung anbieten.
Im Moment kloppe ich mich aber noch mit dem Plugin für die „sozialen Druckknöpfe“ rum, da jene Partout nicht direkt unter den Einträgen erscheinen wollen.

Ein kleiner Test mit dem neuen Template

Also ich bitte sich nicht zu wundern, wenn es ein wenig komisch wird, da ich das neue Template teste.
Lange Arbeit währt endlich Gut, hoffe ich
Also es fehlen noch einige Funktionen, die kommen aber nach.
[UPDATE]
So wie es ausschaut, geht sie zwar auf allen Browsern, aber:
– Schatten in der oberen Sidebar sehen unter Chromium sehr mau aus, im firefox 4.0, opera und der google-chrome beta geht es
– opera zickt wegen dem gruppo-Schriftzug der google-Fonts-api. Bold funktionierte nicht, sprich font-weight 700. Also ist dies erst einmal dünn, Überarbeiten.
– Die Überschriften sind in Firefox ein wenig verwaschen.
– Opera auf Android bekommt auch nicht alles hin. Es wäre zuviel aufzuzählen
– Das Twitterplugin macht das XHTML 1.0 ungültig. Es produziert 22 nette Fehler.
– Firefox weigert sich einen besuchten Link mit einem weißen Schatten und und einen Haken durch :before zu nutzen.

Bis Dato liegen Opera und Chrome in der neuen Version am weitesten Vorne. Sind auch ausser den Konsolebrowsern die einzigen grafischen, welche ich noch starte.

Kommentare zu weiteren Fehlern erwünscht.

Es wird noch ein Menü eingebaut, die untere Sidebar beflanzt und nach dem Code säubern wird das ganze dann mit anderen Farben Frei gegeben.

Theming Serendipity

Also mal eine kurze Meldung warum ich im Moment keinen einzigen Post von mir hören lasse.
Im Moment bin ich dabei ein Theme für Serendipiy, der weltbesten Bloggerengine, zu schreiben und das geht natürlich ein wenig an die Arbeit.
Da meine Zeit auch schon so ein wenig rar ist, dauert dies nun ein wenig.
Das ganze wird eine sehr schöne Sache sein und ich werde es eigentlich ohne Farben und Grafiken dann der Gemeinde zur Verfügung stellen. Somit ich wälze ich mich durch das Buch von Garvin, bearbeite wirklich jede Kleinigkeit nach meinem Gusto und keine Angst, es wird nicht so aussehen wie das Theme welches ich gerade benutze. Wobei zugeben muss man, dass die Zenburn-Farben Gut für die Augen sind und einzigartig bin ich dadurch auch.
Okay, okay, Eigenlob stinkt ツ
Somit bin ich im Moment schon so weit, dass bei dem Theme die Sidebar Links, Sidebar Bottom, Menü oben stehen und anteilig auch schon die entries.tpl von mir bearbeitet wurde.
Es kommen nun noch die Kommentare dran und ich dachte mir auch, dass vom Aufbau her eine fifty-fifty sidebar im oberen Bereich sich auch ganz gut tut, man jene, aber dann für die vollen Einträge abschaltet etc.
Im Neudeutsch ist dann Home die Landing page.
Da ich nicht wirklich bewandert bin im Webcoding mit dem neuen CSS3 und HTML5 ist das alles ein wenig mühsam, ich vermisse die Zeiten des einfachen HTML
float hier, float da und clear dort und hier, nun denn, daran muss man sich gewöhnen.
Ich teste natürlich das Theme mit den Browsern: Opera, Firefox, Chromium, w3m, links2, dillo
Was der IE macht ist mir gelinde gesagt… man versteht mich. Wenn die anderen 3 Großen das können, sehe ich das als demokratische Einigung im Bereich des Webdesigns. Ich stelle mir immer wieder die Frage, warum auf den IE so bestanden wird, das meinte ich nun rein rhetorisch.
Also somit, ich melde mich die Tage wieder….
Btw. auf einem netbook so etwas zu coden macht keinen Spaß :D ich muss mal wieder auf meinen Thinkpad umswitchen, aber das passt im Garten bei dem Wetter nicht so.