WBCE Templates

Fertige Templates für WBCE anpassen

Die meisten Templates für WBCE können fast sofort eingesetzt werden. Natürlich solltest Du vor dem Veröffentlichen Platzhalterbilder durch richtige Bilder ersetzen, und vielleicht willst Du auch Schriftarten oder Farben anpassen.

Wenn Du ein WBCE Template installierst, wird dafür auf Deinem Webspace im Verzeichnis /templates ein Unterverzeichnis mit dem Templatenamen angelegt. Wenn Du beispielsweise das Template "Fruehlingsbunt" installierst, findest Du die Templatedateien unter /templates/fruehlingsbunt. Anhand dieses Beispiels lernst Du hier, wie Du ganz einfach Anpassungen an Templates vornehmen kannst.

Das Logo austauschen

Im Kopfbereich des Templates ist ein Logo vorgesehen. Das Bild heißt logo.png, liegt im Verzeichnis /templates/fruehlingsbunt/img und ist 200x100 Pixel groß.

  1. Erstelle mit einem geeigneten Tool auf Deinem PC als erstes ein passendes Logo für Deine Seite und nenne die Grafik logo.png.
  2. Starte Dein FTP-Programm* (das Du vermutlich benutzt hast, um WBCE auf Deinen Webspace zu kopieren) und wechsle ins Verzeichnis /templates/fruehlingsbunt/img.
  3. Überschreibe die vorhandene Datei logo.png mit Deiner Datei logo.png.

Wenn Du jetzt das Frontend, also die Benutzeransicht Deiner Seite aufrufst, und das Template Frühlingsbunt für die betreffende Seite oder als Standardtemplate eingestellt wurde, solltest Du das Template jetzt schon mit der von Dir erstellten Grafik sehen.

Wenn nicht, leere den Browsercache und prüfe, ob Du das Logo wirklich ins richtige Verzeichnis kopiert hast.

Auf die selbe Weise kannst Du auch die Hintergrundgrafik mit den Wölkchen ersetzen, das ist die Datei /templates/fruehlingsbunt/img/clouds.png. 

Das Logo entfernen

Du brauchst kein Logo? Kein Problem. 

  1. Starte Dein FTP-Programm und wechsle in das Verzeichnis /templates/fruehlingsbunt.
  2. Lade nun die dort befindliche index.php herunter bzw. öffne sie zum Bearbeiten (Editieren). Eventuell brauchst Du dafür ein geeignetes Programm wie Notepad++* oder einen anderen Quellcode-Editor.
  3. In Zeile 48f. findest Du den Code
    <div class="logo">
            <a href="<?php echo WB_URL; ?>"><img src="<?php echo TEMPLATE_DIR; ?>/img/logo.png" alt="" border="0" /></a>
     </div>
    Lösche diese Zeilen. 
  4. Speichere die Änderung und lade ggf. die index.php wieder nach /templates/fruehlingsbunt hoch*. Nun ist zwar die Kopfzeile etwas schmaler, aber das Logo ist raus.

Formatierungen ändern

Im vorhergehenden Abschnitt haben wir das Logo gelöscht, aber dadurch ist der header schmaler geraten. Grund ist, dass das Logo so formatiert war, dass es oben und unten ein Padding (inneren Rand) von 3em hatte. Da das Logo nun nicht mehr da ist, kommt die Einstellung für die Mindesthöhe, nämlich 150 Pixel, für den header zum Tragen. 

  1. Du hast Dein FTP-Programm noch offen? Wenn nicht, öffne es noch einmal und wechsle wieder ins Verzeichnis templates/fruehlingsbunt.*
  2. Lade die Datei styles.css herunter oder öffne sie zum Bearbeiten. Ich gehe jetzt mal davon aus, dass Du so etwas wie Notepad++ bei Dir installiert hast und Du die CSS-Datei in einem Texteditor angezeigt bekommst.*
  3. Gehe nun zur Zeile 196, dort findest Du die Anweisung
    min-height:150px;
    Ändere den Wert 150px z.B. auf 50px oder 250px.
  4. Speichere die Änderung und lade ggf. die styles.css wieder nach /templates/fruehlingsbunt hoch.

Farben im Template ändern

Dir gefallen die Bonbonfarben nicht? Du kannst sie ganz einfach ändern. Farben werden entweder als Hexadezimalwerte oder RGB-Farbewerte angegeben. Wenn Du mit diesen Begriffen nichts anfangen kannst, schau z.B. auf selfhtml.

Jetzt ist natürlich die Frage, wie findest Du heraus, wo welche Farbe definiert wird? Dafür kannst Du am besten die Entwicklertools in Deinem Browser verwenden.

  1. Klicke beispielsweise mit der rechten Maustaste auf den Hintergrund.
  2. Wähle im nun erscheinenden Kontextmenü den Eintrag "Untersuchen".
  3. Nun klappt ein im ersten Moment kompiziert anmutender Bereich auf, den Du vielleicht noch nicht kennst. Je nachdem, welchen Browser du benutzt (Firefox, Chrome, Chromiumbasierte Browser wie Opera, Vivaldi oder Brave, Safari oder Edge), erscheinen entweder unter oder neben der normalen Seitenansicht verschiedene Informationen. (Screenshot)
  4. Wenn Du gut gezielt hast, wird Dir bereits die richtige Stelle im Stylesheet angezeigt, an der die betreffende Formatanweisung, hier also z.B. die Hintergrundfarbe, hinterlegt ist. Anhand der angezeigten Informationen erkennst Du, dass Du die Anpassung in der styles.css in Zeile um Zeile 175 herum vornehmen kannst.
  5. Ändere die Angaben für den body z.B. so:
    body {
        margin:0;
        padding:0 0 2em 0;        
        font-family: 'FreeSans';
        line-height:1.25em;
        color:#666;        
        background-color:#eee;
    }
  6. Speichere die Änderung und lade ggf. die styles.css wieder nach /templates/fruehlingsbunt hoch. Nun ist der Hintergrund hellgrau und der Text nicht mehr dunklelbau, sondern dunkelgrau.
  7. Nach dem selben Muster kannst Du nun alle weiteren Farben ganz nach Deinen Vorlieben ändern.

 

* Ein FTP-Programm (wie z.B. Filezilla oder WinSCP) ermöglicht, die Dateien auf dem Webspace (dem Speicherplatz zu Deiner Web-Adresse, also der Domain) zu bearbeiten. Wenn WBCE CMS vorinstalliert war und Du bislang nicht mit solchen Programmen gearbeitet hast, kannst Du auch über die WBCE-Benutzeroberfläche das Modul "AddonFileEditor" installieren. Du findest es dann unter Admin-Tools > Addon File Editor. Dort wählst Du "Liste der Templates" und dann das Template aus, das Du bearbeiten willst, und hast dort dann direkten Zugriff auf die erwähnten Dateien (index.php, CSS-Dateien). Ebenso kannst Du darüber einzelne Dateien wie z.B. die erwähnten Bilder (Logo, Hintergrund) hochladen.

 


Zurück zur Übersicht