Serendipity: individuelles Template
Gurkcity Webdesign Blog

Serendipity: individuelles Template Mo, Feb 15. 2010

Ein individuelles Template lässt sich auf einfache Art und Weise in Serendipity integrieren. Die Blog-Software bringt von Haus aus viele interessante Templates mit. Synonym für Templates stehen auch Design, Designvorlagen, Styles und Themes. Alle bedeuten das gleiche. Davon sollte man sich nicht verwirren lassen.

Bevor man individuelle Templates in Serendipity installiert, sollte zuerst geprüft werden, in welchem Verzeichnis dies installiert wurde. Man findet den Pfad in der Serendipity Administrationsoberfläche unter Administration > Konfiguration > Pfade.

Pfad Einstellungen, individuelles Template Serendipity 

Um ein individuelles Serendipity Template zu erstellen, kann man ein vorhandenes Template kopieren.


Schritt für Schritt zum individuellen Serendipity Template

1. Anlage eines neuen Unterverzeichnisses.

In dem Unterverzeichnis /templates/ liegen alle verwendbares Templates in einem eignenen weiteren Unterverzeichnis. Hier legt man einen neuen Ordner mit einem beliebigen Namen an. Der Name des Ordners sollte am besten aus Kleinbuchstaben und Zahlen bestehen.

2. Kopieren der Inhalte der Template-Vorlage.

Insbesondere 4 Dateien sind wichtig:

  • info.txt,
  • index.tpl,
  • style.css
  • preview.png

Im Beispiel wird das Verzeichnis "altes_template" kopiert und in das neue individuelle Template s9y2010 umbenannt:

Verzeichnis kopieren und Template umbenennen 


3. Editieren der info.txt.

Hier wird der Name, der Author und das Datum des neuen Templates eingegeben. Diese Angaben werden später in der Administration angezeigt, in der man die individuellen Templates für Serendipity installieren kann.

Im Dreamweaver sieht die info.txt dann z.B. so aus:

info.txt im Dreamweaver bearbeiten 

 

4. Bearbeiten der Layout-Vorlage index.tpl

Serendipity arbeitet mit der Smarty-Layout-Engine. Für das Layout wird daher eine Datei erstellt, die die Smarty-Syntax nutzt. Um es einfacher zu machen, wird die kopierte Vorlage der index.tpl genommen, und entsprechend so verändert, dass der HTML-Quellcode auf die eigenen Bedürfnisse passt. Die "Smarty-Logik" wird hierbei durch if-else-Strukturen gesteuert:

{if $is_embedded != true}

...

{else}
{serendipity_hookPlugin hook="frontend_header"}
{/if}

{if $is_raw_mode != true}

 

Die komplette index.tpl könnte demnach so aussehen:

{if $is_embedded != true}
<!doctype html>
<html>
    <head>
        <meta charset="{$head_charset}">
        <title>{$head_title|@default:$blogTitle} {if $head_subtitle} - {$head_subtitle}{/if}</title>
        <meta name="Powered-By" content="Serendipity v.{$head_version}" />
        <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet}" />
        <link rel="stylesheet" type="text/css" href="{$head_link_stylesheet_print}" media="print">
        <link rel="alternate"  type="application/rss+xml" title="{$blogTitle} RSS feed" href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/index.rss2" />
        <link rel="alternate"  type="application/x.atom+xml"  title="{$blogTitle} Atom feed"  href="{$serendipityBaseURL}{$serendipityRewritePrefix}feeds/atom.xml" />
        <!--[if IE]>
            <script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
        <![endif]-->
{if $entry_id}
        <link rel="pingback" href="{$serendipityBaseURL}comment.php?type=pingback&amp;entry_id={$entry_id}" />
{/if}

{serendipity_hookPlugin hook="frontend_header"}
    </head>

    <body>
{else}
{serendipity_hookPlugin hook="frontend_header"}
{/if}

{if $is_raw_mode != true}
<div id="bodywrap">
<div id="wrap">

<header>
    <nav id="toplinks"><a href="/kontakt.php">Kontakt</a> | <a href="/impressum.php">Impressum</a></nav>
    <div id="slogan-h1">{$head_title|@default:$blogTitle|truncate:40:' ...'}</div>
    <div id="slogan-h2">{$head_subtitle|@default:$blogDescription}</div>
   
    <div id="logo">
    <a href="http://www.mydomain.de" target="_top" name="top" onFocus="if(this.blur)this.blur()"><img src="/blog/templates/s9y2010/img/logo.jpg" alt="Logo MyDomain" width="200" height="101" align="left" border="0"></a></div>
</header>

<div id="middlewrap">

    <div id="contentleft">
        <div id="contentwrap">
            <div id="contentpad">
                <section id="content">
               
                    <a name="inhalt"></a>
                   
                    {$CONTENT}
                           
                </section>
            </div>
        </div>   
   



        <nav id="sidebar1">
       
        {serendipity_printSidebar side="left"}
       
        </nav>
       
        <aside id="sidebar2">
       
        {serendipity_printSidebar side="right"}
       
       
        </aside>
   
    </div>

</div><!--middlewrap-->
{/if}
<footer>

  <div id="footertext">
      Copyright &copy; 2010 <a href="http://www.gurkcity.de/">Gurkcity Webdesign</a>. All Rights Reserved<br>
    
    <a href="/footerlink1.php">Footerlink1</a> |
    <a href="/footerlink2.php">Footerlink2</a> |
    <a href="#bodywrap">Top of Page</a> |   
  </div>
   
    {$raw_data}
    {serendipity_hookPlugin hook="frontend_footer"}
 
</footer>

</div><!--wrap-->
</div><!--bodywrap-->

{if $is_embedded != true}

</body>
</html>
{/if}



 

Datei index.tpl

Es handelt sich um eine html5-Vorlage mit 3 Spalten und suchmaschinenfreundlichem Aufbau. Nach der Spaltenanordnung 2-1-3 folgt diese dem holy-grail-Layout, quirks-mode-free [2].

Es kann aber auch ein HTML-Gerüst von Grund auf neu erstellt werden. Die Smarty-Funktionen, die im oberen Beispiel angegeben werden, sollten jedoch in die Template-Datei eingebunden werden.

Hier einige Beispiele, die genutzt werden könnten:

  • {serendipity_printSidebar side="left|right|hidden|*"}
  • {serendipity_hookPlugin hook="hookname" hookAll="true|false" data=$eventData addData=$addData}, z.B. {serendipity_hookPlugin hook="frontend_header"}
  • {serendipity_showPlugin class="serendipity_your_nugget" id="serendipity_your_plugin:21323223efsd22aa" side="left|right|hidden|*" negate="null|true"}
  • ...

Weitere Infos bietet die Serendipity-Website [3].


5. Bearbeiten des Stylesheets style.css

Der wichtigste Schritt im individuellen Layout ist natürlich die Anpassung im eigenen Stylesheet. Die Datei style.css nimmt alle Styles auf, die für das eigene Layout benötigt werden. Gute Kenntnisse in HTML und CSS sind hierbei essentiell.

Ich empfehle in die folgende Datei noch alle CSS Eigenschaften zu resetten. Einen guten Start bietet Eric Meyer mit seinem Reset-Stylesheet [4].

Danach könnte beispielsweise dieses CSS in die style.css eingebaut werden (passt zu obigen HTML-Quellcode). Hierbei wird ein fluides Layout aufgebaut, das maximal 1200 Pixel breit ist, minimal 960 Pixel. Es passt sich gut an alle momentan gängigen Monitorgrößen an und hat zwei Randspalten (sidebar1 / sidebar2) mit 200 Pixeln Innenbreite. Das Layout funktioniert sogar im IE6 und ist HTML5-valide.

 /*
* LAYOUT POSITIONING STYLES
* ONLY CSS FOR major positioning: display, position, float, clear, width, height, min-width, min-height, margin, border, padding, overflow
*/
#wrap {
    margin:0 auto;
    /*width:960px; /*width of website*/
    min-width:960px;
    max-width:1200px;
    position:relative;
    overflow:hidden; /*hide overlapping divs*/
}
header {
    margin:0 auto;
    width: 100%;
    height: 147px;
    display:block;
}
#middlewrap {
    float:left;
    position:relative;
    left:230px; /*width of sidebar1 // 230px */
    right:100%;
    width:200%;
}
#contentleft {
    float:left;
    left:50%;
    margin-left:-460px;/*width sidebar1 + width sidebar2 + horizontal padding both sidebars // 460px */
    position:relative;
    width:100%;
}
#contentwrap {
    float:right;
    position:relative;
    right:100%;
    width:50%;    
}
#contentpad {
    margin:0 15px 0 475px;
    overflow:hidden;
}

#content {
    width:100%;
    overflow:hidden;
    display:block;
}
nav#sidebar1 {
    float:left;
    position:relative;
    left:260px; /*width sidebar1 + padding sidebar1 + padding content // 260px*/
    margin-left:-50%;
    overflow:hidden;
    width:200px; /*inner width/content width of sidebar1 // 200px */
    top:6px;
}
aside#sidebar2 {
    float:left;
    left:15px;
    overflow:hidden;
    position:relative;
    width:200px; /*inner width/content width of sidebar2 // 200px */
    top:6px;
}



/* ^^ End LAYOUT POSITIONING STYLES
*
* LAYOUT DESIGN STYLES
* ONLY CSS FOR Designs: font, color, background, text-align, etc.
*/

body {
    font: 100.01% Verdana, Arial, Helvetica, sans-serif;
    background:#FFFFFF url({TEMPLATE_PATH}img/bg_body.jpg) repeat-y scroll 5% top;
    color: #000000;
    text-align: center;
}
#bodywrap {
    background:transparent url({TEMPLATE_PATH}img/bg_body.jpg) repeat-y scroll 95% top;
}
#wrap {
    background:#FFF url({TEMPLATE_PATH}img/bg_bodywrap.jpg) top right no-repeat;
    border-left:1px solid #d1d1d1;
    border-right:1px solid #d1d1d1;
}

#middlewrap {
    background:transparent; /*content bg-color*/
}

#contentleft {
    background:#FFF;/*sidebar1 bg-color*/
}
#content,nav,aside {
    line-height:1.5em;
    text-align:left;
    font-size:0.9em;
}
#content {
    background:transparent url(../media/bg_content.jpg) no-repeat fixed 50% 380px;
}

/* Header & Logo */
#logo{
    position: absolute;
    top:36px;
    left:0;
}

header {
    background: transparent;
}
#toplinks {
    position:absolute;
    top:5px;
    right:20px;
    font-size:12px;
}
#slogan-h1 {
    font-family:Lucida Grande,Tahoma,Arial,Helvetica,sans-serif;
    font-size:2.2em;
    letter-spacing:-3px;
    position:absolute;
    top:60px;
    left:245px;
    color:#008700;
    font-weight:bold;
}
#slogan-h2 {
    font-family:Lucida Grande,Tahoma,Arial,Helvetica,sans-serif;
    font-size:1.2em;
    letter-spacing:-1px;
    position:absolute;
    top:101px;
    left:245px;
    color:#808080;
    font-weight:bold;
}

/* Navigation */

nav,aside {
    font-size:12px;
    color:#666;
}
nav li a, aside li a {
    display:block;
    background:url({TEMPLATE_PATH}img/bg_li.gif) no-repeat 3px 8px;
    padding: 3px 3px 4px 20px;
}
nav h2 a, nav h2 a:visited, aside h2 a, aside h2 a:visited {
    color:#F60;
    text-decoration:none;
    display:block;
    padding:6px 2px 2px 2px;
}
.serendipitySideBarContent a {
    display:inline;
}
.serendipitySideBarContent li a {
    background:none;
    padding:3px;
}
#uberlink {
    background:#E4E4E4 url({TEMPLATE_PATH}img/bg_li2.gif) no-repeat 3px 8px;
    font-weight:bold;
    border: 1px solid #F60;
    border-left:none;
    border-right:none;
}

/* Footer */
footer {
    border-top:4px solid #DADADA;
    clear:both;
    float:left;
    color:#808080;
    font-size:0.7em;
    line-height:1.6em;
    text-align:right;
    width:98%;
    margin:0 1%;
}


/* ^^ End LAYOUT DESIGN STYLES
*
* HTML ELEMENT STYLING
* ONLY CSS FOR Designs: font, color, background, text-align, etc.
*/

Datei style.css

6. Erstellen eines Screenshots

Damit in der Serendipity Administration auch das Layout mit einem kleinen Vorschaubild versehen wird, macht man einen Screenshot der Seite. Dieser wird auf 110px Seitenbreite verkleinert und als preview.png abgespeichert.Den großen Screenshot speichert man als preview_fullsize.jpg ab, um einen Link später auf die größere Vorschauzu erstellen. Dieser Schritt ist jedoch optional.

Vorschaubild in der Administration 

7. Upload aller Dateien

Jetzt werden alle Dateien inklusive dem Ordner (im Beispiel s9y2010) z.B. per FTP auf den Webserver in das /template/-Verzeichnis hochgeladen.

8. Installieren des individuellen Serendipity Templates

Im letzten Schritt klickt man in der Serendipity Administration auf Aussehen > Styles verwalten und scrollt in der Liste bis man den neu angelegten Eintrag findet. Dort klickt man auf das Disketten/CD-Symbol an der rechten Seite, um das individuelle Template zu installieren.

Installation individuelles Serendipity Template 

Das neue Template ist damit aktiv und man kann weitere Veränderungen am Template vornehmen. Man braucht dafür nur noch die aktuelle Version von index.tpl oder style.css bereitstellen, indem man die alten dateien überschreibt. Die Änderungen werden sofort sichtbar.

Falls man wie im letzten Schritt beschrieben sein Template nicht in der Liste vorfindet, sollte die Konfiguration der Pfade überprüft werden (Administration > Konfiguration > Pfade). Insbesondere die Einstellungen "Voller Pfad" und "URL zum Blog" sollten geprüft werden.

 

Weitere Information für Webmaster für individuelle Serendipity Templates:

Style / Templates Serendipity

 

 

 

Geschrieben von Chris Gurk in Webdesign Kommentare: (0) Trackbacks: (0)
< Unrecognized type for serendipity_event_freetag | Serendipity Druckversion Stylesheet >

Trackbacks
Trackback-URL für diesen Eintrag

Keine Trackbacks

Kommentare
Ansicht der Kommentare: (Linear | Verschachtelt)

Noch keine Kommentare


Kommentar schreiben

Die angegebene E-Mail-Adresse wird nicht dargestellt, sondern nur für eventuelle Benachrichtigungen verwendet.

Um maschinelle und automatische Übertragung von Spamkommentaren zu verhindern, bitte die Zeichenfolge im dargestellten Bild in der Eingabemaske eintragen. Nur wenn die Zeichenfolge richtig eingegeben wurde, kann der Kommentar angenommen werden. Bitte beachten Sie, dass Ihr Browser Cookies unterstützen muss, um dieses Verfahren anzuwenden.
CAPTCHA
 
Kommentare werden erst nach redaktioneller Prüfung freigeschaltet!