CMS Designanpassung

Aktuell führen wir noch einige Anpassungen durch, das Forum wurde jedoch bereits live geschaltet.
  • 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

    PHP
    <?php 
    
    
    echo '<!doctype html>
    <html class="no-js" lang="en">';
    
    
    ?>


    Inhalt der meta.php


    Inhalt der javascript.php

    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:

    Code
    @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:


    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.

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    9 Mal editiert, zuletzt von CFrankenstein ()

  • HTML zerlegen


    Wir haben schon einges erledigt und können das gekaufte Design nun live sehen, wenn wir vom TekBASE die index.php aufrufen. Wir scrollen runter und runter und sehen dort noch das original TekBASE Design. Keine Sorge, da wir jetzt den HTML Code zerlegen müssen, werden wir auch diese Überreste löschen.


    1. Die index.php im Browser aufrufen, falls nicht schon geschehen.


    2. Die themes/design_2017/templates/overall_header.tpl öffnen.


    3. Nach <div id="header_box"> suche und bis zu <!-- overall_header END --> alles löschen. Das geht natürlich nur, wenn als Basis das original TekBASE Design kopiert wurde.


    Bildschirmfoto 2017-03-10 um 18.47.07.png


    4. Datei speichern und die Seite im Browser neu laden.


    5. Nun müssen wir nachsehen wo genau nun eigentlich der Header aufhört und der Content beginnt. Dazu die auf der Seite ein Rechtsklick machen und auf "Element untersuchen" gehen. Wir sehen jetzt ein Fenster und je Browser FF, IE, ... ist es etwas anders aufgebaut. Hier wird uns der HTML Code von dem Bereich angezeigt auf den wir geklickt haben. Diesmal ein kurzes Video damit es verständlicher ist. Wir gehen auf die einzelnen Tags mit der Maus und im Browserfenster wird uns angezeigt wo dieser sich befindet. Hier ist der Headbereich praktischerweise zwischen <header> und </header> untergebracht. Bei anderen Designs kann dieser Tag fehlen, da einfach mal schaun welche div oder table dafür verantwortlich ist. Wir schließen nun den header Tag und prüfen wo dieser endet. In diesem Beispiel ist es zu einfach. Hier gibt es ein </header> und zusätzlich noch einen Hinweis. Da kein öffnendes div (z.b. <div class="content">, <div class="row">, ...) für den Content verwendet wird sondern der Content direkt danach als Code Blöcke folgt fügen wir nach dem </header> beziehungsweise nach dem Hinweistext eine Leerzeile ein.


    Bildschirmfoto 2017-03-10 um 18.49.19.pngBildschirmfoto 2017-03-10 um 18.49.43.png


    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    Sollte dies in eurem Design fehlen schaut, welches Merkmal ihr findet um euch zu orientieren. Das kann ein div Tag mit einer id sein, eine Grafik oder irgend etwas anderes. Nehmen wir an sieht es wie folgt aus:


    Hier klappen wir div mit der Klasse header zu und sehen, dass als nächstes nun eine div mit Klasse row folgt. Würde die div keine Klasse verwenden könnten wir uns an einem nachfolgenden Element orientieren z.b. H1 mit Welcome. Wir sehen im Browser Welcome steht im Hauptbereich also muss der Header mit dem Menü davor enden. Wir suchen uns die <div> die darüber kommt. Wenn der Designer mit Table arbeitet kann es auch <tr> oder <table> sein. Wir fügen eine Leerzeile ein. Müsste es nicht </div> lauten? Nein, wir sehen in dem Beispiel, dass hier ein div mit der Klasse row für den gesamten Contentbereich genutzt wird. Also kann diese ruhig mit in die overall_header.tpl und </div> für den Contentbereich in die overall_footer.tpl. Das bedeutet, dass wir diese zwei Zeilen nicht in jede eigene Seite schreiben müssen. Dazu aber später.


    6. Über der Leerzeile; die wir eben eingefügt haben; ist alles der Headerbereich und alles unter der Leerzeile ist der Rest also Content und Footer. Daher kopieren wir den ganzen "Rest" einfach in die? Genau overall_footer.tpl und löschen vorher den Inhalt der dort drin stand. Die Leerzeile können wir auch wieder am Ende der overall_header.tpl entfernen. Die Datei abspeichern.


    7. Das gleiche Spiel machen wir nun um den Footerbereich zu finden. ABER wir laden die Seite nicht neu sondern bleiben auf der Seite. Hier beginnt der Footer bei uns bei <footer> alles darüber können wir in der overall_footer.tpl löschen. Auch entfernen wir die Zeilen </body> und </html> aus der Datei, da diese Einträge automatisch erzeugt werden. In dem Screenshot sehen wir aber noch eine Infobox über den Footer. Nun stellt sich die Frage, wollen wir den auf jeder Seite sehen? Wenn ja nehmen wir diesen Codeblock auch noch in die overall_footer.tpl. Den Inhalt dieser Infobox können wir für jede Seite extra angeben indem wir später eine IF Abfrage mittels php hinzufügen.


    Bildschirmfoto 2017-03-10 um 18.52.01.pngBildschirmfoto 2017-03-10 um 18.53.13.pngBildschirmfoto 2017-03-10 um 18.53.27.png


    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    8. TekBASE kommt mit einigen unnötigen Dateien daher diese werden wir jetzt einfach leeren, da wir keine linken und rechten Menüs verwenden und falls doch können wir das immer noch anders lösen. Wir öffnen folgenden Dateien in themes/design_2017/templates und leeren diese.


    - box_content_close.tpl
    - box_content_open.tpl
    - content_close.tpl
    - content_open.tpl
    - sidebar_left.tpl
    - sidebar_right.tpl


    9. Content dahin wo er hin gehört. In dem gekauften Design befindet sich der Content nicht in einer div sondern erfolgt Block für Block darunter. In dem Fall öffnen wir die box_content.tpl und fügen dort nur ein:

    PHP
    <?php echo ''.$box_text.''; ?>


    Wer will kann auch noch $box_title verwenden dieser gibt dann den "eigenen Seiten" Titel aus aber das können wir auch direkt in Code der eigenen Seiten eintragen. Eigene Seiten ist ein Menüpunkt im Adminbereich unter dem HTML Code für die einzelnen Webseiten hinterlegt werden kann bzw. genauer gesagt für den Contentbereich der einzelnen Webseiten.

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    5 Mal editiert, zuletzt von CFrankenstein ()

  • Eigene Anpassungen

    Was soll man sagen, das Grundgerüst des Designs steht jetzt im groben und ganzen. Bevor wir jetzt fortfahren mit den eigenen Seiten oder der Shopanpassung nehmen wir uns die Verlinkung im Header und Footer vor. Damit das ganze gleich ordentlich wird, verwenden wir Suchmaschinenfreundliche Links.


    1. themes/design_2017/templates/overall_header.tpl öffnen.


    2. Index.php im Browser aufrufen falls noch nicht geschehen.


    3. Jetzt ein Rechtsklick auf die Elemente, welche wir entfernen wollen und auf "Element untersuchen" gehen. In unserem Design hier wäre es die Sprachauswahl, der Livechat und das Lupen Icon. Hier prüfen wir, was alles zur Sprachauswahl gehört. Im Grunde wäre es die div mit der Klasse lang, dass würde schon reichen aber diese liegt zusätzlich noch in einer div mit der Klasse left und floatleft. Damit wir keinen unnötigen Balast haben, entfernen wir auch diese div. Bei dem Livechat wäre es der li Tag mit mit der Klasse livechat. Für das Lupen Icon entfernen wir die div mit der Klasse searchbox und floatright. Im Video zu sehen, kann man mit den Browser internen Tools auch die Änderungen vorweg testen und die unnötigen Elemente löschen oder verändern. Bevor man diese Änderungen auch beim HTML Code durchführt. Gelöscht werden kann über einen Menüpunkt; in Firefox "Knoten löschen"; oder mit der Entf/Del Taste.


    Bildschirmfoto 2017-03-11 um 10.04.28.pngBildschirmfoto 2017-03-11 um 10.05.09.png


    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    4. In dem Design gibt es nun verschiedene Menüpunkte Home, About, Pages, Services, ... hier benötigen wir nun Startseite, Gameserver, Voiceserver, Rootserver, Blog und Kontakt. Die drei Server Menüpunkte sollen Dropdowns sein und die restlichen normale Links. Dazu reicht es jetzt nicht, dass wir die vorgegebenen Namen einfach umschreiben. Denn ansonsten wäre Rootserver nur ein normaler Link und unser Blog Link wäre nur ein Dropdown. Also machen wir es wie folgt. Wir löschen alle Menüpunkte bis auf zwei, von jeder Sorte eines. Das heißt hier bietet es sich an Service und Elements stehen zu lassen. Daher machen wir auf alle anderen einen Rechtsklick und löschen die betreffenden Zeilen im Code. Das Design nutzt für die einzelnen Menüpunkte li Tags und für die Dropdowns sind zusätzliche Listen innerhalb dieser li Tags. Um den Menüpunkt Home und About zu löschen müssten wir demnach folgenden Code entfernen. Nachdem dies geschehen ist entfernen wir auch noch Pages, Blog und Contact. Dazu haben wir ein kleines Video erstellt, welches dies nochmals zeigt.


    Bildschirmfoto 2017-03-11 um 10.38.40.pngBildschirmfoto 2017-03-11 um 10.39.33.pngBildschirmfoto 2017-03-11 um 10.40.14.png


    Da das Design ist auch für Smartphones optimiert ist gibt es nicht selten noch ein zusätzliches Menü. Dazu wird in der css Datei eine maximale Weite angegeben wird diese überschritten, wird das Element mit dem Menü für kleine Bildschirme ausgeblendet und das normale Menü eingeblendet und andersrum, wenn die Weite kleiner oder gleich der maximalen Weite ist. Daher ziehen wir das Browser Fenster kleiner und sehen, dass hier das Menü verschwindet und ein neues Menü sichtbar wird. Auch hier sehen wir mit "Element untersuchen" nach den Menüpunkten und entfernen auch dort die Menüpunkte.


    Bildschirmfoto 2017-03-11 um 10.41.31.pngBildschirmfoto 2017-03-11 um 10.42.01.png


    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    5. Nun geht es ans umbenennen. Service nennen wir in Startseite um und Elements in Gameserver und legen von dem Codebereich eine Kopie an die wir Voiceserver nennen und noch eine als Rootserver. Danach brauchen wir noch zwei Kopien des Startseiten Menüpunkts und nennen dies dann Blog und Kontakt. Für die Gameserver, Voiceserver und Rootserver brauchen wir jetzt noch einige Links im Dropdown Menü. Wir haben uns erst einmal für diese entschieden. Wie was und wo kann aber jeder selbst frei wählen. So könnten wir bei Gameserver auch einfach alle Spiele eintragen, die unser Kunde anbieten will. Änderungen sind jederzeit möglich.


    Gameserver: Publicserver, Clanpakete
    Voiceserver: Mumble, Teamspeak 3
    Rootserver: Linux Server, Windows Server

    Bildschirmfoto 2017-03-11 um 21.59.04.pngBildschirmfoto 2017-03-11 um 22.05.02.png


    7. Wenn wir die Datei jetzt speichern und das ganze im Browser neu laden, sollte nun passen. Aber wir haben die Verlinkung noch nicht gesetzt. Dazu müssen wir bei den Menüpunkten die Links setzen und ändern den Inhalt bei href=".....". Wichtig ist dabei das / hinter dem Namen, da wir Suchmaschinenfreundliche Links verwenden wollen und hier macht es einen Unterschied ob wir href="publicserver" oder href="publicserver/" angeben. Es sollte nicht gemischt werden, mal so oder so.


    - Startseite <a href="/">
    - Gameserver <a href="#">
    - Publicserver <a href="publicserver/">
    - Clanpakete <a href="clanpakete/">
    - Voiceserver <a href="#">
    - Mumble <a href="mumble-voiceserver/">
    - Teamspeak 3 <a href="teamspeak-3-voiceserver/">
    - Rootserver <a href="#">
    - Linux Server <a href="linux-rootserver/">
    - Windows Server <a href="windows-rootserver/">
    - Blog <a href="blog/">
    - Kontakt <a href="kontakt/">


    Bildschirmfoto 2017-03-11 um 22.12.30.png


    Wir können auch gleich noch nach Phone und Email suchen um die Daten zu ändern.


    8. Das gleiche machen wir nun mit der overall_footer.tpl, wir entfernen alles was wir nicht benötigen und ändern die restlichen Sachen. Hier noch einige Links die wir im Footer unterbringen sollten:


    - Impressum <a href="impressum/">
    - Kontakt <a href="kontakt/">
    - AGB <a href="agb/">
    - Datenschutz <a href="datenschutz/">


    Zusätzlich könnte man nun noch auf die Produkte oder den Kundenbereich und andere Unterseiten verlinken, die nicht oben im Menü aufgeführt sind. Vielleicht Support, Technik, ...


    Bildschirmfoto 2017-03-11 um 22.23.22.png


    9. Bei unserem Design sehen wir links noch ein sich drehendes Zahnrad. Dies dient zur Farbauswahl. Andere Designs haben vielleicht etwas ähnliches oder kommen nur mit einem Farbschema daher. Auf jedenfall brauchen wir dies nicht und löschen es. Das wäre die div samt Inhalt mit der Klasse switcherbody und ist in der overall_footer.tpl zu finden. Wir prüfen in der overall_header.tpl und overall_footer.tpl ob auch noch eine js Datein geladen wird, die dafür verwendet aber jetzt nicht mehr benötigt wird. Idealerweise heißt diese bei uns styleswitch.js. Wir entfernen auch diesen Eintrag und speichern unsere Änderungen.


    Bildschirmfoto 2017-03-11 um 22.24.09.pngBildschirmfoto 2017-03-11 um 22.24.41.pngscreenshot-2017-03-11-22-38-58.png

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    6 Mal editiert, zuletzt von CFrankenstein ()

  • Suchmaschinenfreundliche Links


    Dazu gibt es bereits bei uns im Handbuch eine ausreichende Erklärung. Daher halten wir es kurz.
    Link: CMS Optimierung


    1. Wir erstellen eine .htaccess Datei im Hauptverzeichnis wo auch die admin.php liegt.


    2. Als nächstes tragen wir die bereits verwendeten Links ein. Wir verlinken unsere Server nicht direkt auf die Produkte sondern auf eigene Seiten, da der Kunde zum Beispiel nicht nur einen Linux Server anbietet sondern verschiedene. So kann er diese in der Übersicht vergleichen und dort das Produkt auswählen. Für eigene Seiten und Produkte erstellen wir zusätzlich im Adminbereich noch schnell ein paar Einträge. Test1, Test2, ... reicht vollkommen. Achten Sie auf die ID der eigenen Seite bzw. des Produktes. Diese müssen richtig in der .htaccess angegeben werden ansonsten wird später bei minecraft-gameserver zum Beispiel einen Voiceserver angezeigt. Änderungen und zusätzliche Seiten können wir jederzeit hinzufügen.


    3. Wir öffnen die config.php und tragen noch folgendes ein:

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    3 Mal editiert, zuletzt von CFrankenstein ()

  • Modul Templates anpassen


    Im Browser rufen wir nun Kontakt, Impressum und eines der Produkte sowie den Blog auf. Dafür können wir auch die eigentlichen Links nutzen. Für den Blog müssen wir noch eine Kategorie sowie einen Eintrag hinzufügen. Dies geschieht unter Adminbereich -> CMS Module -> Module -> Blog


    - modules.php?name=feedback
    - modules.php?name=impressum
    - modules.php?name=blog
    - modules.php?name=store&op=details&ids=1


    Kontakt Modul
    1. Wir fangen mit dem Kontakt Modul an. Hier laden wir modules.php?name=feedback und sehen, dass der Contentbereich einer Bearbeitung bedarf. Wir rufen das gekaufte Design im Browser auf und gehen dort auf den Link Contact. Den Code dazu finden wir in der jeweiligen HTML Datei, welche in der Adresszeile des Browsers angezeigt wird. Im Video ist zu sehen, wie die anderen Elemente ober und unterhalb entfernt werden. So ist es vielleicht für einige einfacher bestimmte Stellen im Code zu finden und zeigt hier, was wir übernehmen werden. Für Slider, Maps etc wird sich irgendwo noch Javascript verstecken, der die einzelnen Einstellungen oder Positionen verwaltet. Oft direkt an der Stelle via <script ...>...</script> nicht selten aber auch in separaten Dateien.


    screenshot-2017-03-12-12-42-02.pngscreenshot-2017-03-12-12-50-38.png


    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    2. Wir können ruhig die <!-- .... --> Kommentare entfernen bevor wir den Code kopieren. Wir öffnen die themes/design_2017/templates/feedback.tpl, fügen vor <?php eine Leerzeile ein und dann den kopierten Code.


    Bildschirmfoto 2017-03-12 um 13.24.19.pngBildschirmfoto 2017-03-12 um 13.25.29.png


    3. Jetzt wird es etwas komplizierter und einwenig PHP Kenntnisse wären nicht schlecht. Mit etwas Überlegung und vergleichen der Screenshots sollte es aber jeder hinbekommen. Kurz gesagt, unsere Form und Inputfelder müssen angepasst werden. Zusätzlich brauchen wir noch das ReCaptcha und den standard Sicherheitscode in der Form. Wichtig sind die richtigen Namen der Inputfelder und der action Eintrag im form Tag. Hier kann feedbackpath als Variable genutzt werden oder aber modules.php?name=feedback bzw. kontakt/. Eben so, wie wir es in der .htaccess genannt haben. Den alten Code der feedback.tpl entfernen wir anschließend. Wenn wir jetzt im Browser die Seite neuladen sehen wir das Ergebnis. Falls wir kein ReCaptcha verwenden und der Code wie auf dem Screenshot nicht angezeigt wird sondern nur das kleine Inputfeld liegt es daran, dass wir die Grafik entfernt haben. Wir kopieren einfach vom TekBASE Standard Design images/code_bg.jpg nach themes/design_2017/images/code_bg.jpg und dann sollte es funktionieren. Wird kein Inputfeld angezeigt brauchen wir dies nicht machen, denn dann ist die GD Extension für PHP nicht aktiv.


    Bildschirmfoto 2017-03-12 um 13.27.07.pngBildschirmfoto 2017-03-17 um 09.05.45.pngscreenshot-2017-03-17-09-08-51.png


    4. Auf dem Screenshot ist zu sehen, dass hier die Textbox direkt an einem der Inputfelder liegt. Daher haben wir uns das gekaufte Design angesehen, ob es dafür bereits vorgefertigte Klassen in den css Dateien gibt. Dazu nach einer Klasse suchen die nur margin-top: xxxxx als Inhalt hat und nicht etwa noch color oder irgend etwas anderes. Sollten wir solche Einträge nicht finden öffnen wir die style.css oder eine der anderen und fügen folgendes ein (nicht benötigte können später gelöscht werden).


    Jetzt haben wir die Möglichkeit den Abstand zwischen Textbox und Inputfeld zu vergrößern. Dazu untersuchen wir wieder die Elemente oder sehen uns den Seitenquelltext an. Die Inputfelder liegen in einer div mit der Klasse col-sm-7 und die Textbox in einer div mit der Klasse col-sm12. Wir werden also hier den Abstand der beiden divs vergrößern. Dazu können wir entweder in der div den class Inhalt von col-sm-7 auf col-sm-7 mrg15B ändern oder den der col-sm-12 auf col-sm-12 mrg15T. Wie wir das machen ist egal, es empfiehlt sich aber, dass wir uns für eine Art entscheiden und diese dann im gesamten Design beibehalten. Wir haben der div jetzt gesagt, dass diese 15 Pixel Abstand halten soll. Auch fügen wir bei dem img Tag für den Code noch ein class="mrg15B", somit sollte es dann passen. Jetzt fehlt nur noch die Map Anzeige.


    Bildschirmfoto 2017-03-17 um 09.33.10.pngscreenshot-2017-03-17-09-32-03.png


    5. Für die Map sehen wir uns noch einmal den Seitenquelltext des gekauften Designs an und finden ganz unten zwei js Dateien. Da diese bei uns noch fehlen, wurde die Map bis jetzt nicht angezeigt. Wir kopieren diese zwei js Dateien und fügen diese in unsere feedback.tpl ein. Danach ändern wir noch den Pfad. Bitte beachten, dass jeder Designer es anders löst. Vielleicht wird keine Map Ansicht verwendet oder die Dateien wurden bereit im head Bereich geladen. Oder oder oder. Hier hilft es nur, sich das Design genau anzusehen.


    Bildschirmfoto 2017-03-17 um 09.41.08.png


    Die erste Datei wird direkt von google geladen, die kann also nicht die richtigen Koordinaten enthalten. Also sollte es wohl die map-active.js sein. Diese wird in themes/design_2017/assets/js geöffnet und wir ersetzen die Koordinaten, welche wir unter http://maps.google.de suchen können. In unserem Beispiel Hamburg wäre es die 53.5586937 und 9.7873985,11. Falls es diese Datei nicht gegeben hätte und auch im Code selbst kein Javascript zu finden ist, hätte es bei diesem Design auch in der main.js liegen können. Hier muss man gegenfalls ein wenig Nachdenken. Denn der Designer wird den Code sicherlich nicht in eine der fertigen js Projekte stecken, wie zum Beispiel bei uns die jquery-1.12.4.min.js oder bootstrap.min.js das macht niemand. Für die zum Design erstellten Javacripts gibt meist eigene JS Dateien wie theme.js, main.js, stuff.js, ....


    Bildschirmfoto 2017-03-17 um 09.45.48.pngscreenshot-2017-03-17-09-50-12.png

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    5 Mal editiert, zuletzt von CFrankenstein ()

  • Impressum Modul


    Wir können das Modul impressum für das Impressum verwenden oder aber unter eigene Seiten im Adminbereich erstellen wir eine Seite und verwenden dort HTML Code. Dafür müssten wir dann aber auch den Link in der .htaccess anpassen.


    Das Modul impressum hat den Vorteil, dass die Daten immer aktuell sind sofern diese unter CMS Einstellungen im Adminbereich aktualisiert werden. Nutzen wir eine eigene Seite dafür, so müssten wir diese zusätzlich anpassen. Eine eigene Seite hingegen hat den Vorteil, dass wir diese direkt im Adminbereich mit einem WYSIWYG Editor bearbeiten können. Wobei wir selbst diesen immer deaktiviert lassen (dazu reicht es unter /scripts den Ordner tiny_mce zu löschen).


    Da schon alles soweit vorbereitet wurde nehmen wir das Modul. Wir öffnen nun die themes/design_2017/templates/impressum.tpl und rufen auch wieder das gekaufte Design auf. Leider gibt es kein Template für ein Impressum, daher legen wir selbst Hand an. Wir nehmen dazu eine Seite her, die simpel aufgebaut ist. Ok in dem Design gibt es keine einfache nur Text Seite. Daher nehmen wir einfach eine x-beliebige Seite und mit einem Rechtsklick untersuchen wir ein Element, zum Beispiel die Überschrift. Da es sich um ein auf Bootstrap Framework handelt ist der Grundaufbau bei jedem Design in etwa der Selbe. Es gibt eine div mit der Klasse container und dort hinein kommt der Content. Man legt nun eine div mit der Klasse row an, also die Zeile und darin divs mit der Klasse col-xx-yy, dies wären die Spalten. xx steht dafür für das Verhalten bei einer bestimmte Bildschirmweite und yy für die Breite der Spalte hier kann ein Wert von 1-12 gewählt werden, wobei 12 eine Breit von 100% entspricht.


    Sind zwei Spalten vorhanden mit der Klasse col-md-6 so sind beide Spalten 50% breit. Wenn wir das Browserfenster verkleinern merken wir irgendwann (bei circa 7XX Pixel), dass die Boxen plötzlich nicht mehr nebeneinander sondern untereinander gelistet werden. Hätten wir hier statt md ein sm eingetragen so könnte man die Breite bis 4XX Pixel verringern. Hier bekommt die Spalte also bei geringer Browserbreit automatisch 100%. Dazu aber später mehr, denn für das Impressum benötigen wir nur zwei Spalten. Ob wir md oder sm nehmen hängt davon ab, was noch alles im Impressum steht oder ob wir einen langen Straßennamen verwenden. Da wäre dann die Mindestweite von sm zu klein, so dass es zu einem Zeilenumbruch kommen würde. Probieren geht über studieren sagt man so schön, daher probieren Sie es einfach aus.


    In dem gekauften Design liegt die div mit der Klasse row innerhalb einer div mit der Klasse container und diese wiederrum in einem section Element. Der Designer macht es so, dass er die div mit der Klasse container wie eine row also als Zeile nutzt. Wenn unser Kunde noch Zeit hat, kann er dies gerne optimieren und umändern, denn so sind es pro Block immer 2-4 Zeilen Code mehr. Dafür muss er gegebenfalls auch die css Dateien anpassen.


    Bildschirmfoto 2017-03-17 um 23.23.26.pngBildschirmfoto 2017-03-17 um 23.29.18.png


    In unserem Beispiel haben wir wie im Screenshot zu sehen folgenden Code, den wir oben in die impressum.tpl einfügen. Dazu schließen wir noch das div und section Element. Falls wir die zweite div die auch die Klasse row hat mit übernommen haben, löschen wir den Bereich raus. Wir haben jetzt eine div mit der Klasse row und eine div mit verschiedenen col-xx-yy Klassen. Da wir aber immer die komplette Breite nutzen wollen, benötigen wir keine Spalte für die Überschrift die kleiner als 100% und zentriert ist. Denn wenn in diesem Design die Breite über 700XX Pixel beträgt, nutzt das Design für den Content nicht die 100%; vom Logo Anfang bis zum Lupen Symbol; sondern nur 66%. Wir löschen einfach mal das, was wir für unsinnig halten und schaun, ob es klappt. Als erstes reicht uns die col-xs-12. Das heißt einfach die Spalte hat 100% egal welche Browserbreit. Wäre es col-md-12 so wäre es trotzdem immer 100%. Da unter der Breit von md also circa 7XX Pixel automatisch auf 100% gestellt wird. Dazu ein kleines Video.


    - row text-center hier gibt der Designer an, dass der Text innerhalb des div Elements zentriert ist.
    - col-text-center hiermit wird die Spalte innerhalb der row zentriert. Das div Element mit der Klasse row hat immer 100%.


    Externer Inhalt youtu.be
    Inhalte von externen Seiten werden ohne Ihre Zustimmung nicht automatisch geladen und angezeigt.
    Durch die Aktivierung der externen Inhalte erklären Sie sich damit einverstanden, dass personenbezogene Daten an Drittplattformen übermittelt werden. Mehr Informationen dazu haben wir in unserer Datenschutzerklärung zur Verfügung gestellt.


    Wir lassen die Überschrift und die Linien stehen aber den Slogan entfernen wir. Diese kann der Kunden dann bei Bedarf später entfernen. Zusätzlich erstellen wir eine neue div mit der Klasse row und darin zwei div Elemente mit der Klasse col-md-6. In diesen beiden fügen wir die Variablen für das Impressum mit ein. Wenn wir das ganze im Browser aufrufen und auch das Browserfenster verkleinern fallen uns drei Dinge auf.


    Bildschirmfoto 2017-03-18 um 10.38.56.pngBildschirmfoto 2017-03-18 um 10.39.06.pngBildschirmfoto 2017-03-18 um 10.39.52.pngBildschirmfoto 2017-03-18 um 10.43.42.png


    1. Wir haben dort noch Text, welcher über die gesamte Breite des Browserfensters geht. Zumal wir die Texte bei gewerblichen Seiten komplett entfernen können. Dazu diese im Adminbereich unter CMS Einstellungen löschen. Hier muss im Gegenzug jedoch der Link zu einer Streitschlichtungs-Plattform hinterlegt werden.


    2. Es wird keine Email angezeigt. Da wir im Code dafür eine PHP Datei aufrufen, welche ein Bild generiert fehlt in unserem Design die Grafik. Wir kopieren einfach vom TekBASE Standard Design images/email.jpg nach themes/design_2017/images/email.jpg und dann sollte es funktionieren. Wir können aber auch die Email direkt ausgeben lassen siehe die anderen Variablen. Dazu entfernen wir das img Element und rufen nur die Variable auf.


    3. Der Abstand vom Wort Telefon zur Anschrift ist nicht vorhanden. Das passiert, weil keinem der beiden Spalten ein Abstand nach unten zugewiesen wurde. Wir geben beiden div Elementen mit der Klasse col-md-6 noch zusätzlich die Klasse mrg20B. Das heißt, dass jede Spalte/Box nach unten 20 Pixel frei lässt genau gesagt margin-bottom:20px. Wenn nun auf Grund der geringen Breite die beiden Spalten nicht mehr nebeneinander sondern untereinander stehen, sollte jetzt alles stimmen. Das heißt aber auch, wenn wir noch ein div Element unter den Code der beiden Spalten einfügen, so hätte auch dieser einen Abstand von 20 Pixel zu den beiden Spalten. So ist es auch von uns gewollt, da hier noch aus Punkt 1 der Link mit rein kommt.


    Bildschirmfoto 2017-03-18 um 10.49.35.pngBildschirmfoto 2017-03-18 um 12.39.40.pngscreenshot-2017-03-18-12-46-35.png



    Natürlich sieht das Impressum ein wenig "schlicht" aus. Änderungen am Code können vom Käufer jedoch jederzeit vorgenommen werden.


    So, diesmal sind wir vom sturren anpassen des Designs einwenig abgeschweift. Diejenigen die das Grundsystem von Bootstrap verstehen wollen, sollten sich http://holdirbootstrap.de/ durchlesen und ausprobieren. Dort sind auch die Layout Möglichkeiten vorhanden und welche Klassen verwendet werden. Diese treffen dann für jedes Bootstrap basierte Design zu, welches Sie sich kaufen. Zusätzlich natürlich noch den css, js, ... welche der Designer verwendet.

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    6 Mal editiert, zuletzt von CFrankenstein ()

  • Blog Modul


    Als erstes müssen wir noch die Grundeinstellungen vornehmen, sofern wir das nicht schon getan haben.


    1. Adminbereich auf CMS Module -> Module -> Blog und dort auf Einstellungen


    2. Wir nehmen dort 10, nein, nein, ja, nein, neuste zuerst und speichern dies


    3. Als nächstes legen wir eine Kategorie an und nennen diese zum Beispiel Allgemein


    4. Nun können wir einen Beitrag erstellen.


    Wenn wir jetzt den Blog im Browser aufrufen, sieht die Seite wieder einmal sehr bescheiden aus. Wir gehen daher in unserem gekauften Design auf den Link Blog. Hier sind in der Übersicht die Blogbeiträge in kleinen Boxen gepresst. Für ein Fotoblog mag dies ja passen aber wir wollen die Kunden nicht mit schönen Fotos sondern News und Ankündigungen rund um die angebotenen Produkte erfreuen. Daher müssen wir unsere eigene Auflistung basteln. Einige Designs haben mehrere Blog Varianten im Angebot, dieses jedoch nicht.


    screenshot-2017-03-18-13-27-16.pngscreenshot-2017-03-18-13-27-42.pngscreenshot-2017-03-18-13-27-56.png


    Die Templates für das Blog Modul finden wir nicht gleich im themes/design_2017/templates Ordner sondern vielmehr in modules/blog/templates . Das liegt daran, dass das Blog Modul mal eine Download Erweiterung war, welche dann jedoch mit einem der Updates integriert wurde. Wir können nun die tpl Dateien direkt dort bearbeiten oder dies auch nach themes/design_2017/templates kopieren. Wir lassen sie erstmal da.



    blog_article.tpl


    Dieses Template ist für das Grundgerüst eines Blogbeitrags zuständig (Titel, Datum, Tags, ...) und wird auch in der Übersicht verwendet. Wir rufen im Browser falls nicht schon geschehen modules.php?name=blog auf. Wir benötigen jetzt das Grundgerüst für eine Zeile und eine Spalte. Bei dem gekauften Design wäre dies also laut unserer bereits angepassten impressum.tpl folgendes.


    Wie schon erklärt nimmt der Designer immer einen ganzen Block und stellt diesen rein daher ist auch die div mit der Klasse container wieder mit dabei. Da er über das section Element die Hintergrundfarbe und Ausrichtung steuert. Bei anderen Designs könnte es auch so sein, dass wir die div mit der Klasse container noch in der overall_header.tpl öffnen und in der overall_footer.tpl schließen. Weil es eben als Regal anzusehen ist, wo wir unseren Inhalt reinstellen und dabei selbst bestimmen wieviele Zeilen und Spalten pro Zeile vorhanden sind.


    Wir haben jetzt eine komische Situation wegen eben dieser Lösung, die aber so bei anderen Designs vielleicht nicht vorhanden ist. Wir könnten den Datenmüll mit in die blog_article.tpl nehmen und dies für jeden Blogbeitrag mit verwenden oder wir versuchen den Codeumfang zu reduzieren indem wir das Regal auch als Regal verwenden und nicht einfach mehrere leere Regale übereinander stellen. Was wäre also die Lösung? Richtig wir müssen das section und div Element woanders unterbringen.


    Dazu öffnen wir die overall_header.tpl und overall_footer.tpl und sehen sie uns an. Am Ende der overall_header.tpl und am Anfang der overall_footer.tpl wäre jetzt ein guter Platz dafür. Damit aber dieser Code nur für das Blog Modul verwendet wird muss das ganze in eine if Abfrage gepackt werden. Einmal für die overall_header.tpl und einmal für die overall_footer.tpl Diese sieht dann circa so aus:

    PHP
    <?php
    
    
    if ($name == "blog") {
      echo '....';
    }
    
    
    ?>


    Wer jetzt aufgepasst hat merkt sicherlich, dass wir die if Abfrage auch für andere Module erweitern können. Da zum Beispiel auch das Impressum Modul oder der spätere Shop nur aus einen section und einer div mit der Klasse container bestehen. Auf dem Screenshot zu sehen sind verschiedene sections weiß, dunkelblau, weiß, hellblau.


    screenshot-2017-03-21-22-00-49.png


    Wir werden diese verschiedenen section Elemente sicherlich nur für "eigene Seiten" verwenden. Daher wäre die einfachste Lösung nicht jedes Modul aufzuzählen in der wir die section und div Elemente direkt in die overall_header.tpl und overall_footer.tpl auslagern, sondern vielmehr nur die Module die ausgeschlossen werden. Also anstelle von:

    PHP
    <?php
    
    
    if ($name == "blog" OR $name == "feedback" OR $name == "impressum" OR $name == "store") {
      echo '....';
    }
    
    
    ?>


    reicht es wenn wir sagen, dass der Code nicht geladen werden soll, wenn das Modul sections oder feedback aufgerufen wird. Feedback also das Kontakt Modul aus dem Grunde, weil wir das section Element in der feedback.tpl schließen und danach noch den google Maps Code eingebunden haben. Die Aufteilung würde gerade Anfänger noch mehr verwirren.

    PHP
    <?php
    
    
    if ($name != "sections" AND $name != "feedback" AND $name != "") {
      echo '....';
    }
    
    
    ?>


    Hier sehen Sie, dass dort noch $name != "" steht. Das hat den Grund, dass wir für die Startseite auch eine eigene Seite verwenden. Also im Grunde auch das sections Modul. Jetzt heißt es also die impressum.tpl öffen und dort die erste section und die erste div Zeile sowie die letzte div und section Zeile löschen. Wir passen noch schnell die overall_header.tpl und overall_footer.tpl an und rufen zum Test im Browser noch einmal das Impressum auf.


    Bildschirmfoto 2017-03-21 um 23.08.59.pngBildschirmfoto 2017-03-21 um 23.09.45.png


    Wer sich jetzt fragt, wieso es so unstrukturiert vor sicht geht. Wir haben uns das Design vorher nicht angesehen und einfach drauf losgearbeitet und nebenbei diese Anleitung geschrieben. Auch Sie werden bei Anpassen sicherlich an mehreren Stellen merken "he das geht doch besser oder einfacher" und genau auf dieses Möglichkeiten weisen wir daraufhin. So haben Sie sich mit ihrem gekauftem Design bereits angefreundet und wissen im Groben und Ganzen was wofür und wo ist.


    So wir haben jetzt also nur noch das div Element mit der Klasse row sowie col-xx-yy. Diese beiden fügen wir ganz oben in die blog_article.tpl ein und schließen beide ganz unten in der Datei. Das text-center haben wir entfernt damit der Titel und eben der Text nicht zentriert dargestellt wird.


    Bildschirmfoto 2017-03-21 um 22.49.52.pngBildschirmfoto 2017-03-21 um 22.50.05.png


    Nun haben wir schon sozusagen ein Regal mit mehreren Böden und in jedem Fach haben wir ein Buch also einen Blogbeitrag. Wir möchten jetzt folgendes auflisten:


    - Titel
    - Datum, Kategorie
    - Text
    - Tags / Keywords


    ACHTUNG: Auf den nachfolgenden Screenshots sind die Verlinkungen für die SEO Links auf http://domain/ bezogen. Da wir in der .htaccess aber für das Blog Modul blog/ angegeben haben, müssen wir auch die Links anpassen. Hier jedoch nur die Links ohne modules.php?name=blog... da dies die normalen Links ohne SEO sind. Aus href="'.$box_articlelink.'" wird zum Beispiel href="blog/'.$box_articlelink.'".


    Die Kommentare klammern wir im Code aus, da wir den Blog für News nutzen und auf Kommentare verzichten wollen. Wenn der Kunde es wünscht kann er dies wieder aktivieren dazu muss er aber auch die blog_comments.tpl anpassen. Da diese für die Darstellung der Kommentare zuständig ist. Das ganze ist im nachfolgendem Screenshot nun wirklich recht schlicht gehalten und kann in diesem Design mit css und html Code aufgepeppt werden. Wir haben den alten Code mit /* und */ auskommentiert. Das heißt dieser wird von php nicht beachtet also auch nicht dargestellt. Dazu wurde das */ eine Zeile vor dem ?> eingefügt.


    Bildschirmfoto 2017-03-21 um 23.15.58.pngscreenshot-2017-03-21-23-17-28.png


    Wir haben nach der Zeile mit der Klasse col-md-12 Zeile noch eine Zeile aus der impressum.tpl eingefügt die für den Titel zuständig ist. Danach haben wir die Verlinkung und den Titel hinzugefügt sowie das Datum, die Kategorie und den Text. Zum Schluss noch die Tags bzw. Keywords. Beim ersten Aufruf des Blogs im Browser haben wir gesehen, dass der Abstand Titel zum Datum zu groß war. Schuld ist immer der Designer, daher haben wir erstmal ein margin-bottom:20px eingefügt statt den 80px wie sie in der style.css stehen. Auch haben wir die Schriftgröße für die Kategorie gesetzt. Hierfür sollte man später eine Klasse erstellen wo die Schriftgröße in der style.css festgelegt wird. Da wir weiter oben bei "Module Templates anpassen" eigene Klassen für margin und padding definiert haben ersetzen wir noch die Zeile:

    Code
    <div class="section-title" style="margin-bottom:20px;">


    durch folgendes, dabei haben wir den Abstand auf 10px verringert, weil es besser aussieht.

    Code
    <div class="section-title mrg10B">


    Auch nehmen wir noch einige andere Veränderungen vor. Für die Tags wollen wir ein Icon verwenden. Dabei fällt uns auf, dass das Design die Material Icon Font von google nutzt. Weit verbreitet ist jedoch auch Font-Awesome wobei die schon wieder langweilig ist, da jeder sie nutzt. Font Icons können einfach ausgetauscht werden. Font-Awesome nutzt <i class="fa fa-globe"></i> und die google Material Icon Font <i class="zmdi zmdi-globe"></i>. Man könnte es im Design nun auf jeder Seite einzeln raussuchen oder. Man entfernt Font-Awesome sowie die Stylesheets und integriert eine x-beliebe Icon Font. Nehmen wir hier google Material. Jetzt müssen wir eigentlich in den google Stylesheets nur noch zmdi in fa umbenennen. Das geht automatisch mit jedem Editor via "alle Ersetzen". Nun müssten nur noch die nicht vorhandenen Icons gegen ähnliche ersetzt werden. Heißt ein Icon bei Schriftart A xx-search2 und bei Schriftart B xx-zoom für das Lupen Icon so ersetzen wir im Design das search2 durch zoom. Die Lösung mit dem umbenennen der Stylesheets ist zwar keine super Lösung aber sie ist schneller als wenn man nun 100 oder mehr Einträge in verschiedenen Blogeinträgen, Eigenen Seiten oder anderen Modulen ändern müsste. Fertig sieht es dann so aus. Das reicht für den Anfang.


    Bildschirmfoto 2017-03-21 um 23.58.48.pngscreenshot-2017-03-21-23-59-13.png

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    3 Mal editiert, zuletzt von CFrankenstein ()

  • Der erste Blogeintrag steht. Nun können wir uns überlegen, ob es Sinnvoll ist die Blogeinträge mit oder ohne Navigation zu nutzen. Wenn immer nur die ersten 10 News angezeigt werden sollen, können wir die blog_page.tpl einfach leeren. Dann sollten aber auch bei den Blog Einstellungen die Keywords deaktiviert und in blog_article.tpl die Codezeilen ausgeklammer oder gelöscht werden.


    Unser Kunde möchte den Blog mit Navigation nutzen, daher legen wir zuerst 3 weitere News an. Zudem stellen wir unter CMS Module -> Blog -> Einstellungen die Beiträge pro Seite auf 2. Wir haben nun 4 News und somit 2 Seiten, die Navigation sollte nun zu sehen sein. Wer sich mit den Links "Ältere Beiträge" und "Neuere Beiträge" begnügen kann, braucht nur den SEO Link anzupassen und noch den Abstand zur jeweils letzten News setzen. Da wir ein Bootstrap basiertes Design verwenden können wir den beiden Links noch die Klasse btn und btn-primary zuweisen. In der .htaccess haben wir angegeben, dass unser Blog Modul unter blog/ aufgerufen werden soll. Deswegen tragen wir bei den Links noch ein blog/ ein. Die bearbeitete blog_page.tpl sieht dann so aus.


    Bildschirmfoto 2017-04-02 um 20.07.16.pngscreenshot-2017-04-02-20-09-33.png


    Das Modul blog verwendet noch eine eigene CSS Datei diese können wir mit in unsere style.css übernehmen und dort anpassen oder direkt bearbeiten. Die Beschriftung der Buttons ist in der languages/german/blog.php zu finden.


    Damit wäre auch das Modu blog erledigt. Falls gewünscht könnte hier nun noch die Kommentar Funktion bearbeitet werden. Dazu kann man sich am feedback.tpl für die Form orientieren.


    Oder aber man integriert z.B. Anbieter wie Disqus.com oder Facebook. Dazu könnte die blog_comment.tpl nutzen und die blog_write.tpl leeren. Besser wäre es jedoch, wenn man die blog_comment und blog_write.tpl leert und in der blog_articles.tpl an der richtigen Stelle eine if-Abfrage einbaut, welche dann nur den Inhalt anzeigt, sobald der Blogeintrag direkt aufgerufen wird und nicht schon in der Übersicht.

    Code
    if ($op == "article") {
      Code für Disqus, Facebook Kommentare, ...
    }

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    3 Mal editiert, zuletzt von CFrankenstein ()

  • Shop/Store Modul


    Das Modul shop ist ein Shop mit Direktbestellung oder anders rum gesagt ohne Warenkorb. Das Modul store hingegen besitzt einen Warenkorb. Welches verwendet wird ist egal und kann jederzeit geändert werden. Beide Module nutzen auch die gleichen Template Dateien, was es noch einfacher macht zwischen den beiden Modulen zu wechseln.


    Wir verwenden für den Shop verschiedene Templates, aufgelistet nach der Nutzungsreihenfolge:


    - store_category_1.tpl Template für Produktkategorien, in welcher die Produkte gelistet werden.


    - store_home.tpl Das gleiche wie bei shop_category_1.tpl.


    - store_details_1.tpl Template für die Detailansicht eines Produktes.


    - store_add_details.tpl Für das Modul shop, hier werden die gewählten Variationen eines Produktes angezeigt mitsamt dem Preis.


    - store_basket.tpl Warenkorb Ansicht für das Modul store.


    - store_address.tpl ist der Erste Schritt, wenn ein Produkt bestellt wird, hier kann der Kunde seine Anschrift angeben.


    - store_login.tpl Dies gehört mit zum Ersten Schritt, falls der Kunden Login erlaubt ist.


    - store_shipping.tpl Auswahl der Versandmethode. Bei Hostern und Dienstleistern kann dieser Schritt ausgeblendet werden.


    - store_payment.tpl Auswahl der Zahlungsart.


    - store_confirm.tpl Übersichtsseite am Ende der Bestellung. Hier kann der Kunde seine Angaben prüfen und die Bestellung senden.


    - store_sepa.tpl Falls als Zahlungsart Lastschrift gewählt wurde muss der Kunde nach der Bestellung dieses Formular ausfüllen.


    - store_steps.tpl Zeigt eine Box mit den jeweils aktiven Schritt an zum Beispiel "Schritt 1 - Anschrift", "Schritt 2 - Versandart" und so weiter.



    Die store_home.tpl ist die die gleiche wie die store_category_1.tpl es kann also für jede Kategorie eine extra Template angelegt werden. Das gleiche gilt für die store_details_1.tpl. Die store_steps.tpl werden wir nicht verwenden.


    Da unser Kunde keine Versandprodukte anbietet, sondern Server und Dienstleistungen wollen wir keine Produktauflistung via Raster oder Listen wie man es von "normalen" Onlineshops (Amazon, Otto, ...) kennt. Wir wollen daher die Preistabellen nutzen, welche dem Design beiligen. Diese stellen zwei, drei, vier Produkte nebeneinander dar. Ideal für Server Angebote wie zum Beispiel Rootserver S, Rootserver M, Rootserver L.


    Hier bietet es sich an, die Produkte, welche zur Auswahl stehen in einer "Eigene Seite" zu hinterlegen. So können wir die Auflistung besser anpassen, da hier z.b. auch schon die "Variations Kategorien" (Auswahlmöglichkeiten) verwendet werden können. Das wären bei unserem Kunden für die Rootserver zum Beispiel der Speicherplatz, RAM oder ähnliches. Die normale Produktauflistung der Kategorien enthält nur den Titel, Artikelnummer, Kurzbeschreibung sowie den Grundpreis.


    screenshot-2017-04-03-23-00-30.png


    Wir legen vorweg trotzdem erst einmal im Adminbereich die Produkte für den Shop an, anstatt mit der "Eigenen Seite" zu beginnen. Damit wir wissen, welche Produkte und Auswahlmöglichkeiten wir dem Kunden anbieten wollen.


    1. Je eine Kategorie für Gameserver, Webspace sowie Rootserver


    2. Variations Kategorien für Rootserver zum Beispiel RAM, Speicherplatz, Vertragslaufzeit und Vorauszahlung


    3. Variationen für RAM zum Beispiel 16 GB, 32 GB und für Vertragslaufzeiten und Vorauszahlung 1 Monat, 6 Monate, 12 Monate


    4. Artikel für Rootserver anlegen zum Beispiel Rootserver S, Rootserver M und Rootserver L und wählen die Variationen sowie Preise aus.


    Nun da wir die Produkte haben gehen wir im Adminbereich unter "CMS Module" auf "Eigene Seiten" vorweg löschen wir jedoch unter scripts den Ordner tiny_mce damit deaktivieren wir den WYSIWYG Editor komplett. Wenn wir nur mit dem Html Code arbeiten wollen ist dies einfacher. Ansonsten müssten wir immer beim Bearbeiten der "Eigenen Seite" auf die Code Ansicht klicken. Wir rufen jetzt die html Datei des gekauften Designs im Browser auf, welche für die Preistabelle zuständig und sehen uns den Quelltext an.


    Falls wir es noch nicht geschrieben haben, wenn das gekaufte Design php Dateien verwendet, so reicht ein Blick über den Browser und Quelltext nicht um den eigentlichen Inhalt der php Datei zu sehen. Hier bitte die php Datei direkt in einem Editor öffnen. Für die im oberen Screenshot angezeigte Tabelle wäre es nachfolgender Code. Im Anschluss rufen wir im Browser modules.php?name=sections&ids=IDS auf. IDS wird durch die Zahl ersetzt, welche zu der eben angelegten Seite angezeigt wird.


    Bildschirmfoto 2017-04-03 um 23.59.55.pngscreenshot-2017-04-04-00-00-36.pngscreenshot-2017-04-04-00-04-51.png


    Noch nicht perfekt da unten der Abstand fehlt und die Buttons die falsche Schriftfarbe besitzen. Für den Abstand fügen wir in der ersten div der eigenen Seiten die Klasse mrg45B hinzu hier können wir auch gleich die Texte und den Link der Buttons austauschen. Da wir in der .htaccess nur zwei Rootserver Links eingetragen haben müssten wir auch die .htaccess noch erweitern oder wir löschen eine der drei Angebote raus. Die Schriftfarbe können wir in der style.css ändern. Genau, wie auch schon bei den anderen Seiten weiter oben. Rechtsklick "Element untersuchen" dort die Klasse merken und color auf zum Beispiel #ffffff ändern.


    Für Voiceserver gibt es bei dem Kunden nur Mumble und Teamspeak 3 hier können wir direkt auf die Produkte verlinken und bei Gameserver müssten wir im gekauften Design schaun, ob es eine Art Galerie gibt ansonsten erstellen wir uns eine eigene Auflistung als eigene Seite ein Beispiel dazu wäre:


    1. wir erstellenen eine <div class="row">


    2. wir legen für jedes Spiel eine <div class="col-sm-3 col-md-3 col-lg-2 mrg45B"><a href="link zum produkt"><img src="link zum bild"></a></div>


    3. nun noch die div wieder schließen </div>


    Damit wäre eine grobe Auflistung fertig, die der Kunde verfeiner kann. Nun werden wir uns jedoch mit der Detailansicht beschäftigen.




    Dateilansicht


    Wir öffnen die themes/design_2017/templates/shop_details_1.tpl und rufen im Browser die modules.php?name=store&op=details&ids=IDS auf. IDS ist hier die Artikel IDS die im Adminbereich angezeigt wird, wenn wir neben dem Produkt auf das + Icon klicken. Das ganze sieht noch nicht so schön aus. Daher sehen wir uns den Code der shop_details_1.tpl genauer und und werden ihn mit den Bootstrap und Design Elementen so gestalten, dass es zum Rest passt. Anzumerken wäre, dass wir für jede Artikelkategorie am besten eine eigene Detailansicht hinterlegen. So könnten wir bei Spielen je Spiel einen großen Banner hinterlegen und bei Rootserver darauf verzichten. Für solche Banner nimmt man dann am besten ein <img src="themes/design_2017/images/<?php echo $ids; ?>.jpg"> so braucht man nur für die jeweilige ID des Artikels hinterlegen. Man könnte auch If Abfragen oder andere Dinge nutzen.


    screenshot-2017-04-05-01-12-43.pngBildschirmfoto 2017-04-05 um 01.14.51.png


    Wir werden jetzt die Tabellen rauswerfen und durch die row col-xx-yy Kombinationen ersetzen. Auch schon wir im gekauften Design ob wir andere Input Elemente als nur text finden. Zum Beispiel select, radio oder checkbox. Diese können wir dann nach belieben verwenden. Im Beispiel bleiben wir bei select. Da wir bereits bei den anderen Modulen beschrieben, wie Copy and Paste funktioniert sollte das jetzt auch kein großes Problem darstellen. Im Grunde ist es immer das Gleiche.


    Bildschirmfoto 2017-04-05 um 14.27.30.pngscreenshot-2017-04-05-14-39-53.png


    Die Änderungen sehen schon mal besser aus als vorher und der Kunde kann später selbst noch Verbesserungen vornehmen. Was wir aber noch machen ist, dass wir die Banner Grafik direkt unter dem Headerbereich setzen und über die ganze Breite anzeigen. Die Bereiche für den zentrierten Content hatten wir schon in die overall_header.tpl gesetzt. Darüber fügen wir ein If Abfrage ein, ob das Shop Modul und die Detailansicht aktiv ist und ob ID des Artikels stimmt. Wenn ja soll das Bild X eingeblendet werden. Das Bild haben wir aus der shop_details_1.tpl wieder entfernt und zudem noch zwei kleine Anpassungen vorgenommen, damit der Abstand etwas stimmiger wird.


    Bildschirmfoto 2017-04-05 um 14.46.25.pngBildschirmfoto 2017-04-05 um 14.46.25.pngscreenshot-2017-04-05-14-46-39.png


    Der Banner ist noch etwas zu hoch für unseren Geschmack aber das kann der Kunde dann selbst anpassen. Auch, ob auf dem Banner noch Text hinterlegt wird oder dies ein Slider ist und so weiter. Beim Bestellvorgang wiederholt sich jetzt alles. Wie öffnen die andere shop_address.tpl, ... und ersetzen <table ...><tr> durch <div class="row"> und <td> mit <div class="col-xx-yy"> die </td> mit </div> und </tr></table> auch mit </div>. Über die col-xx-1 bis col-xx-12 können wir etwas rumspielen. Nicht vergessen die bereits vordefinierten Styles zu verwenden zum Beispiel mrgXY für margin und padXY für padding Abstände. Probiert ruhig etwas rum und entfernt nicht benötigte Klassen welche das Standard Design von TekBASE nutzte. Wer es gar nicht hinbekommt kann auch gerne im Forum einen Beitrag eröffnen, den Code und Link senden. Für gewerbliche Kunde die das nicht öffentlich machen möchten gibt es den gewerblichen Bereich im Forum.

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

    3 Mal editiert, zuletzt von CFrankenstein ()

  • Eigene Seiten


    Wir hatten es bereits an einem Beispiel gezeigt. Eigene Seiten sind Seiten die sich mit HTML Code befüllen lassen. PHP Code wird nicht ausgeführt, dazu müsste dann eher ein eigenes CMS Modul erstellt werden. Wir wollen für den Kunden noch die Gameserver Auswahl ganz grob erstellen, damit er diese dann selbst anpassen kann. Dazu legen wir, wie auch schon gesagt ein div Element mit der Klasse row und darin viele div Elemente mit der Klasse col-xx-yy an.


    screenshot-2017-04-05-15-44-47.pngscreenshot-2017-04-05-15-45-03.png


    So Prinzip sollte verstanden sein. Nun müsste man die einzelnen Spiele noch auf die Detailseite verlink. Im Handbuch unter Optimieren finden sich nützliche Einstellungen um Pflichtfelder zu entfernen oder die Versandart auszublenden und so weiter. Wenn das Design fertig ist. Versuchen Sie bitte das ganze zu entschlacken. Wird zum der Slider oder die Gallery nur bei einer bestimmten Seite genutzt, wäre es unvorteilhaft all diese Java Dateien bei jedem Aufruf zu laden. Das macht die Startseite nur unnötig groß. Daher in der overall_footer.tpl oder wo sonst die Java Dateien geladen werden ruhig mit If Abfragen arbeiten. Das gleiche gilt für CSS unnötige Sachen die das gekaufte Design mit sich bringt sollte raus. Wird also auf ein Slider verzichtet so könnte man auch die css Datei aus dem Html Code entfernen bzw. die style.css aufräumen.


    Sollte im Tutorial irgendwas fehlen bitte melden.

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

  • die tlp wird schlicht und einfach nur via include geladen. Somit kann auch php drin verwendet werden. Was eigentlich auch schon im Standard Design so gehandhabt wird. Für ähnliche Produkte können die gleichen tpl Dateine genutzt werden. Bei unterschiedlichen Kategorien geht es auch aber will man bei Rootserver lieber einen Slider nutzen um die CPU, RAM etc. anzupassen so wäre hier eine eigene tpl zu empfehlen. Da ansonsten zuviele If Abfragen in der tpl nötig wären und es dadurch unübersichtlich werden könnte.


    Wie im Beispiel gezeigt und das mach ich teilweise bei unserm Design auch so werden Abfragen zu einem Modul / Produkt schon direkt in der overall_header.tpl geladen. Im Beispiel ist es der Banner vom Rootserver, da der Container schon in der overall_header.tpl geöffnet wird und der Bereich somit kleiner wäre. Für die Java Dateien das gleiche wie geschrieben verwendet teklab.de das auch so, dass nicht alle Java Dateien gleich geladen werden sondern bestimmte eben nur da wo sie gebraucht werden und dazu gibt es ein wenig php Code in den tpl Dateien. ;)

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

  • Und bitte bitte schaut auch die Templates die angeboten werden bitte genau an. Manchmal ist es besser eines zu nehmen, was auf dem ersten Blick etwas schlechter aussieht aber mehr Elemente beinhaltet als eines was gut aussieht aber nur mit wenigen vordefinierten Elementen daher kommt. Vieles kann man einfach via css aufhübschen oder eben mit wenigen Handgriffen umgestalten aber bei fehlenden Elementen für z.b. Select, Radio, Checkbox, Gallery, Slider muss man dann schon wieder viel mehr Zeit investieren. Prüft am besten auch mal den Seitenquelltext ob der Aufbau verständlich ist oder der Designer vieles in vieles verpackt ;)


    Hier noch ein Beispiel. Die Select Form der Shop Detail Seite war für einen Sidebar Bereich bestimmt und nur innerhalb einer bestimmte Klasse so nutzenbar, da die Angaben eben nur in der bestimmten Klasse galten zum Beispiel:


    <div class="sidebarx"><select class="custom-select".....>...</select></div>


    in css war es dann so geregelt
    .sidebarx .custom-select {Darstellungsoptionen der Select Box}


    oder es wurde ein graues Kästchen am Ende der Select Box angefügt über
    .sidebarx::after


    Daher müsste man dann selbst noch an die css Hand anlegen und dies umändern in dem Fall in nur
    .custom-select
    .custom-select::after


    Schickt am besten ein Link von eurem Design so dass man live drüber schaun kann. Falls es Probleme gibt. Dafür steht ja nun auch die kostenlose Zweitlizenz von TekBASE zur Verfügung die jeder unter der Subdomain test oder design anlegen kann.

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

  • Servus, PHP ist mir leider noch nicht ganz so vertraut, aber es gibt ja genug fertige designs im Internet darunter auch viele kostenlose. Da ja immer wieder gesagt wird, man soll auf die Funktionen und Unterseiten achten stellt sich mir die Frage ob ein HTML Design oder ein PHP design besser geeignet ist und welche bootstrap / CSS Version mit TB 7 respektive im Anschluss mit TB 8 nutzbar ist?

  • Hallo,


    an sich ist es egal, ob das Design direkt mit HTML geschrieben wird oder über echo ausgegeben wird. In den Templates von Tekbase ist es auch mal so oder so. Auf der einen Seite ist es Geschmackssache. Aber auch ob jetzt HTML oder PHP in einer Datei eine größere Rolle spielen entscheidet oftmals das Vorgehen.
    Bootstrap und CSS kannst du jeweils in der aktuellen Version verwenden.

  • Das CMS Design ist in T7 und auch T8 nutzbar da die Variablen im Grunde gleich bleiben. Bootstrap hat den Vorteil das schon fast alles mit dabei aber eben auch das Problem, dass es recht überladen ist. Hier hilft es nach erfolgreichem Designen die CSS Dateien zu komprimieren also keine leerzeilen, Zeilenumbrüche etc.
    wer jetzt viel Zeit hat, könnte auch die nicht benötigten Elemente aus der Bootstrap css und js entfernen. Wichtiger wäre es jedoch alle CSS Dateien in einer zu bündeln und dann nur diese zu verwenden. Da wir eine kostenlose Zweitlizenz bereitstellen, ist es möglich z.b. unter test.domain die einzelnen css Dateien der Übersicht halber zu nutzen und unter der Webseite dann nur eine komprimierte. Das spart Ladezeit und unnötig viele Requests.

    Bitte die Forumsuche und das Handbuch verwenden. Wenn die Suche erfolglos war, bitte ein Thema erstellen und das Problem ausführlich beschreiben. Dieser Ablauf spart Zeit und unnötige Fragen zu immer gleichen Problemen. Sie können aber auch im Kundenbereich ein Support-Ticket erstellen.


    Gefällt Ihnen TekLab? facebook-1.pngtwitter-1.pnglinkedin-1.png

  • kann ich für den store also die PHP seiten im Bestellvorgang (Produkt in Warenkorb legen und löschen) auch ein template anlegen? Wenn ja hättest du da ein Beispiel oder so, damit ich dort auch meine Rahmen und so ziehen kann, denn es soll ja einheitlich aussehen auch wenn es nur eine zwischen Seite ist ;)