Easy-WI Kleine Erklärung zu CMS und Template [+Download]

  • Easy-Wi lässt sich wie HTML bearbeiten ... hier zeige ich euch wie ihr die richtigen dateien im Jungle des Webinterfaces Findet!
    Am Ende kann man sich das Bearbeitete Runterladen! Und (bald) ein fertiges CMS!

    Hallo,


    Aufgrund der Hohen Nutzung zahlen von Easy-WI habe ich meinen alten Beitrag hier nochmal überarbeitet und möchte es nun etwas Benutzer freundlicher darstellen.




    Was brauche ich für Kenntnisse um mein Easy-WI zu bearbeiten?

    • HTML Kenntnisse
    • PHP Kenntnisse (Beginner)
    • CSS Kenntnisse (Beginner)



    Sollte Etwas unklar sein, ich bin immer offen für Fragen!




    Inhalt:

    • Verzeichnisse und Co.
    • Template und PHP
    • Bearbeitung einer CMS & Standalone Datei
    • Fertige CMS
    • Download (cooming Soon)







    Verzeichnisse und Co.


    Nun das Easy-WI ist ein sehr simpel Aufgebautes CMS, ich gehe hier nun auf ein mit Install Skript Installiertes WI ein (Sollten die Pfade nicht stimmen aufgrund von manueller Installation so muss man diese nur anpassen).


    Nun Wir finden das Easy-WI unter dem Pfad /home/easywi
    In dem Ordner finden wir viele Verschiedene Dateien die zu Anfang sehr verwirrend aussehen aber hat man es einmal verstanden ergibt alles sinn ;) .



    Wir wollen nun das CMS bzw. Das Aussehen bearbeiten und keine Funktionen, dafür wechseln wir in das Verzeichnis „template“ dort finden wir eine Datei namens „default“ diese Kopieren wir uns auf den Desktop.
    [IMG:http://srv01.novu-consult.com/tutorial/datei1.gif]




    Sobald dies getan ist (es kann schon ein wenig dauern) können wir auch mit der Bearbeitung beginnen.





    Template und Co.




    Der Gesamte Inhalt des Default Ordners definiert das Aussehen deines Easy-Wi´s.
    Jedoch sei gesagt falsche Angaben / Bearbeitungen können die Nutzung stark einschränken.
    Damit man alles wieder auf Standard zurück spulen kann, rate ich denn Ordner Default umzubenennen!
    Ich nenne meinen „Tutorial“ (der Name ist freiwählbar).


    Der Inhalt des Template Ordners ist wie Folgt aufgebaut:


    / - Ordner und ein Paar Globale Config Dateien (pgp & tpl)


    /admin – Alle Dateien die Administratoren sowie Reseller & Supporter Sehen Können (Admin Dashboard)


    /ajax – Eingabe & Routinen (Kommunikation)


    /cms – Dateien für das Modul „CMS“ Die Oberfläche „vor“ dem Dashboard


    /standalone – Autarke Dateien (Sie haben eigenen Header / Inhalt / Footer)


    /user – Das was der Nutzer am Ende sieht (User Dashboard)




    Als Erklärung gehe ich auf die CMS und KURZ auf die User Dateien ein!


    Die User Dateien:


    Dort finden wir eine Datei namens „userpanel_header.tpl“ in dieser Datei findet man die Definition des Headers also CSS / Seiten Titel etc. pp. Wenn wir uns diese nun genauer anschauen fällt uns auf das dort auch viel PHP verwendet wird, das ist natürlich klar wenn man sich mal denn Header ansieht und wie er auf Angaben reagiert (Support ticket anzeige) mit ein wenig Arbeit ist es ein leichtes diese zu bearbeiten bzw. zu verschieben.


    Aber darauf möchte ich hier nun nicht weiter eingehen das dies ein weit tiefgehender es Thema ist als ich hier erläutern möchte.




    Das CMS:


    Das CMS ist ein Sehr wichtiger Teil eines Seriösen Auftretens, es bietet nicht nur einen Größeren Funktions Umfang und Service Umfang an, nein es sieht auch besser aus!




    ACHTUNG: Wenn du Das CMS nicht nutzen willst überspringe die nächsten Schritte bis zum Teil „Standalone“!



    Um das CMS zu bearbeiten wechseln wir nun in diesen Ordner.
    und finden dort erstmal ernüchtern wenig (im Vergleich), das was wir dort sehen ist der Standard Inhalt der Mitgelieferten CMS (die nicht super schön aussieht).
     
    "/euertemplateordner/cms"


    Um die Seiten Anzahl zu erweitern wechseln wir nun in den Browser und klicken auf CMS, Sollte es nicht angezeigt werden muss folgendes getan werden!
    [IMG:http://srv01.novu-consult.com/tutorial/datei2.gif]
    Nun dort haben wir einen Tab namens „Seiten“ Dort können wir neue Seiten einfügen.
    [IMG:http://srv01.novu-consult.com/tutorial/datei3.gif]



    [IMG:http://srv01.novu-consult.com/tutorial/2.PNG]
    Natürlich kann man mittels Code View auf HTML und CSS verwenden!




    TIPP: Klickt einmal in der Übersicht auf die Seite und merkt euch die URL!



    Da Bei mir persönlich die neue Seite nicht eingetragen wurde und ich gerne einen anderen Stil hätte Bearbeite ich auch die Vorhandenen Dateien!


    Ich beginne mit dem „page_header.tpl“ dort können wir neues CSS und andere Skripte (Java) laden.
    Und vor allem die Navigation Bearbeiten! (Zeile 157 -186)


    [IMG:http://srv01.novu-consult.com/tutorial/3.PNG]



    Wer sich nun erschlagen fühlt, denn will ich beruhigen! Es sieht nur sehr schwer aus, Ansicht ist es ganz leicht.



    Wir nehmen mal einen Eintrag auseinander:


    HTML
    1. <li <?php if($s=='search') echo 'class="active"';?>><a href="<?php echo $page_data->pages['search']['link'];?>"><i class="fa fa-search fa-fw"></i> <?php echo $page_data->pages['search']['linkname'];?></a></li>


    <li – Beginnt denn Eintrag


     <?php – Startet PHP (bzw öffnet)


     if($s=='search') – Checkt ob (if) $s == (== bedeutest IST )gleich "suche" also ist S = Suche aktiv? Dann …. Gib alles mit „echo“ wieder.



    Sprich alles nach ECHO ist der tatsächliche HTML Eintrag! Zu erkennen ist es typisch am class=““
    dort könnte man nun neue classes oder ähnliches einbauen oder man baut sich eine komplett „Manuelle“ Navigation zusammen!


    Dafür benötigen wir dann aber CSS, Das finden wir auf unserem Server unter „/easywi/css“ dort können wir entweder eine Bestehende Datei Bearbeiten / einen Neuen Ordner Erstellen (für das CMS) oder Simpel einfach eine neue Datei einfügen und im Header Vermerken.


    Ich entscheide mich für Letzteres und erstelle eine Datei namens „Tutorial.css“ und füge folgendes ein

    CSS
    1. .navstut li a{ width:120px; height:100px; display:inline-block; position:relative; transition:all 0.4s; color:#fff;}.navlabel{ position:absolute; top:50%; left:50%; transform:translate(-50%,-50%); text-align:center;}.navstut li a:hover{transform: scale(1.1, 1.1);}.tutblock{ position:absolute; width:120px; height:100px; display:inline-block; transform: skew(-30deg, 0deg); background-color:#333;}


    Und zudem muss noch in die Header Datei dies eingefügt:


    <link type="text/css" href="/css/tutorial.css">


    Und bearbeite die Nav wie folgt:


    HTML
    1. <div class="container"> <div class="row"> <div class="col-xs-12"> <ul class="list-inline navstut"> <li><?php if($s=='search') ;?>><a href="<?php echo $page_data->pages['search']['link'];?>"><span class="tutblock"></span><span class="navlabel"><?php echo $page_data->pages['search']['linkname'];?></span></a></li> <li><?php if($s=='news') ;?>><a href="<?php echo $page_data->pages['news']['link'];?>"><span class="tutblock"></span><span class="navlabel"> <?php echo $page_data->pages['news']['linkname'];?></span></a></li> <li><?php if($s=='about') ;?>><a href="<?php echo $page_data->pages['about']['link'];?>"><span class="tutblock"></span><span class="navlabel"><?php echo $page_data->pages['about']['linkname'];?></span></a></li> <li><?php if($s=='gallery') ;?>><a href="<?php echo $page_data->pages['gallery']['link'];?>"><span class="tutblock"></span><span class="navlabel"><?php echo $page_data->pages['gallery']['linkname'];?></span></a></li> <li><?php if($s=='contact') ;?>><a href="<?php echo $page_data->pages['contact']['link'];?>"><span class="tutblock"></span><span class="navlabel"><?php echo $page_data->pages['contact']['linkname'];?></span></a></li> <li><?php if($s=='downloads');?>><a href="<?php echo $page_data->pages['downloads']['link'];?>"><span class="tutblock"></span><span class="navlabel"> <?php echo $page_data->pages['downloads']['linkname'];?></span></a></li> <li><a href="/index.php?site=page&id=2"><span class="tutblock"></span><span class="navlabel">Unsere Test Seite</span></a></li> </ul> </div> </div></div>


    Wie man sieht habe ich die Test Seite Manuell eingebaut.


    Um nun zu testen wie dies aussieht begeben wir uns in das WI und klicken unter Einstellungen --> Einstellungen --> auf Template (Sofern dies in den Ordner Geladen wurde können wir dort Tutorial oder anderes auswählen) und schon kann man begutachten was man bearbeitet hat!


    [IMG:http://srv01.novu-consult.com/tutorial/datei4.gif]




    Ich Habe mal fix die obere (Nervige) Schwarze leiste entfernt (Als Beispiel). So sähe das ganze dann aus!



    [IMG:http://srv01.novu-consult.com/tutorial/datei5.gif]

    Das Sieht schon besser aus!


    Nach und nach kann man sich also durch das CMS Graben und alles von Links nach rechts Krämpeln.
    wer Extra Seiten einfügt kann ich es nur empfehlen diese Manuell Einzufügen (die Funktion das es Automatisch passiert hat bei mir noch nie funktioniert:D)


    Viel Spaß Beim Editieren damit!
    (Oder man wartet bis ich mein Full CMS fertig habe :D)




    Standalone:


    Nun kommen wir zu etwas anderem, die LOGIN Seite.
    Grau / monoton und einfach nur ermüdend anzusehen ist die bekannte Easywi Login Seite!




    Wir Pimpen diese jetzt mal:


    Wir Öffnen die Datei login.tpl (/standalone/login.tpl)
    Dort finden wir eine Komplett aufgebaute Seite (Erklärt den Namen Standalone ;) )
    Nun bis auf die dortigen PHP Attribute die für den Login zuständig sind kann man alles bearbeiten.



    Ich hab mal den Login Bearbeitet:




    Zu beachten ist das Bild Link´s natürlich Bearbeitet werden müssen (sofern ihr ein anderes Bild haben wollt)

    Zudem sei gesagt! Da Dies als Download unten zuverfügung steht, gehe ich nicht genauer auf die bearbeitung ein!
    Da Dies zu den HTML Basics Gehört die man haben sollte zur bearbeitung (ansonsten kann man es auch einfach downloaden und unter oben genannten schritten installieren)




    Vorher / Nachher:




    [IMG:http://srv01.novu-consult.com/tutorial/vor.PNG][IMG:http://srv01.novu-consult.com/tutorial/nach.PNG]












    Fertige CMS:


    Die Fertige CMS / Login Seite kann ist möglichst Universal zu Gestalten… da sollte sich mal die URL ändern oder das Verzeichnis sich alles Verstellen kann.
     
     


    Ich Hoffe ich Konnte etwas Licht ins „dunkel“ bringen, und wünsche mir das man bald besser aussehende Login Seiten sieht.
    Denn das ist der erste Eindruck eines Jeden Sponsorings.





    Ich Werde Diesen Beitrag je nach Zeit & Lust Weiterführen Bis Dahin :





    Zitat

    Fertiges CMS Download: --- Noch nicht Fertig ---

    Zitat

    Tutorial Download: Download

Kommentare 5

  • Deine Seite ist down

    • Meinst du wegen den Fehlenden Gifs?

      Das liegt am SU Changelog! lies ihn ;)

    • Und ja der download ist irgendwie kaputt ... hmm

    • Meine allgemein, alle Links von dir sind tot, auch die CSS Dateien

  • #Updated#