Design-Workshop - Teil 6

Nachdem wir im letzten Teil dieses Workshops das Navigationsmenü eingebunden und angepasst haben, kümmern wir uns in diesem Teil um die Suchbox und um das Modul "Dritte Spalte". Wir werden sehen, dass die Übernahme der Suchbox nicht ganz so einfach ist wie das, was wir bis jetzt gemacht haben, weil wir die beiden Templates von der Original-Suchbox und von der Papoo-Suchbox zusammenschustern müssen.

Vorbereitungen

In Papoo benutzt jedes neue Design erstmal die Modul-Templates vom Standarddesign, allerdings kann man natürlich jedes Modul-Template individuell an ein Design anpassen.

Binden Sie über das Backend Ihrer lokalen Papoo-Installation zunächst einmal das Modul "Suchbox" via Modulmanager in die linke Spalte ein". Danach gehen Sie zum Menüpunkt "Layout - Styles und Module" und wählen das Design "memoranda" zum Bearbeiten aus. Im nächsten Schritt klicken Sie auf "Template-Dateien".

In Papoo ist es grundsätzlich so, dass neue Designs zunächst die Standard Template-Dateien aus dem Verzeichnis "/styles_default/templates" benutzen. Natürlich ist es trotzdem möglich, für jedes Design die Templates individuell anzupassen. Sie sehen in diesem Menüpunkt eine Übersicht über die verfügbaren Template-Dateien. Klicken Sie nun bei der Datei "mod_suchbox.html" auf "Datei aus Default übernehmen". Daraufhin wird die entsprechende Datei aus dem Verzeicnis "/styles_default/templates" in das Verzeichnis "/styles/memoranda/templates" kopiert und steht Ihnen dort zum Bearbeiten zur Verfügung. Falls Sie unter XAMPP arbeiten können sie die Datei problemlos zum beschreiben öffnen; unter Linux müssen Sie eventuell erst die Dateirechte entsprechend anpassen.

Anpassungen für die Such-Box

Schauen wir uns zunächst einmal den Abschnitt aus der Datei "__index.html" an, der das Suchfeld definiert:

<div id="search" >
<form method="get" action="#">

<div>
<input type="text" name="s" id="search-text" value="" />
<input type="submit" id="search-submit" value="GO" />
</div>

</form>
</div>

Wie wir sehen, sind in diesem Abschnitt drei IDs definiert: search, search-text und search-submit. Diese beschreiben:

• search: Das komplette "Modul" Suchfeld insgesamt
• search-text: den Teil des Suchfeldes, wo man seinen Suchbegriff eingibt
• serach-submit: den "Submit"-Button

Jetzt müssen wir nur die entsprechenden Bereiche in der Datei "mod_suchbox.html" der Papoo-Suchbox herausfinden und die Bezeichnungen anpassen. Das komplette Modul "Such-Box" wird hier durch die ID "mod_suchbox" beschrieben, so wie in dem Original-Template das ganze Modul "search" heisst. Weiterhin heisst die ID des Texteingabefeldes hier "text" und nicht "search-text". Und der Versendebutton ist lediglich durch die Klasse "senden" bezeichnet; hat aber noch gar keine ID. In der Datei "mod_suchbox" aus dem Verzeichnis "/styles/memoranda/templates" ersetzen wir also wie folgt:

• die ID "mod_suchbox" nennen wir "search"
• die ID "search" (input type="text") nennen wir "search-text"
• und der Klasse "senden" (input type="submit" geben wir noch die ID "search-submit"

Ausserdem enfternen wir noch die Überschrift der Suchbox, also die Zeile

<h3>{$message_2135}</h3>

und speichern die Datei. Im Ergebnis haben wir jetzt das Papoo-Suchfeld so umdesignt, dass es aussieht wie das Original und könnnen die entsprechenden Zeilen aus der __index.html löschen.

Anpassungen für das Modul "Dritte Spalte"

Binden Sie zunächst das Modul "dritte Spalte" via Modulmanager in die linke Spalte ein. In der Datei "module.css" im memoranda-Verzeichnis sind noch gar keine Auszeichnungen für dieses Modul vorhanden, daher können Sie einfach die Auszeichnungen des Original-Contents des Templates übernehmen. Fügen Sie also folgenden Code am Ende der Datei "module.css" ein:

/* Modul dritte Spalte */
#mod_dritte_spalte {
                               color: #3E3530;
}

#mod_dritte_spalte h1, #mod_dritte_spalteh2, #mod_dritte_spalte h3 {
                               margin: 0;
                               padding-left: 30px;
                               font-weight: normal;
                               font-size: 1.8em;
                               line-height:  180%;
}

und speichern Sie die Datei ab. Den Original-Content aus der linken Spalte können Sie noch löschen, und die Seite sollte aussehen wie das Original.

Übernahme des Footers

Da Sie den Backlink zu http://www.papoo.de nicht aus Ihrer Papoo-Installation entfernen dürfen, es sei denn, sie haben eine Whitelabel-Lizenz, müssen Sie noch den Papoo-Footer in das Template einbauen. Ausserdem werden ja im Footer auch noch die Anzahl der Seitenbesucher eingeblendet; das ist schliesslich auch ein Grund.

Geht auch ganz einfach: Tragen Sie einfach

{include file="_fuss.html"}

in den div-Block für die ID "footer" in die Datei "__index.html" ein. Natürlich sind die übrigen Module noch nicht designt - dies aber noch weiter zu vertiefen würde den Rahmen dieses Workshops sprengen und bleibt dem Leser selbst überlassen.