Schwierigkeit: Für User mit HTML Grundwissen und etwas Eigeninitiative.
Da immer wieder Anfragen kommen. In diesem Beitrag erkläre ich nach und nach die Anpassung eines Designs Templates welches Bootstrap und Jquery nutzt. Solche fertigen Designs gibt es unter anderem bei Themeforest.net hier auf folgendes achten:
1. Bilder und Farben sind EGAL. Sucht kein Design nach den Bildern und Farben aus. Bilder kann man ersetzen, Farben lassen sich schnell via CSS anpassen.
2. Achten Sie auf einen erstmal optisch ansprechenden Aufbau.
3. Sehen Sie sich die Live Preview an und testen Sie verschiedene weiten des Browserfensters (Responsive Design) es wäre ärgerlich, wenn google und co fehlende Mobile Funktionalität bemängeln.
4. Wenn mehrere Designs zur entgültigen Auswahl stehen, nehmen Sie eines welche bereits viele vorgefertigte Seiten oder Elemente enthält. Dies erspart einiges an Zeit da z.b. schon Preislisten, Artikeldetails oder Blogseiten vorhanden sind.
Hier nun ein paar Screenshots von dem Design, welches sich der Kunde ausgesucht hat.
screenshot-2017-03-03-12-23-43.pngscreenshot-2017-03-03-12-24-18.pngscreenshot-2017-03-03-12-24-28.pngscreenshot-2017-03-03-12-57-19.pngscreenshot-2017-03-03-12-57-37.png
Neues Design
Das Design hat der Kunde jetzt für uns auf seinen Webspace in ein Test Verzheichnis geladen, damit wir die einzelnen Seiten aufrufen und ansehen können. Für eigene Anpassungen reicht es die Dateien lokal im Browser zu öffnen. Jetzt bereiten wir TekBASE auf das neue Design vor.
1. Wir legen in /themes eine Kopie eines bereits vorhandenen Designs an. Wir nehmen zum Beispiel T7_clean und nennen die Kopie in design_2017 um. Der Name ist völlig egal.
2. Jetzt löschen im Ordner design_2017 das Verzeichnis images, denn dies enthält nur die T7_clean benötigten Bilder.
3. Jetzt gehen wir in den Ordner, wo das gekaufte Design liegt. Hier prüfen wir was wichtig ist und was nicht. Das heißt im Grunde alles (css, js, images, fonts, ...) außer Anleitungen und HTML Dateien. Diese Ordner kopieren wir dann direkt in das /themes/design_2017 Verzeichnis. Falls die Ordner css, js, fonts usw. in einem übergeordnetem Verzeichnis liegen, wie hier im Beispiel assets, dann kann dieses direkt übernommen werden.
Bildschirmfoto 2017-03-07 um 21.28.43.pngBildschirmfoto 2017-03-07 um 21.38.09.png
4. Im Adminbereich legen wir nun unter CMS Module -> Einstellungen das design_2017 als Standardtheme aus.
Anmerkung:
Dem Design lag noch eine Dokumentation bei, diese ist jedoch relativ kurz gehalten. Es gibt jedoch auch Designs, die über eine recht umfangreiche Anleitung verfügen. Diese wäre dann hilfreich; so leider eher weniger. Uns reicht aber ein Blick in die HTML Dateien, da das Design nicht allzu komplex ist.
screenshot-2017-03-07-21-11-42.png
Grundsteine legen
Wir haben im Browser die index.php aufgerufen und sehen das standard Design. Nicht schön aber wir wollen es ja auch ändern. Nun ein Rechtsklick und den Seitenquelltext einzeigen lassen. Hier haben wir nun einige Zeilen markiert, die wir so erst einmal nicht benötigen und ersetzen wollen. Denn das Design bringt seine eigene Jquery Version mit und benötigt unter anderem auch noch weitere js Dateien. Der zweite Screenshot zeigt den Quellcode vom gekauften Template. Dazu haben wir einfach die index.html vom neuen Design aufgerufen.
screenshot-2017-03-07-21-58-59.pngscreenshot-2017-03-07-22-22-43.png
Für die Änderungen müssen wir uns drei Dateien in /themes/design_2017 anlegen. Das wären die:
doctype.php
meta.php
javascript.php
Da es php Dateien sind können wir später zum Beispiel mittels IF Abfragen unnötige JS Dateien oder andere Sachen pro Seite ausblenden, was die Ladezeiten verkürzt. Braucht die Startseite einige JS Dateien mehr, wie zum Beispiel für einen Slider, so wäre es doch unsinnig die Dateien auch auf einer Seite zu laden, die diese gar nicht benötigt. Auf dem zweiten Screenshot haben wir gesehen, dass bei doctype und meta etwas anderes steht als bei unserem Design. Auch wollen wir wie geschrieben die Java Dateien entfernen und durch die des Designs ersetzen.
Inhalt der doctype.php
Inhalt der meta.php
<?php
echo '
<base href="http://IHRE DOMAIN/">
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<meta name="author" content="IHR NAME">
<meta name="copyright" content="Copyright (c) IHR NAME">';
?>
Alles anzeigen
Inhalt der javascript.php
<?php
echo '
<script src="themes/design_2017/assets/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="themes/design_2017/assets/js/vendor/jquery-1.12.4.min.js"></script>';
?>
Bei der javascript.php haben wir vor die js Dateien noch unseren Pfad zum Design mit angegeben also themes/design_2017. Dies müssen wir später bei allen anderen Dateien genauso anpassen. Wer vielleicht aufgepasst hat, wird merken, dass im zweiten Screenshot die jquery Datein noch gar nicht zu finden ist. Dies haben wir uns vom Ende der index.html Seite geholt, da einige Javascripte mit $(document).ready gestartet werden. Das heißt sobald die Seite geladen wurde soll dies und das ausgeführt werden. Wenn nun die jquery erst am Ende der Seite geladen wird, so wird $(document).ready nicht erkannt und führt den Code innerhalb dieser Funktion nicht aus. Daher setzen wir JQuery mit in den head Bereich. Hier noch ein Screenshot vom gekauften Template, wo zu sehen ist, dass die jquer am Ende geladen wird.
screenshot-2017-03-07-22-37-55.png
Wenn wir jetzt unsere index.php neuladen und uns den Seitenquelltext anzeigen lassen sehen wir die Änderung.
screenshot-2017-03-07-22-49-20.png
Richtig aufteilen
Heute geht es darum, dass wir die Seite zerlegen und auf die overall_header.tpl und overall_footer.tpl aufteilen. Dazu macht es sich am besten, wenn wir von einer der HTML Dateien einfach mal alles angefangen von <body> bis </body> in die overall_header.tpl setzen.
Bildschirmfoto 2017-03-08 um 20.51.12.pngBildschirmfoto 2017-03-08 um 20.51.30.png
1. /themes/design_2017/templates/overall_header.tpl öffnen
2. Zeile 2 mit <body> löschen.
3. Jetzt folgt PHP Code, welcher den Warenkorb generiert. Wer keinen Shop nutzt kann später alles von Zeile 3 bis Zeile 138 löschen.
4. In Zeile 139 fügen wir nun den HTML Code unseres gekauften Designs ein. Einige Designs verfügen über verschiedene Header und Menüs. Einfach das passende raussuchen und oben im Browser nachsehen, welche Datei wir öffnen müssen. Bei dem Design des Kunden heißen diese zum Beispiel index.html, index-2.html oder index-3.html wir haben uns für die index.html entschieden.
Bildschirmfoto 2017-03-08 um 20.53.15.png
5. Im gekauften Design müssen wir nun alle Pfade ersetzen. Da hier die Ordner css, js, images und fonts im Verzeichnis assets liegen ist es relativ einfach. Wir suchen nach assets/ und ersetzen es mit themes/design_2017/assets/. Wenn im gekauften Design jedoch zum Beispiel der Ordner fonts in keinem übergordnetem Verzeichnis lag, müssen wir nach fonts/ suchen und mit themes/design_2017/fonts/ ersetzen. Das gleiche gilt für alle anderen Ordner im gekauften Design also img und js. Jetzt können wir die overall_header.tpl abspeichern.
Bildschirmfoto 2017-03-08 um 20.58.30.png
CSS Dateien
1. Bei Design Templates kann es vorkommen, dass mehrere css Dateien eingebunden und benötigt werden. Das geschieht, wenn der Designer zum Beispiel eine css Datei für das Grundgerüst erstellt, über eine weitere css Datei dann nur noch die Farben regelt und falls vorhanden für die jeweiligen Jquery Plugins noch die benötigten css Dateien. Im Screenshot sehen wir, dass eine style.css geladen wird und weitere für Farben angegeben sind. Die für die extra Farbschemen werden wir nicht benötigen, da wir die Anpassungen später eh selbst übernehmen. Was uns jetzt auffällt ist, dass die style.css nicht im Ordner assets/css liegt sondern direkt im Hauptverzeichnis des Designs. Diese öffnen wir und sehen, dass der Designer hier die anderen css Dateien im assets Ordner sowie zwei Schriftarten importiert.
screenshot-2017-03-08-22-21-39.png
2. Hier ist der Fall jetzt etwas abweichend, denn meist werden die benötigten css Dateien direkt in der html Datei geladen und nicht über eine andere css Datei importiert. Man kann es so machen, aber wir wollen das nicht so machen. Wenn bei einem anderen Design dies genauso geregelt wird, dann einfach folgendes oder lesen bei 3. weiter. Wir erstellen oder öffnen die bereits vorhandene style.css (main.css oder ...) in dem Ordner, wo auch die anderen css Dateien liegen, in unserem Fall in assets/css. Nun tragen wir erstmal nur die zu importierenden Schriftarten ein. Bei uns wäre dies:
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');
@import url('https://fonts.googleapis.com/css?family=Poppins:300,400,500,600');
3. Jetzt öffnen die themes/design_2017/javascript.php Datei und fügen noch die css Datein hinzu, welche bei uns in assets/css hinterlegt sind. Bei anderen Designs liegen diese vielleicht nur im css Ordner.
Bildschirmfoto 2017-03-08 um 21.54.30.png
Die Änderung der oben schon bearbeiteten javascript.php sieht dann in unserem Beispiel wie folgt aus:
<?php
echo '
<script src="themes/design_2017/assets/js/vendor/modernizr-2.8.3.min.js"></script>
<script src="themes/design_2017/assets/js/vendor/jquery-1.12.4.min.js"></script>
<link rel="stylesheet" href="themes/design_2017/assets/css/bootstrap.min.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/animate.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/material-design-iconic-font.min.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/flaticon.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/meanmenu.min.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/slick.min.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/camera.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/jquery.animateSlider.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/shortcodes/shortcodes.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/style.css">
<link rel="stylesheet" href="themes/design_2017/assets/css/responsive.css">';
?>
Alles anzeigen
4. Um die Optimierung kümmern wir uns später, denn soviele Dateien zu laden ist auch irgendwie unsinnig. Was wir noch machen ist, die in themes/design_2017 liegende style.css vom original TekBASE Design zu öffnen und den Inhalt zu leeren. Hier werden wir später unsere eigenen Anpassungen vornehmen. Wer aufgepasst hat, hat gemerkt, dass wir die css Dateien aus dem Ordner assets/css/switcher nicht mit eingebunden haben. Wie oben geschrieben sind diese nur für die verschiedenen Farbschemen und uninteressant. Bitte beachten, dass es von Design zu Design und Designer unterschiedlich ist. Am besten immer die Original Version des Designs mit eurer TekBASE Anpassung im Browser vergleichen. Hier hilft auch die rechtsklick und "Element untersuchen" Funktion.