Vision installieren

Hier ist eine Anleitung für die Installation des CMS VISION

1. Neues VISION Projekt erstellen

• Auf der Seite https://projekteverwaltung.de anmelden und unter dem Menüpunkt „Neues VISION Projekt erstellen“ den Projektnamen angeben (aktueller Prototyp wird automatisch zu “_design” umbenannt).
• Das VISION Projekt wird automatisch erstellt und ist unter „projektname.projekteverwaltung.de“ erreichbar.
• Wenn die Seite nicht geladen wird, in der .htaccess # vor RewriteRule (.*) https://%{HTTP_HOST}/$1 [R=301,L] angeben

2. VISION anpassen und übertragen

Dateien vom Prototyp richtig übertragen

1. - Nur relevante CSS- und JS-Dateien in Vision Projekt kopieren

• .css →  sortiert nach alter Prototyp Reihenfolge → template/css/_system
• .js → sortiert nach alter Prototyp Reihenfolge → template/javascript/_system

Nach diesem Schema vorgehen:

• Auf Prototyp-Seite Strg + U drücken, um die richtige Reihenfolge der Dateien zu sehen.
• Dann Strg + F drücken und nach css bzw. js suchen
• Die Designseite kurz durchschauen, um zu sehen, ob etwas nicht benötigt wird. (i. d. R. können alle JS-Dateien, die etwas mit „contact“ zu tun haben oder welche von Haus aus im Vision sind gelöscht werden.) z. B.: popper.js, validation.js, email-decode.js  müssen nicht übernommen werden
• Von allen nicht übernommenen JS-Dateien in der script- oder main.js die Initialisierungen entfernen (Die Zeilen werden i. d. R. in der Konsole als Fehler ausgegeben)

Wichtig: 

• Beim Kopieren der Daten schauen ob die vorhandenen jQuery und Bootstrap Dateien der gleichen Version entsprechen wie aus dem Prototyp.

2. - Google Fonts und Icons lokal einbinden

Nach diesem Schema vorgehen:

• Auf Google Webfonts Helper gehen und Font suchen
• Schriftschnitte für CSS auswählen, unten den richtigen Pfad im Projekteordner angeben und dann alle Pfade in Z:\projekt_x\template\css\_fonts\fontName.css kopieren
• .zip-Font-Datei Downloaden und Fonts in richten Ordner Z:\ projekt_x\template\fonts\fontNameOrdner einfügen

Wichtig:

• Icon-Dateien werden wie bei .css-Dateien von Prototyp kopiert und in die vorher erstellte .css-Datei bzw. den erstellten Ordner eingefügt.
• Für CSS: Z:\projekt_x\template\css\_fonts\fontName.css
• Für Font-Dateien: Z:\ projekt_x\template\fonts\fontNameOrdner

3. - Sections von Prototyp übernehmen

Nach diesem Schema vorgehen:

• Die Reihenfolge der Sections ist i. d. R. in der index.php oder in der meta.php zu finden
• Die Sections sind im includes Ordner
• Den Inhalt kopieren und z.B. in Z:\projekt_x\template\plugins\01_slider.php einfügen. Die Sections bitte nummerieren und mit und logischem Namen versehen!
• Das Menü gehört in die menu.php (s.u.)

4. - Bilder von Prototyp übernehmen

Nach diesem Schema vorgehen:

• Auf Prototyp-Seite Strg + U drücken und mit Strg + F nach img und background-image suchen (Nur die Bilder übertragen, die auch im Template verwendet werden!)
• Die neuen Bildpfade in den einzelnen Sections aktualisieren (/template/images/prototyp/) *
• Bei Background-Images die CSS-Dateien durchsuchen und die Pfaden anpassen in background-image: url("../../images/prototyp/ bild.jpg");
• Das Logo mit der Vision Konfiguration verbinden und nur unter dem Pfad template/images/logos/logo.png/jpg abfragen

*Wichtig: 

• Neue Bilder kommen in Z:\projekt_x\template\images\images\optionalerNeuerOrder
• Pfad Beispiel: background-image: url("../../images/images/slider/slider.jpg");

→ < v5.2.8

5. - Menü übertragen

Nach diesem Schema vorgehen:

• Das Menü vom Prototypen in die template/plugins/menu.php kopieren
• Hierfür den gesamten Inhalt in der ul + diese selbst entfernen und durch <?php menubuild(0, 0); ?> ersetzen
• Die Menüstruktur beachten und in template/custom_php/functions.php → Strg + F → „Hauptnavigation“ integrieren
• Die entsprechenden ids bzw. classes hinzufügen
• Das Menü des Prototypen in der Seitenstruktur im VISION nachbauen

← < v5.2.8

→ > v5.3.0

5. - Menü übertragen

Nach diesem Schema vorgehen:

• Das Menü vom Prototypen in die template/plugins/menu.php kopieren
• Hier das Menü aus der Design kopieren und alles bis auf den ul, li und a um die <?php buildMenu(1); ?> einfügen.
• Die Menüstruktur beachten und in Z:\projekt_x\template\classes\system\core\menu\MarkupConfig.php integrieren.
• Die entsprechenden ids bzw. classes hinzufügen
• Das Menü des Prototypen in der Seitenstruktur im VISION nachbauen

Mehr zum Menü erfährst du hier →

← < v5.3.0

Wichtige Infos:

• Menü auf Website anschauen, ob alles funktioniert (auch Responsive)!
• Falls nicht, fehlerhaftes korrigieren oder im Notfall neues (Bootstrap) Menü hinzufügen und gegen fehlerhaftes austauschen und den Style dementsprechend so gut es geht anpassen

6. - Vision Seite mit Design vergleichen

• evtl. Konsolenfehler, fehlende Fonts, fehlende Bilder korrigieren

3. Vision Module nutzen

Die folgenden Hauptmodule beachten und umsetzen

1. - Hauptkonfiguration eintragen

• In Vision, (wenn gegeben) unter Einstellungen\Konfiguration\Allgemein die Firmendaten eintragen

2. - Favicon aus Logo erstellen

Nach diesem Schema vorgehen:

• Hierbei in Photoshop eine neue Datei 250px X 250px erstellen (Optional: Weiße Ellipse 250px X 250px für rundes Favicon einfügen)
• Das Logo einfügen. Hier würde ich entweder nur die Bildmarke oder die Ligatur ausschneiden und auf ca. 245px vergrößern.
• Als .png exportieren
• Dieses zusätzlich als .ico abspeichern (.ico-Konvertierer)
• Das .png und .ico im Vision unter Einstellungen\Konfiguration\Favicon hochladen

3. - Config-Links hinzufügen

• Config-Links hinzufügen und in Topbar, Footer etc. durch E-Mail, Telefonnummer und andere Firmendaten austauschen

Nach diesem Schema vorgehen:

• Im Vision CKEditor Config-Links (im wiki unter Firmendaten) hinzufügen: E-Mail durch z. B. info@agentur-77.de austauschen (vorher in Konfiguration eintragen)
• In menu.php für (z. B. die Topbar) Config-Link: <?php echo gibconfig("email") ?> statt der E-Mail eingetragen
• Für Interne Links Beispiel: <a class="btn btn-primary" href="<?php echo breadcrumb(5); ?>"> Kontakt </a> (Interne Links werden über die Dokumenten-ID verwaltet. siehe .gif)

4. - Social Media verwenden

• Sofern soziale Netzwerke verlinkt werden, diese in das Modul (Konfiguration -> Soziale Netzwerke) einfügen und mit dem plugin (template/plugins/socialmedia.php).. ausgeben lassen.