• avatar

    Martin Wandelt am 10.06.2020  

    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 und von denen eines unter "Einstellungen > Erscheinungsbild" ausgewählt werden kann. 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.

    Falls Sie mit der App nicht zurechtkommen: Es gibt im Internet noch andere Werkzeuge mit ähnlicher Ausrichtung, zum Beispiel Bootstrap Magic. Eine Websuche nach "bootstrap theme editor" liefert viele Treffer.

    Bitte beachten Sie: Wenn Sie eines der werksseitig 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.06.2020  

    Ü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.06.2020  

    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.

  • André Pretzel am 31.10.2022  

    Oh man, gibt es auch eine Möglichkeit ohne extra einen Kurs zu machen?

    Es muss doch eine Einstellung bei responsiv geben, bei der die Farben vernünftig abgestimmt sind.
    Wenn man auf Lightbox geht ist das Feld grau und die Links blau.

    Es wird doch sicher eine Einstellung geben bei der die Farben zusammenpassen.

    Was kann man einstellen damit es passt?

  • André Pretzel am 31.10.2022  

    Ich habe bei Thema "dark" mal getestet und es gibt nichts was man nutzen kann.
    Der Fehler ist einfach, dass das Seitenfeld mit den Links mit einem grauen Hintergrund hinterlegt ist.
    Es ist ja auch das Textfeld für die Galerien.
    Es müsste vermutlich nur ein helleres Grau sein oder komplett ohne Farbe und stattdessen nur einem weißen Rahmen.

    Vermutlich würde ich es auch Seiber hinbekommen aber wenn mir durchlese wie ich es selber machen kann bin ich erst mal 1 oder 2 Tage beschäftigt, mich mit dem Thema auseinander zu setzen.

    Falls es aber eine Einstellung für Thema "dark" gibt bei der man die Links in der Lightbox vernünftig sieht wär ich für einen Hinweis dankbar.

  • André Pretzel am 31.10.2022  

    Ich glaube ich habe jetzt was gefunden.
    Thema "cyborg" und Hintergrundfgarbe "light"

  • André Pretzel am 31.10.2022  

    o.k. passt doch nicht. Dann sind die Galerienamen grau und auch kaum zu sehen.

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