Developer-Tools für CSS-Arbeiten (Browser-Funktion)
- Maik Gnyza
- Tibor Hulverscheidt (Unlicensed)
- Jonas Jahnke
Mit den integrierten Developer-Tools im Browser (bspw. Chrome) hat der Anwender die Möglichkeit, dass Frontend, die Html-Datei und die CSS-Datei gleichzeitig zu betrachten und Live zu bearbeiten. Die Änderung ist nur temporär im eigenen Browser.
Grundlagen zur CSS
In den CSS-Dateien werden alle Styling-Informationen einer Website gespeichert.
CSS | HTML | Frontend |
|---|---|---|
 |  |  |
Der Multishop verwendet verschiedene CSS-Dateien. Beispielsweise in der style.css, ist das Standard-Design definiert.
Die layout.css kann vom Shop-Admin im Backend bearbeitet werden (Einstellungen > Shop Layout > Farben anpassen). Hier definierte Stylings „überschreiben“ das Standard-Design.
Style.css | Layout.css |
|---|---|
 |  |
Der grundsätzliche Aufbau der Syntax ist immer gleich:
#footer {
Wichtig
Erstellen Sie sich eine Kopie Ihrer aktuellen CSS, um bei fehlgeschlagenen Gestaltungsversuchen ein Backup zu haben.
Bevor Sie etwas in die CSS einfügen, prüfen Sie, ob die Eigenschaft schon in der CSS vorhanden ist oder ob Sie diese neu einfügen.
Kontrollieren Sie, ob Ihre Anpassung tatsächlich nur die Bereiche verändert die Sie geändert haben wollen (Klassen-Anweisungen wirken sich global aus).
Achten Sie darauf, dass Ihre Anpassungen responsive sind und unabhängig von dem Medium auf dem sie angezeigt werden funktionieren.
Fragen und Antworten
Wie finde ich heraus, was ich in die CSS schreiben muss und wozu brauche ich das Developer-Tool?
Mit einem Rechtsklick auf ein Element und "Untersuchen" öffnet sich meist am rechten Rand auf der Website das Developer Tools Menü.
Jetzt haben Sie einen Überblick über die CSS-Datei, die HTML-Datei und das Frontend der Website. Sie sehen, wie die Website strukturiert und designet ist.
Wie kann ich das responsive Design testen?
Mit dem Developer Tool können Sie sich z.B anschauen wie sich die Website auf verschiedenen Geräten darstellt. So kann das responsive Design der Website getestet werden.
PC
Mobilgeräte
Wie kann ich Änderungen Live testen und übernehmen?
Des Weiteren haben Sie die Möglichkeit temporäre Anpassungen auf der Website live zu testen.
Sie können sowohl die Farbe, als auch die Position und Größe von Bildern, so wie viele Weitere Veränderungen vornehmen, ohne die CSS des Shops zu beeinflussen. Alle Anpassungen sind bei einem erneuten Aufrufen oder beim Aktualisieren der Website in den Originalzustand zurückgesetzt.
Wenn die Anpassungen korrekt sind / erfolgreich getestet wurden und Sie die Änderungen permanent in Ihrem Shop haben wollen, können Sie die Shop-CSS manuell anpassen und erweitern. Dafür wählen Sie nur die Eigenschaft aus, die Sie für Ihre Anpassung brauchen, kopieren diese und schreiben die Anweisung in die layout.css.
Diese Eigenschaft ist für die Veränderung der Hintergrundfarbe verantwortlich:
.feature_panel {
background-color: #2fa595;
}
Wenn Sie die Eigenschaft kopiert haben, können Sie in die Shop-CSS gehen und die Eigenschaft unten an die CSS anhängen. Kopieren Sie idealerweise nur die Eigenschaft, die Sie bearbeiten wollen, um die Dateigröße der CSS so gering wie möglich zu halten. Achten Sie auch darauf, ob die Anweisung zur Klasse oder ID bereits vorhanden ist.