• avatar

    Martin Wandelt am 10. June  

    Wenn Sie in Pixtacy 5 das responsive Design nutzen, wird das Erscheinungsbild Ihres Shops durch das Bootstrap-Framework gesteuert. Anpassungen werden über sogenannte "Themen" (themes) vorgenommen, die man sich fertig herunterladen oder selbst erstellen bzw. anpassen kann.

    Pixtacy liefert bereits eine Reihe von Bootstrap-Themen mit, die im Verzeichnis templates/pixtacy/themes_r abgelegt sind. Weitere Themen finden Sie im Internet, wenn Sie nach "bootstrap themes" suchen. Um ein Thema zu nutzen, das aus einer fremden Quelle stammt, gehen Sie folgendermaßen vor:

    1. Stellen Sie per FTP oder SSH eine Verbindung zu Ihrem Webserver her.

    2. Navigieren Sie zum Verzeichnis config innerhalb des Pixtacy-Hauptverzeichnisses.

    3. Erstellen Sie einen neuen Ordner mit dem Namen themes_r, falls es diesen noch nicht gibt. Das "r" am Ende steht für "responsiv".

    4. Erstellen Sie im Ordner themes_r einen neuen Unterordner für das neue Thema. Der Name spielt keine Rolle, er sollte aber keine Umlaute oder Sonderzeichen enthalten.

    5. Kopieren Sie in den neu erstellten Themenordner die Datei bootstrap.min.css, die zu dem Thema gehört. Wenn zu dem Thema auch eine Datei mit dem Namen _variables.scss vorliegt, kopieren Sie diese ebenfalls in den Ordner. Das Thema würde auch ohne diese Datei funktionieren, aber ohne sie ist es schwierig, später noch einmal Anpassungen vorzunehmen.

    6. Rufen Sie in Pixtacy die Seite Einstellungen > Erscheinungsbild auf, und klicken Sie oben auf "Bearbeiten".

    7. Wählen Sie unter "Thema" das neu installierte Thema aus, und klicken Sie unten auf "Speichern".

    Wenn Sie Änderungen an einem Thema vornehmen möchten, um zum Beispiel für bestimmte Elemente eine andere Farbe oder Schriftgröße einzustellen, können Sie dies mit Hilfe des Werkzeugs unter bootstrap.build/app erledigen. Klicken Sie auf Import > Import _variables.scss und wählen Sie die SCSS-Datei aus, die zu dem gewünschten Thema gehört. Führen Sie dann die gewünschten Anpassungen durch und laden Sie über den Button "Export theme" die Dateien _variables.scss und bootstrap.min.css herunter. Diese können Sie dann wie beschrieben installieren und aktivieren.

    Bitte beachten Sie: Wenn Sie eines der mitgelieferten Themen verändern möchten, sollten Sie dafür immer unter config/themes_r eine Kopie anlegen. Änderungen direkt im Ordner templates/pixtacy/themes_r würden beim nächsten Pixtacy-Update verlorengehen.

    Für kleinere Anpassungen kann es unter Umständen einfacher sein, eine eigene CSS-Datei mit zusätzlichen Regeln einzubinden, als das komplette Bootstrap-Thema zu verändern. Legen Sie dazu am besten eine Datei mit dem Namen mystyles.css in den Ordner config, und fügen Sie dann unter Einstellungen > Erscheinungsbild folgende Zeile in das Feld Kopf (<head>) ein:

    <link rel="stylesheet" href="config/mystyles.css" type="text/css">

    Falls Sie bereits eine Datei mystyles.css für das nicht-responsive Erscheinungsbild erstellt hatten, sollten Sie diese nicht weiterverwenden, sondern umbenennen und mit einer leeren Datei für das responsive Erscheinungsbild beginnen. Andernfalls kann es zu unerwünschten Wechselwirkungen zwischen den alten und neuen CSS-Regeln kommen.

  • Torsten Grieger am 11. June  

    Über bootstrap.build lässt sich das Design gut und einfach bearbeiten – man kann sogar andere Schriften aus dem Google CSS API-Fundus einbinden. Das Einzige, was ich noch nicht "herausgefunden habe", ist, wie man das Lightbox-Herz von gelb in eine andere Farbe "umfärbt". Aber vielleicht gibt es ja auch dazu noch einen kleinen Tipp ...

  • avatar

    Martin Wandelt am 11. June  

    Die Farbe des Favoritenherzens lässt sich über folgende Stilregel anpassen (am besten in der oben erwähnten mystyles.css-Datei):

    .flagged .flag-box i,
    .lg-flagging-box.flagged i,
    .flagged #btnFlag i {
    color: #ff0000 !important;
    }


    In diesem Fall würde das Herz in Rot dargestellt.

  • Um eine Antwort zu diesem Beitrag zu schreiben, müssen Sie sich einloggen.