Mit dem Google-den integrierten Developer-Tool Tools im Browser (bspw. Chrome) hat der Anwender die Möglichkeit das , 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
...
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 {
| Info | ||
|---|---|---|
| ||
|
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
...
In diesem Fenster werden mehrere Optionen aufgezeigt, aus denen man wählen kann.
Die für Sie interessante Option ist "Untersuchen".
...
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:
...
!Wichtig!
Was Sie beachten müssen:
Erstellen Sie sich eine Kopie Ihrer aktuellen CSS, um bei fehlgeschlagenen Gestaltungsversuchen ein Backup zu haben.
Bevor Sie etwas in die CSS einfügen sollten Sie nachschauen, 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.
...