Designauswahl

|   Templates

Mit der Designauswahl unter "Verwaltung->Design-Manager->Designauswahl" ist es möglich, das Aussehen des Templates zu verändern.

CSS-Sets

CSS-Sets dienen zum Speichern Ihrer Einstellungen in der Designauswahl. Mit diesen Sets können Sie bequem alle gewünschten Einstellungen in einem Bereich vornehmen und unter einem eigenen Namen abspeichern. Nach dem Speichern können Sie das Set dann auch für einen anderen Bereich des Shops oder sogar für ein anderes Template verwenden. 

Sollten Sie allerdings ein Set eines Templates bei einem anderen Template verwenden, kann es dazu kommen, dass nicht alle Optionen übernommen werden, da diese beispielsweise im neuen Template gar nicht vorhanden sind.

CSS-Sets dienen zum Speichern Ihrer Einstellungen in der Designauswahl. Mit diesen Sets können Sie bequem alle gewünschten Einstellungen in einem Bereich vornehmen und unter einem eigenen Namen abspeichern. Nach dem Speichern können Sie das Set dann auch für einen anderen Bereich des Shops oder sogar für ein anderes Template verwenden. 

Sollten Sie allerdings ein Set eines Templates bei einem anderen Template verwenden, kann es dazu kommen, dass nicht alle Optionen übernommen werden, da diese beispielsweise im neuen Template gar nicht vorhanden sind.

 

Bei einem Klick auf diesen Button öffnet sich ein Dialog-Fenster, in dem die Datei „individuell.css“ Ihres Templates geladen wird. Dies ist eine zusätzliche CSS-Datei, mit der Sie dem Template von Hand zusätzliche CSS-Styles hinzufügen können. Zudem können Sie mit Hilfe dieser Datei auch die Styles des Templates überschreiben. Zu beachten ist dabei allerdings, dass die Änderungen im Frontend des Shops aktiv werden, sobald Sie in dem Dialog auf „Speichern“ geklickt haben. Außerdem wirkt diese Datei übergreifend auf alle Bereiche des Shops, so dass die Styles sowohl auf der Startseite als auch in den Kategorien gelten.

Mit dem „Löschen“-Button ist es möglich, das zurzeit ausgewählte CSS-Set zu löschen, sofern es sich nicht um das Standard-Set „Template“ handelt.

Mit dem „Zurücksetzen“-Button werden alle ungespeicherten Änderungen am CSS-Set rückgängig gemacht und die zuletzt gespeicherten Einstellungen geladen.

Mit dem „Speichern“-Button ist es möglich, die Änderungen als eigenes CSS-Set zu speichern. Falls gewünscht, können Sie das neue Set über den Speichern-Dialog auch direkt aktivieren und somit im Shop verwenden. 

CSS-Sets speichern

  Bei der Namenswahl für das Set ist zu beachten, dass kein Set-Name doppelt vorhanden sein darf. Zusätzlich zu dieser Einschränkung darf der Name nicht „Template“ lauten. Dieser Name ist für die Standard-Sets reserviert.

Übersicht der Inhalte

Links befindet sich eine Auflistung aller Bereiche und Module des Shops, die Sie über die Designauswahl anpassen können.

Platzhalter und Box-Platzhalter können hier nicht angepasst werden und werden deshalb nicht in der Liste angezeigt. Möchten Sie die Platzhalter anpassen, so geschieht dies über den Content-Manager des Shops. Mit einem Klick auf „Übersicht“ öffnen Sie ein neues Fenster in Ihrem Browser. Dieses enthält ein Bild der vereinfachten Template-Struktur aus der Modulauswahl, auf dem die einzelnen Bereiche des Templates markiert sind. 

Bereiche, die in der Modulauswahl leer sind, werden vom Shop nicht verwendet und tauchen deshalb auch nicht in der Liste auf. Mit einem Klick auf das Symbol oben rechts neben dem Text „Übersicht“ können Sie die Liste ein- und ausblenden. Dadurch können Sie bei Bedarf mehr von der Template-Vorschau sehen.

Auswahlbereich zur Designanpassung

Platzhalter und Box-Platzhalter können hier nicht angepasst werden und werden deshalb nicht in der Liste angezeigt. Möchten Sie die Platzhalter anpassen, so geschieht dies über den Content-Manager des Shops. Mit einem Klick auf „Übersicht“ öffnen Sie ein neues Fenster in Ihrem Browser. Dieses enthält ein Bild der vereinfachten Template-Struktur aus der Modulauswahl, auf dem die einzelnen Bereiche des Templates markiert sind. 

Bereiche, die in der Modulauswahl leer sind, werden vom Shop nicht verwendet und tauchen deshalb auch nicht in der Liste auf.
Mit einem Klick auf das Symbol oben rechts neben dem Text „Übersicht“ können Sie die Liste ein- und ausblenden. Dadurch können Sie bei Bedarf mehr von der Template-Vorschau sehen.
 

Designanpassung der einzelnen Elemente

Über diese eingeblendeten Optionen ist es möglich, den gewählten Bereich oder das gewählte Modul optisch zu verändern. Passen Sie nun eine Option des Bereichs an, wird die Vorschau des Templates entsprechend aktualisiert. Dies kann allerdings einen kleinen Moment in Anspruch nehmen. 

Sind Sie mit Ihren Änderungen zufrieden, müssen Sie nur noch auf den Speichern-Button klicken und einen Namen für das Set eingeben, um die Änderungen zu übernehmen. Sollen die Änderungen direkt im Shop verwendet werden, wählen Sie die Option „Das CSS-Set speichern und verwenden.“

 

 Zu beachten ist, dass die Anpassungen in einer bestimmten Reihenfolge angewendet werden und dabei immer die letzte Anpassung „gewinnt“. Das betrifft sowohl die Dateien des Templates als auch die Optionen im Template. Dabei gilt, dass die Änderungen eine höhere Priorität haben, je tiefer im Baum sie angesiedelt sind.

Untenstehend finden Sie Übersicht über die Reihenfolge, in der die CSS-Styles geladen werden:

  1. Die Basis-CSS-Styles des Templates
  2. Die CSS-Styles der Designauswahl
    2.1. Die Styles des Hauptbereiches
    2.2. Die Styles von den einzelnen Bereichen
    2.3. Die Styles der Module
  3. Die Styles der Individuell.css

Diese Reihenfolge dient dazu, dass Sie die CSS-Styles des Templates oder der Designauswahl bei Bedarf gezielt mit Hilfe der Datei „individuell.css“ überschreiben können.