Mit dem Google-Developer-Tool hat der Anwender die Möglichkeit das Frontend, die Html-Datei und die CSS-Datei gleichzeitig zu betrachten.
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. Hier definierte Stylings „überschreiben“ das Standard-Design.
Style.css Layout.css
Der grundsätzliche Aufbau der Syntax ist immer gleich:
#footer {
Wie finde ich heraus, was ich in die CSS schreiben muss und wozu brauche ich das Google-Developer-Tool?
Mit einem Rechtsklick auf der Maus öffnet man ein Popup-Fenster.
In diesem Fenster werden mehrere Optionen aufgezeigt, aus denen man wählen kann.
Die für Sie interessante Option ist "Untersuchen".
Wenn Sie auf "Untersuchen" geklickt haben, ö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 haben nun die Möglichkeit zu sehen, wie die Website strukturiert und designet ist.
Mit dem Google 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
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 Ihnen die Anpassungen gefallen und Sie die Änderungen permanent in Ihrem Shop haben wollen, haben Sie die Möglichkeit die Shop-CSS manuell anzupassen.
Dafür wählen sie nur die Eigenschaft aus die Sie für Ihre Anpassung brauchen und kopieren diese.
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.
Achten Sie darauf, dass Ihre Anpassungen responsive sind und unabhängig von dem Medium auf dem sie angezeigt werden funktionieren.