PrestaShop wird sowohl von selbstständigen Personen sowie auch kleinen- und mittelgrossen Unternehmen eingesetzt.
Allerdings möchte man keinen 0815 Online-Shop, sondern sich von der Konkurrenz abheben – In diesem Fall sind einzelne Anpassungen des eigenen PrestaShop natürlich notwendig.
In diesem Beitrag befassen wir uns mit der Anpassung der Linkfarbe sowie der Schriftgrösse im PrestaShop Hauptmenu.
Dies gilt für die Versionen von PrestaShop 1.7.x.
PrestaShop CSS-File
PrestaShop 1.7.x ist aufgebaut auf Bootstrap und steuert darüber sämtliche Styleangaben, sowohl für Desktop- als auch für mobile Geräte.
CSS-Datei: themes/classic/assets/css/theme.css
(Wurde ein Theme eingekauft, so kann der Ordner classics auch nach dem Theme benannt worden sein)
Wichtig: PrestaShop verfügt ab der Version 1.7.x nur noch über 1 zentrales CSS-File.
Im PrestaShop 1.6.x waren in den Modulen noch einzelne CSS-Files enthalten.
Als Beispiel das PrestaShop Hauptmenu:
Wir befassen uns als Beispiel einmal mit dem PrestaShop Hauptmenu für Desktop, also Computer.
Beim Menu können Sie die Schriftfarbe oder Schriftgrösse ganz einfach anpassen, in dem Sie die folgende Codezeile suchen:
#header .top-menu a
Beim Mouseover (Hover), suchen Sie nach folgendem Tag, welcher sich im CSS-File direkt dahinter befindet:
#header .top-menu a:hover
Konnten Sie diesen Tag im CSS-File finden, können Sie die Textfarbe oder Textgrösse ganz einfach anpassen.
PrestaShop Menu Schriftgrösse und Linkfarbe
Gehen wir im Beispiel davon aus, dass wir die Farbe gerne in Rot und die Schriftgrösse auf 25 Pixel setzen möchten, so wäre der Code wie folgt:
#header .top-menu a {font-size:25px; color:#ff0000}
Ein solcher Tag beinhaltet meistens bereits gewisse Angaben.
So können Sie selber entscheiden, ob Sie diese weiterhin stehen lassen oder je nach Design gerne ändern möchten.
Wollen Sie im PrestaShop Menu nur die Schriftgrösse- oder Schriftfarbe ändern, dann lassen Sie den restlichen Code bestehen.
Möchten Sie weitere Elemente wie Breite, Abstände, Höhe usw. anpassen, dann sind in jedem Fall sehr gute Kenntnisse im CSS bzw. CSS3 empfehlenswert!
Sehr wichtig: Erstellen Sie vor der Anpassung ein Backup Ihres PrestaShop CSS-Files!