6 - Template für den Footer

Die Datei für die Anzeige des Footer, haben wir bereits erstellt.
Den HTML-Codeschnippsel aus Page.ss haben wir bereits eingefügt.

Footer.ss ausbauen

Der Aufruf der Methode aus dem Page-Controller, wird mit 'loop' ausgelesen:

<% loop $FooterContent %>
    ...
<% end_loop %>

Darin werden $Content für den Text im Footer und die drei SocialMedia-Links $SocialFacebook, $SocialTwitter und $SocialRssFeed über die PHP-Platzhalter geladen:

<% loop $FooterContent %>
    ...
    $Content
    ...
    $SocialFacebook
    ...
    $SocialTwitter
    ...
    $SocialRssFeed
    ...
<% end_loop %>

Erweitert mit dem erforderlichen HTML-Code um den CSS-Stilen um den Footer gestalten zu können, sieht der Code folgendermassen aus. Die Links werden den drei Bildern hinterlegt.

1. Ergänze die Datei Footer.ss mit untenstehendem Code-Schnippsel
2. Speichere/Publiziere die Datei und rufe deine Site auf mit ?flush=1Datei: theme/meintemplate/templates/Includes/Footer.ss

<% loop $FooterContent %>
    <div class="left">
        $Content
    </div>
    
    <div class="right">
        <p><a href="$SocialFacebook" target="_blank">
            <img src="$ThemeDir/images/facebook.png" alt="Facebook" width="30" />
        </a></p>
        
        <p><a href="$SocialTwitter" target="_blank">
            <img src="$ThemeDir/images/twitter.png" alt="Facebook" width="30" />
        </a></p>
        
        <p><a href="$SocialRssFeed" target="_blank">
            <img src="$ThemeDir/images/rss.png" alt="RSS Feed" width="30" />
        </a></p>
    
        <p><a href="javascript:window.print()">
            <img src="$ThemeDir/images/printer.png">
        </a></p>
    </div>    
<% end_loop %>

Die CSS-Stile dazufügen

Etwas CSS für eine brauchbare Anzeige. In der Datei layout.css kannst du folgende Code-Schnippsel einfügen:

footer {
    width: 100%;
    background-color: #66CC99;
    clear: both;
    overflow:hidden;
}
footer div.left {padding: 10px;float:left;}
footer div.right {padding: 10px;float:right;}
footer div.left p {padding: 0 12px;margin:0;}
footer div.right p {padding: 0 12px;margin:0;}

Dem weiteren Ausbau des Templates nach eigenen Wünsche steht nun nichts mehr im Weg.

Weiter mit der Zusammenfassung von Tutorial 4