Apollon 11 Template Anleitung

Sie haben das Template "Apollon" für Siquando Web oder Shop 11 installiert. Sollten sich trotz dieser Anleitungen weitere Fragen oder Anpassungswünsche ergeben, zögern Sie nicht uns zu kontaktieren.

hilfreiche Anleitungen und Hinweise für „Apollon” finden Sie auch auf den Seiten:

Datei-Erweiterung auf php einstellen

Das Template "Apollon" verwendet für Funktionen wie PHP und der Erstellung der CSS-Datei die serverseitige Scriptsprache PHP, daher ist dieser Schritt zwingend erforderlich.

Überprüfen Sie bitte, ob unter Datei Website- und FTP-Eigenschaften HTML-Optionen bei Erweiterung für HTML-Seiten php angegeben wurde, falls nicht tragen Sie dort bitte php ein.

Konfiguration der Farben

hier wurde lesscss.js ausführlich dokumentiert

Um das Design so flexibel wie möglich gestalten und Anpassungen mit relativ wenig Quelltext erzeugen zu können wird in diesem Design LESSCSS verwendet. Für Endanwender ergeben sich dadurch wenige zusätzliche Schritte, die nicht notwendig aber ratsam sind. Zur Erstellung der Datei style.css wird dafür lessphp von leaf corcoran verwendet.

Ein großer Vorteil ist auch dass die erstellte Datei minimiert wird, so reduziert sich die Anzahl und Größe der zu veröffentlichen Dateien. Dadurch wird der Seitenaufbau Ihrer Webseite beschleunigt, worüber sich nicht nur Ihre Besucher sondern auch Google freuen wird.

Während Sie Ihre Seite umstellen, also Farben und/oder Positionierungen noch geändert werden, oder Sie mit deren Werten spielen, empfehlen wir Ihnen die LESS-Einstellung "Cache per lessc.php generieren (ohne Content-Output)" zu wählen. Nur bei Änderungen wird dabei die Datei style.css.cache neugeneriert.

Die nächsten Schritte sollten Sie durchführen, wenn Sie mit Ihren globalen Einstellungen für Farbe und Schrift zufrieden sind.

Schritt 1: Konfiguration der Farben und Schrift

Nachdem Sie die Farben im Dialog Design auswählen Farbpaletten gewählt haben, können Sie zusätzlich die Schrift- und Farbeinstellungen unter Datei Website- und FTP-Eigenschaften Erweitert im Bereich Farben und Schriften konfigurieren.

Schritt 2: die Datei style.css generieren lassen und speichern

Nachdem Sie die Einstellungen für das Template vorgenommen haben klicken Sie nun erneut auf Datei Website- und FTP-Eigenschaften Erweitert und wählen im Bereich Design Less-Version auswählen und wählen dort mit lessc.php minimierte Datei erstellen und als Download anbieten.

Erstellen Sie nun eine Vorschau der Seite und speichern Sie die Datei style.css. (In welchem Ordner diese Datei gespeichert werden muss ist im Dialog beschrieben. Beachten Sie bitte auch die weiteren Hinweise)

Schritt 3: erstellte Stylesheet-Datei verwenden

Unter Datei Website- und FTP-Eigenschaften Erweitert klicken Sie wieder in Kategorie Design auf Less-Version auswählen und wählen dort "in Web 9/designs/Apollon Web (oder Shop) gespeicherte style.css verwenden".

Fertig!!! Ihre Website kann nun erstellt und veröffentlicht werden.

Beachten Sie, die Farbe #123456 sorgt bei einigen Farbeinstellungen (wie zum Beispiel bei einigen Farben für das Menü) dafür, dass der Standardwert der Variante verwendet wird.

Welche Größe sollten die Designbilder haben?

In Apollon können die verschiedenen Eyecatcher-Typen auf gleicher Art und Weise wie bei dem Design "Bootstrap 9" erstellt und angewendet werden.

Was ist die ideale Breite der Eyecatcherbilder? Eine optimale Breite oder Höhe ist nicht zu bestimmen, da die Bilder auf 100% Breite des Browserfensters skaliert werden. Dementsprechend wächst oder schrumpft auch die Höhe der hinzugefügten Bilder. Das Layout selber schreibt keine Höhe oder Breite vor.

Angenommen die Bilder haben eine Breite von 1920px und sind 400px hoch. Wenn das Browserfenster des Betrachters nun eine Breite von 960px besitzt (1920 geteilt durch 2) so wird das Bild mit einer Höhe von 200px (400 geteilt durch 2) dargestellt.

Wichtig zu wissen ist noch, dass die Slidershow das Seitenverhältniss des ersten Bildes verwendet. Wäre das zweite Bild höher, wird es am unteren Rand entsprechend "abgeschnitten".

PNG-Bild im Menü als Startseitenlink

Der Import dieses PNG-Bildes findet als Link in den globalen, erweiterten Eigenschaften Ihres Projektes im Bereich Design unter "PNG-Icon für den Home-Bereich (Download als Link auswählen) statt. Dort verlinken Sie bitte ein PNG-Bild, welches Sie als Download importiert haben.

Dieser Inhalt kann leider nicht angezeigt werden, da Sie der Speicherung der für die Darstellung notwendigen Cookies widersprochen haben. Besuchen Sie die Seite Datenschutzerklärung, um Ihre Cookie-Präferenzen anzupassen.

Diesen Cookie zulassen

„Mega Menü“ - Navigation

Einen Großteil der Einstellungen für das Menü finden Sie in den globalen, erweiterten Einstellungen unter Datei Website- und FTP-Eigenschaften Erweitert Bereich "Design (Menü)" und "Design (Menüfarben)" .

Die meisten Einstellungen in diesem Bereich sollten selbsterklärend sein, dazu zählt höchstwahrscheinlich nicht "Mega-Menü-Dropdown-Spalter". Die Eigenschaft gibt an wann eine weitere Spalte hinzugefügt werden soll (In der nachfolgenden Beschreibung gehen wir von einem Wert von 5 aus). Im Mega Menü werden mind. 2 Spalten angezeigt. Die maximale Anzahl der Spalten beträgt 4 Spalten. Haben Sie ein Bild in den Hauptseiten-Eigenschaften der Seite für das Mega Menü angegeben, werden maximal 3 Spalten angezeigt. Ist die Anzahl der Hauptseiten mindestens 3x so groß wie der Mega-Menü-Dropdown-Spalter-Wert werden 3 Spalten im Menü angezeigt, ist der mindestens 4x so hoch, werden bis zu 4 Spalten angezeigt.

Bitte beachten Sie, dass die erweiterte Hauptseiteneigenschaft "Anzeige als Mega Menü" aktiviert sein muss, damit das Mega Menü angezeigt wird. In dem Bereich "Design (Menü)" finden Sie weitere Einstellungsmöglichkeiten für das Menü. So können Sie mit "Bild für das Mega Menü" (1) ein Bild angeben, dieses wird auf der rechten Seite des Menüs angezeigt.

Zusätzlich dazu können Sie einen Text angeben: "Text (HTML) für diese Seite im Mega-Menü" (2), dieser wird oberhalb des Bildes dargestellt.

Außerdem können Sie einen alternativen "Text für die Verlinkung" (3) angeben.

OnePager - Navigation

Auch für das OnePager - Menü finden Sie unter unter Datei [fa=long-arrow-right][/fa] Website- und FTP-Eigenschaften [fa=long-arrow-right][/fa] Erweitert [fa=long-arrow-right][/fa] Bereich "Design (Menü)" und "Design (Menüfarben)" einige Einstellungen. Sp können Sie dort ebenso die Farben konfigurieren

[color=#21b384][fa=flag fa-6x pull-left][/fa][/color]Font Awesome ist eine der beliebtesten kostenlosen Icon-Fonts und das von Ihnen erworbene Template beinhaltet dieses Iconset.

Mit Font Awesome erhalten Sie über 670 Icons, die Sie in Ihre Webseite einbauen und per BB-Code einfach anpassen können. Das Set ist unendlich und verlustfrei skalierbar und benötigt im Vergleich zu bildbasierten Lösungen deutlich weniger Kilobyte, was den Ladezeiten Ihrer Website zu gute kommt.

Font-Awesome 4.7.0 Icons in Listen

Das Template spendiert dem Absatztyp "Aufzählung zusätzlich 2 erweiterte Eigenschaften.
[h3]1. Auswahl des Listen-Icons[/h3]Diese Eigenschaft hat gegenüber der Eigenschaft "Auswahl des Listenstils Vorrang. Hier kann jedes Icon der Version 4.7.0 verwendet werden. Auf der Seite fortawesome.github.io/Font-Awesome/icons finden Sie ein Übersicht. Möchten Sie zum Beispiel das Symbol [icon=gift][/icon] fa-gift verwenden, so geben Sie bei der Eigenschaft [code]gift[/code] ein. Beachten Sie dass das [code]fa-[/code] wegfällt.
[h3]2. Auswahl des Listenstils[/h3]Ist kein spezielles Icon angegeben wird diese Eigenschaft genutzt. Sie haben die Wahl zwischen Aufzählung mit Häkchen [icon=check][/icon] (fa-check), Aufzählung mit einem Stopzeichen [icon=minus-square][/icon] (fa-minus-square), normale ungeordnete Liste oder echte Aufzählung, welche eine nummerierte Liste anzeigt.

Font-Icons bei Download-Dateien und Links

Erstellen Sie einen Link werden automatisch bestimmte icons verwendet. Sicherlich sind Ihnen die verschiedenen Links auf web2date-designs.de aufgefallen.
Ein interner Seitenlink verwendet das Symbol [icon=share-square][/icon] [code]fa-share-square[/code], ein externer Link das Icon [icon=link][/icon] [code]fa-link[/code], eine Bildverlinkung nutzt [icon=picture-o][/icon] [code]fa-picture-o[/code] und standardmäßig verwendet ein Download das Icon [icon=download][/icon] [code]fa-download[/code].

Zusätzlich kann aber jedem Download ein eigenes Icon zugewiesen werden. Wir haben hier das Touch-Icon für Smartphones und Tablets mit dem Font-Icon [code]fa-file-text-o[/code] verlinkt.

BB-Code für die Icons

Auf unsere Seiten sehen Sie die Icons auch in Menüs oder im Footertext, dafür verwenden wir BB-Code.

Ein tolles Anwendungsbespiel wäre eine Verlinkung eines Facebook-Icons in zweifacher Größe.

Zur Anzeige des Facebook-Icons [icon=facebook-square fa-2x][/icon] wurde innerhalb des BB-Codes [code]facebook-square fa-2x[/code] eingetragen.
Für [icon=youtube fa-4x][/icon] wiederrum wurde [code]youtube fa-4x[/code] angegeben.

© siquando-designs.de by KARO Webdesign & Entwicklung

Direkt-Navigation öffnen oder schließen

Wir (KARO Webdesign & Entwicklung) verwenden Cookies um unsere Website zu optimieren und Ihnen das bestmögliche Online-Erlebnis zu bieten. Mit dem Klick auf „Alle erlauben“ erklären Sie sich damit einverstanden. Weiterführende Informationen und die Möglichkeit, einzelne Cookies zuzulassen oder sie zu deaktivieren, erhalten Sie in unserer Datenschutzerklärung. | Impressum