Wie passe ich das Styling individuell an meinen Shop an?

Geändert am Fr, 5 Feb, 2021 um 3:17 NACHMITTAGS

Prinzipiell ist das Styling natürlich beliebig veränderbar. Dabei ist es jedoch nötig, direkt den Code des Plugins anzupassen.

Im folgenden sind einige Beispiele erläutert, wie du das Styling anpassen kannst.


1. Angebots-Button:


Alle Buttons im Plugin besitzen die primäre Button-Klasse des Shops, um ein einheitliches Styling zu gewährleisten. Allerdings ist auch eines individuelles Styling der einzelnen Buttons über den CSS-Code des Plugins möglich. Die zu verändernde Datei style.css liegt im Verzeichnis   /includes/plugins/jst_individuelle_angebote/version/*Versionsnummer*/frontend/css


Um beispielsweise den Button auf der Artikeldetailseite zu stylen, muss der Code für  #offer_button   in der Datei style.css  angepasst werden.

Dort kannst du CSS-Eigenschaften nutzen, um z.B. die Größe, Farbgebung oder die Position des Buttons anzupassen. Mit background-color: black;  wird der Button beispielsweise schwarz.  Eine Liste mit CSS-Eigenschaften findest du hier


Auf diese Weise sind viele Elemente des Plugins individuell anpassbar. Der Button unter dem Formular im Angebots-PopUp hat die ID:  #submit_angebot


Wie du Selektoren von Elementen ganz einfach selbst herausfindest, kannst du hier nachlesen.



2. Angebots-PopUp


Im Angebots-PopUp kann ein eigenes Bild eingefügt werden. Dieses muss in den Plugin-Ordner /includes/plugins/jst_individuelle_angebote/version/*Versionsnummer*/frontend/assets hochgeladen werden.


Die Bild-Datei, mit dem Namen modal.jpg wird dann vom Plugin automatisch geladen und im PopUp eingefügt.

Zusätzlich sind natürlich auch hier Anpassungen des CSS möglich.



3. Angebots-Email


Die beiden Email-Vorlagen des Plugins sind nach der Installation im Shopbackend unter System->E-Mails->Vorlagen gelistet.

Dort kann der Text, beziehungsweise der HTML Inhalt bearbeitet oder ein eigenes Email-Template verwenden werden. Einige nützliche Variablen können der vorinstallierten Vorlage entnommen werden. 

Zur Überprüfung der Email-Vorlage können auch Testmails angefordert werden.


Tags: