WebsiteBaker / WBCE Templates anpassen

WBCE ist ein professionelles CMS – zwar einfach zu handhaben -  aber nicht dafür gemacht, dass Gerti und Resi einfach mal so ihr Logo und ihr Lieblingsbild in den Header hochladen. Du muss hier selbst Hand anlegen.

Als Entschädigung dafür bekommst du auch keine zerpixelten „Irgendwas“, sondern ordentliche Ergebnisse, die halbwegs flott laden.

Ich installiere Templates üblicherweise nicht, sondern lade sie einfach per FTP hoch. Danach wähle ich Erweiterungen → Erweitert → Templates neu laden, um sie in die Auswahlliste zu bekommen.

Das erspart mir Ärger mit den Rechten und ich habe das „Original“ auf meiner Festplatte.

Fangen wir mit dem einfacheren Teil an:

Header und Slider-Bilder ersetzen

Suche im Template-Verzeichnis die entsprechenden Dateien und öffne sie in einem Bildbearbeitungsprogramm. Ich verwende natürlich Photoshop, bin ja gelernter Grafiker.

Meine Wunschbilder kopiere ich als neue Ebene rein und justiere sie, bis der Ausschnitt passt. Das garantiert mir, dass Dateiname, Größe und Proportionen gleich bleiben.

Das neue Bild speichere ich wieder (Photoshop: Für Web und Geräte speichern) über die alte Datei drüber und lade sie gleich hoch.

Tipp:

Der Browsercache kann manchmal sehr hartnäckig sein – speziell bei Dateien, die über CSS eingebunden werden, also Hintergrundbildern. Meist hilft es, die Entwicklertools einzuschalten. Dann ist der Cache entweder überhaupt ausgeschaltet oder es gibt zumindest einen Schalter dafür.

Logo ersetzen

Im Ordner /templates/dein-template/img (images..) befindet sich meist eine Datei logo.png. Diese ersetze ich einfach mal durch das gewünschte Logo, lade es hoch und schau was passiert.

Bei responsiven Templates wird das Logo per CSS irgendwie in der Größe „angepasst“, das muss aber nicht immer für alles und jedes geeignet sein.

Statt im CSS herumzufrickeln ist es oft einfacher, du bearbeitest in einen Bildbearbeitungsprogramm dein Logo (eventuell mit unsichtbarem Rand herum) so lange, bis es gut passt.

Mit Rechtsklick auf das Logo und „Element untersuchen“ (je nach Browser) wird dir gezeigt, wo im im Stylesheet die zugehörigen Zeilen stehen. Oft etwas wie a.logo oder dergleichen. Wenn du hier wenig Erfahrung hast, kann das sehr knifflig werden...

Tipp:

Du wirst im WBCE-Forum schnell Hilfe bekommen, wenn dein „Problem“ online ist und du den Link angibst. Niemand will gerne rätseln und du musst dich nicht für deine Website schämen.

Farben ändern

Die wesentlichen Farben sind meist in der editor.css definiert: Überschriften, Links….

Ich mache das meist so: Ich mache einen Screenshot, setze diesen in Photoshop ein. Dann kopiere ich alle Bereiche, die zu ändernde Farben enthalten, in eine neue Ebene. Diese kopiere ich erneut.

Dann ändere ich in dieser mit Farbton, Sättigung, ein wenig Zauberstab usw, die Farben.

Wenn ich zufrieden bin, habe ich eine Ebene „vorher“ und eine Ebene „nachher“. Da kann ich nochmal in mich gehen, weitere Ebenen mit Varianten anlegen, dem Kunden zeigen.

Wenn alles klar ist, kopiere ich die Farben einzeln aus der „vorher“ und aus der  „nachher“ und ersetze sie per suchen/ersetzen in editor.css und template.css.

Meist erwischt man so nicht alle Farben; nach den Störenfrieden muss ich mich dann einzeln auf die Suche machen. Die Entwicklertools helfen dabei.

Zurück