Author Topic: Tutorial: Bootstrap-Template -> WB Template (für Dummies)  (Read 6381 times)

fischstäbchenbrenner

  • Guest
Tutorial: Bootstrap-Template -> WB Template (für Dummies)
« on: December 02, 2013, 04:15:22 PM »
Wie bringt man ein Bootstrap (o.ä.) Template mit WB zum laufen.

Es gibt mehrere Wege zum Ziel, hier der Weg, den ich in solchen Fällen nehme.
Praktischerweise macht man das mit einen lokalen Server (localhost), mit etwas Geduld geht es auf auch auf einem Webserver. Man muss eben immer wieder hochladen (per FTP)

Schritt 1: Vorbereiten
Üblicherweise hast du einige Musterseiten als HTML, die Startseite index.html, dazu Verzeichnisse /css, /js usw, die das Framework enthalten.

Erstelle ein Verzeichnis in /templates , zb /mein-neuestemplate
Da hinein kopiere die ganzen Dateien, ohne die Verzeichnis-Struktur zu ändern. Öffne die index.html im Browser: Es sollte immer noch alles funktionieren, alle Bilder sollte da sein.

Schritt 2: Template draus machen:
Kopiere die index.html als index.php und kopieren ganz oben rein:
Code:
Only registered users can see contents. Please click here to Register or Login.Je nach Anforderungen kann der Menü-Aufruf anders sein, oder andere Klassen nötig sein.

Ersetze alle relative Pfade zu css/ und js/ usw durch  
Code:
Only registered users can see contents. Please click here to Register or Login.Das menü (den ganzen block <ul class="nav navbar-nav">....</ul> ersetze durch:
Code:
Only registered users can see contents. Please click here to Register or Login.Dort wo der Content stehen soll, gib an:  
Code:
Only registered users can see contents. Please click here to Register or Login.
Schritt 3: Installieren:
Kopiere von irgendeinem anderen Template die info.php und ändere darin
 
Code:
Only registered users can see contents. Please click here to Register or Login.(Den Rest kannst du später machen)

Wenn du keinen lokalen Server verwendest, lade jetzt das Verzeichnis auf deine WB-Seite.
Gehe zu „Erweiterungen“ -> Erweitert -> Unten: „Admin Optionen“, mache das Häkchen bei „Designvorlagen“ und klicke auf „Neu laden“

Lege eine neue versteckte Seite an, unter „Seitenoptionen ändern“ sollte das neue Template auswählbar sein. Wähle es für diese neue Seite aus. Schau die Seite im Frontend an: Das Template sollte jetzt immer noch richtig aussehen.
Wenn nicht: Kontrolliere, ob alle nötigen Dateien geladen wurden. Am wahrscheinlichsten ist, dass du irgendwo das <?php echo TEMPLATE_DIR; ?>/ vergessen hast.

Wenn du eine "weiße Seite" siehst, gibt es einen PHP-Fehler: achte genau, ob die Gänsefüßchen stimmen.
Wie der richtige Seitentitel, Meta-description usw reinkommen steht in der Hilfe.
http://www.WebsiteBaker.org/de/hilfe/designerhandbuch/templatefunktionen-einfuegen.php
Die index.php kannst du immer wieder ändern und hochladen; die Änderungen sollten nach „Aktualisieren“ (Strg-F5) sofort sichtbar sein.

Schritt 4: Module anpassen
Die meisten Module haben Einstellungsmöglich keiten, wo du die nötigen HTML-Ausgaben vornehmen kannst - inklusive der gewünschten class
Um das css/js der Module selbst zu laden, muss im <head> stehen:
Code:
Only registered users can see contents. Please click here to Register or Login.Eventuell brauchst du 'jquery' nicht (nochmal). Dann setze // vor die Zeile.

Tipp: Erstelle  eine eigene module.css in /mein-neuestemplate  und hänge diese als letzte css Datei in den <head>:
Code:
Only registered users can see contents. Please click here to Register or Login.Finde dann mit den Entwicklertools des Browsers heraus, welche klassen wo verwendet werden und mache deine Änderungen in dieser module.css. Damit bleiben sie vom Framework und anderen Templates getrennt.

Kommentare, Verbesserungen erwünscht.
Grundsatzdebatten und Glaubensfragen sollten Privatsache bleiben.
« Last Edit: December 02, 2013, 04:23:07 PM by fischstäbchenbrenner »

Offline didge4u

  • Posts: 4
Re: Tutorial: Bootstrap-Template -> WB Template (für Dummies) - DANKE
« Reply #1 on: December 11, 2013, 08:41:32 AM »

Hallo Fischstäbchenbrenne r

Deine Anleitung ist wirklich gut. Das meiste weiss ich schon aber als Unbegabter in Sachen PHP möchte ich mich bei dir bedanken für den so schlichten wie genialen Ansatz dieses Codes:

Quote
Schritt 2: Template draus machen:
Kopiere die index.html als index.php und kopieren ganz oben rein:

Code:
Only registered users can see contents. Please click here to Register or Login.
Je nach Anforderungen kann der Menü-Aufruf anders sein, oder andere Klassen nötig sein.

Dieser Gruss kommt aus der Schweiz
Patrick



Offline Hans

  • Posts: 896
  • Gender: Male
Re: Tutorial: Bootstrap-Template -> WB Template (für Dummies)
« Reply #2 on: December 14, 2013, 04:23:37 PM »
Hallo Fischstäbchenbrenne r
herzlichen Dank für diesen Tutorial!
Hans
Hans - Nijmegen - The Netherlands