Designanpassungen am ebiz-trader Marktplatz
Das Design in ebiz-trader anzupassen ist relativ einfach.
Selbstverständlich erfordert es ein wenig Wissen über HTML und CSS. Wir werden uns aber bemühen, Ihnen die grundlegenden Dinge so einfach wie möglich zu erklären.
Für die profis unter Ihnen möchten wir folgendes anmerken.
ebiz-trader verwendet als CSS3 Framework das von twitter entwickelte bootstrap Framework. Sie können alle Elemente dieses Framework bedenkenlos verwenden.
Unter https://getbootstrap.com/ finden Sie eine Vielzahl von vorgefertigten CSS Klassen und Styles.
Bitte nehmen Sie keine Änderungen an der Bootstrap-CSS Datei selbst vor. Besser ist es, wenn Sie die Eigenschaften einer Klasse in einer extra dafür vorgesehenen Datei überschreiben. Für solche Fälle haben wir Ihnen unter /design/default/default/resources/css/ eine leere CSS-Datei mit dem Namen user.css zur Verfügung gestellt. Überschreiben Sie hier alle Definitionen, die wir in unsere Software verwendet haben oder fügen Sie eigene hinzu.
Caching
Ebiz-trader verfügt über ein ausgeklügeltes Caching-System. Wir empfehlen Ihnen während der Designanpassungen das Caching zu deaktivieren.
Diese Einstellung können Sie hier vornehmen:
Wählen Sie in der Navigationsleiste folgenden Punkt aus Administration/Einstellungen/Erweiterte Systemeinstellungen.
Wählen Sie den Punkt CACHE aus. Aktivieren Sie den Punk „TEMPLATE_AUTO_REFRESH" indem Sie einen Haken in das Feld setzen. Klicken Sie dann auf speichern.
Nachdem Sie die Designänderungen vorgenommen haben, sollten Sie diese Einstellung wieder löschen!
Ändern des Marktplatz-Logos
Obwohl unser Logo recht schick aussieht, wollen Sie bestimmt Ihr eigenes Logo verwenden.
In unserem Beispiel werden wir das ebiz-trader-Logo, das sich links oben befindet, gegen ein anderes austauschen. Hierfür verwenden wir folgende Grafik.
Der Name des Logos sollte logo.png sein.
- Verbinden Sie sich mit einem FTP-Programm mit Ihrem Marktplatz
Navigieren Sie in das Verzeichnis
ebiz-trader/design/user/default/ressources
. - Legen Sie hier ein Verzeichnis mit dem Namen „images" an.
Achten Sie auf die Kleinschreibung. - Kopieren Sie nun die Datei logo.png in dieses soeben angelegt Verzeichnis
- Aktualisiere Sie jetzt Ihren Marktplatz (im Chrom-Browser mit STRG-r). Stellen Sie dabei sicher, dass Sie den Browsercache dadurch löschen.
Sie sollten jetzt folgendes Bild sehen.
Sollten Sie nach wie vor unsere Logo sehen, so können Sie das Caching auch erzwingen. Klicken Sie hierfür in der oberen Navigationsleiste auf den Button „CACHE"
Änderungen an den Templates vornehmen
Selbstverständlich können Sie jeden Bauchstein des Marktplatzes ändern. Wir haben Ihnen hierfür einige hilfreiche Einstellungsmöglichkeiten zur Verfügung gestellt.
Wählen Sie in der Navigationsleiste folgenden Punkt aus Administration/Einstellungen/Erweiterte Systemeinstellungen.
Wählen Sie dann den Punkt SITE aus. Aktivieren Sie den Punk „TEMPLATE_COMMENTS" sowie „TEMPLATE_DEBUG" indem Sie einen Haken in das Feld setzen. Klicken Sie dann auf speichern.
Schauen Sie sich jetzt Ihren Marktplatz einmal an.
Sie können jetzt leicht erkennen, welche Templates für welche Ausgaben verwendet werden.
Das Templatesystem
Für Designänderungen ist nur ein Verzeichnis wirklich wichtig. Im Ordner „design" befinden sich alle Dateien die für das Erscheinungsbild Ihres Martplatzes wichtig sind.
Schauen wir uns die Inhalte von /design/default/default/ einmal genauer an.
Unter Resourcen befinden sich alle CSS und Bilddateien.
In Module können Sie die Templates für die Module sehen
In skin werden alle Skindateien aufgeführt die für den Rahmen Ihres Portals wichtig sind.
Unter tpl finden Sie alle Dateien die den Inhalt Ihres Portals beschreiben.
WICHTIG: Überschreiben Sie nie die Dateien die in /design/default/ liegen.
Sollten Sie mal einen Fehler gemacht haben, so können Sie immer wieder die Dateien aus dem Default-Ordner verwenden. Auch für zukünftige Updates ist es wichtig, dass diese Ordner-Inhalte unberührt bleiben.
Kopieren Sie nur die Dateien, die Sie auch wirklich ändern wollen. Es macht keinen Sinn alle Dateien aus dem Ordner „default" in den Ordner „user" zu kopieren.
Links erstellen und Bilder einfügen
ebiz-trader erzeugt automatisch Links, inklusive der Pfadangabe, zu Unterseiten. Um dieses zu ermöglichen, sollten sie keine Links aus der URL-Leiste Ihres Browsers verwenden.
Möchten Sie z.B. auf eine Unterseite auf Ihrem Portal verlinken, so verwenden Sie immer folgende Syntax:
Das System erzeugt daraus einen Link auf /info/impressum.htm
Würden Sie hingegen den Link aus dem URL-Leiste Ihres Browser verwenden, so würde es dazu führen, dass bei einer strukturellen Änderung Ihrer Seite dieser Link nicht automatisch korrigiert werden kann.
Sie können jeden beliebigen Namen Ihres Marktplatzes verwenden.
Wählen Sie in der Navigationsleiste folgenden Punkt aus Administration/Strukturen/Navigation bearbeiten.
Unter der Spalte „File" finden Sie alle Namen die Sie verwenden können.
Wenn Sie Bilder verwenden, so sollten diese immer im Order /design/user/default/ressources/images/ abgelegt werden.
Beispiel
Wenn Sie z.B. die Änderungen per FTP durchführen wollen, so verfahren Sie wie folgt. Das Verfahren können Sie für alle Änderungen am Skin und Design anwenden.
- Suchen Sie sich die notwendige Datei. In der Navigationsstruktur finden Sie folgenden Eintrag für die Startseite.
- Unterhalb von Files/Skin finden Sie den Eintrag index/-start.
Das bedeutet, dass dieser Navigationspunkt das HTML File index.htm im Ordner tpl und das Skin index-start.htm aus dem Skin-Ordner verwendet. - Laden Sie sich jetzt das Dokument aus dem tpl-Ordner mit dem Namen index.html herunter und öffnen Sie es in Ihrem HTML-Editor
- Sie sollten jetzt folgenden Quellcode sehen können:
- Verändern Sie jetzt den Quellcode. Fügen Sie die Zeile 1 in die Zeile 23 ein.
- ACHTUNG - aufmerksam lesen:
Sie müssen diese Datei index.htm jetzt wieder auf den Webserver kopieren. Navigieren Sie mit Ihrem FTP-Programm zu folgender Stelle:
/design/user/default/tpl/
Sollte das Verzeichnis nicht vorhanden sein, so legen Sie es bitte an.
Alle Änderungen, die Sie in den Bilder, CSS und HTML Dateien vornehmen müssen jetzt in das Verzeichnis „user“ kopiert werden. Sollten Sie innerhalb des User-Verzeichnisses Ordner mit DE, EN oder einem anderen Länderkürzel finden, so können Sie hier für jede Sprache eine eigene Index.htm ablegen. In unserem Beispiel kopieren wir die index.htm in den Ordner /design/user/default/tpl/ - Rufen Sie jetzt die Startseite in Ihrem Browser auf. Sie haben jetzt die Startseite geändert
Sollten Sie Ihre Änderungen rückgängig machen wollen, so löschen Sie einfach Ihre Dateien aus dem User-Ordner.
Nachdem Sie die Änderungen an Ihrem Design gemacht haben, sollten Sie die Einstellungen „TEMPLATE_COMMENTS" sowie „TEMPLATE_DEBUG" wieder deaktivieren.
Texte und Übersetzungen ändern
Die meisten Texte innerhalb der Software können mithilfe des Übersetzungs-Tools geändert werden. Sowohl für die Standard-Sprache (idr. Deutsch) als auch für alle anderen definierten Sprachen. Dazu aktivieren Sie zunächst die Übersetzungs-Tools über die Admin-Tools in der unteren rechten Ecke.
Anschließend wird der Übersetzungs-Bereich am unteren Rand des Bildschirms sichtbar. Dieser enthält eine Liste aller übersetzbaren/änderbaren Texte auf der aktuellen Seite. Wechseln Sie nun auf die Seite, auf der Sie einen Text ändern möchten. In diesem Beispiel werden wir einen Text innerhalb des Einstell-Prozess für Anzeigen ändern.
Wenn Sie den im Screenshot markierten Text (1) ändern möchten ist der einfachste Weg über die Suchfunktion des Browsers (Strg+F) nach dem Text zu suchen. In diesem Fall z.B. nach "Pflichtfelder und müssen ausgefüllt werden". Manchmal, wie an dieser Stelle, werden Inhalte nachgeladen und tauchen daher nicht sofort im Übersetzungs-Tool auf. Wenn Sie den Text nicht im Übersetzungs-Tool finden, sollten Sie den Aktualisieren-Button innnerhalb des Übersetzungs-Tools anklicken. (2) Dies ist nur in einigen wenigen Fällen notwendig. Prüfen Sie immer zunächst ob der gesuchte Text bereits im Übersetzungs-Tool aufgeführt ist.
Sobald Sie den entsprechenden Übersetzungs-Eintrag gefunden haben können Sie über die Eingabefelder der entsprechenden Sprache ändern.
Sobald Sie die gewünschten Texte geändert haben, klicken Sie auf den Haken in der oberen rechten Ecke des Übersetzungs-Tools um diese abzuspiechern. Anschließend sollte der geänderte Text auf ihrem Marktplatz sichtbar sein. Unter Umständen kann es Notwendig sein über den Admin-Bereich den Cache zu leeren, damit die Änderungen sichtbar werden.