Individualisierung mit CSS
- Sebastian Meyer
Einleitung
Hier sind verschiedene Tips & Tricks zur Individualisierung des Templates mit CSS-Regeln beschrieben.
Eigenes CSS lässt sich entweder über ein eigenes Child-Template oder durch einen <style>-Tag im eigenen <head>-Inhalt im globalen Bereich hinzufügen.
CSS-Anpassungen
Hier sind ein paar beispielhafte Anpassungen aufgeführt.
Maximale Containerbreite begrenzen
Bei der Widget-Größeneinstellung “Volle Breite” kann der Shop auf extrem breiten Monitoren ggf. nicht mehr wie gewünscht aussehen. Um das Wachstum des Inhalts auf eine maximale Breite zu begrenzen, lässt sich folgende CSS-Regel nutzen (im Beispiel wird der Inhalt der Widgets nie breiter als 2400px, egal wie breit der Bildschirm des Nutzers ist):
.container-fluid {
max-width: 2400px;
}Suchfeld-Radius anpassen
Wenn der Radius vom Suchfeld im Header (und vom Suchen-Button) angepasst werden soll, kann man folgendes CSS nutzen:
#search-header {
border-top-left-radius: 10px;
border-bottom-left-radius: 10px;
}
.et-widget-headermain .et-header-main-search .btn {
border-top-right-radius: 10px;
border-bottom-right-radius: 10px;
}