HTML direkt im Browser bearbeiten

CSS direkt im Browser anpassen.

Möchte man das Design seiner Seite anpassen, so geht das in den meisten Fällen über Änderungen am Stylesheet. Bevor man sich die Mühe macht ein Child Theme zu erstellen kann man über eine Browser Funktion testen, welche CSS Änderungen notwendig sind um das gewünschte Ergebnis zu erhalten.

Welches Stylesheet Datei wird verwendet?

Um die verwendete CSS Datei herauszufinden, lohnt sich ein Blick in den HTML Quelltext oder man verwendet bereits hier das integrierte Entwicklertool.

Chrome

Rechte Maustaste an einer beliebigen Stelle auf der Seite -> Element untersuchen. Es öffnet sich die Entwicklerleiste:

Entwicklerwerkzeug von Chrome

Entwicklerwerkzeug von Chrome

Dort wechselt man auf den Reiter „Sources“ und öffnet mit der Tastenkombination „STRG + P“ das Suchfeld:

Verwendete Stylesheets in Chrome suchen.

Verwendete Stylesheets in Chrome suchen.

Da bei WordPress die Style.css vom aktiven Theme verwendet wird, sucht man hier einfach nach diesem Dateinamen:

Aktives Stylesheet suchen.

Aktives Stylesheet suchen.

Anhand der URL sehen wir, dass ein Theme namens „bliss“ und ein Child Theme mit dem Namen „bliss-child“ verwendet wird.

Das richtige CSS Element finden

Die meisten Browser bieten mittlerweile Tools für die Webentwicklung. Um das richtige Element zu finden wird es meistens mit der rechten Maustaste angeklickt. Im geöffneten Kontextmenü befindet sich dann ein Punkt ähnlich „Element untersuchen“. Über diesen Punkt öffnet sich ein zusätzliches Fenster mit dem HTML Code. Das ausgewählte Element wird automatisch markiert und man kann sich die gewünschten Informationen anzeigen lassen.

Chrome

Im Chrome klickt man mit der rechten Maustaste auf das gewünschte Element und klickt auf den Befehl „Element untersuchen“ im Kontextmenü.

HTML Elemente mit Chrome untersuchen.

HTML Elemente mit Chrome untersuchen.

Bei den meisten anderen Browsern verhält es sich hier ähnlich. Beim Klick auf diesen Menüpunkt öffnet sich ein weiteres Fenster in welchem der HTML Quelltext angezeigt wird.

Das ausgewählte Element wird markiert und man sieht die passende Stelle im Quelltext. Bei verschachtelten HTML Elementen muss man sich die einzelnen Ebenen nach unten durchklicken um zum gewünschten Wert zu gelangen.

Das selektierte HTML Element.

Das selektierte HTML Element.

HTML im Browser ändern

Den gewählten Bereich kann man mit einem Doppelklick im HTML Fenster beschreibbar machen. Mit der Eingabetaste wird die Änderung bestätigt und auch direkt angezeigt.

HTML direkt im Browser bearbeiten.

HTML direkt im Browser bearbeiten.

Das ist eine praktische Methode um CSS Anpassungen schnell und unkompliziert zu testen. Dadurch, dass jeder moderne Browser ähnliche Funktionen besitzt, kann man somit auch gleich die Kompatibilität untereinander testen.

Im Chrome werden die CSS Eigenschaften in einem weiteren Fenster angezeigt. Dieses befindet sich standardmäßig auf der rechten Seite. Auch hier können die Werte mit einem Doppelklick angepasst werden. Auch das Deaktivieren von angewandten CSS Eigenschaften lässt sich hier sehr einfach testen.

CSS Eigenschaften anpassen.

CSS Eigenschaften anpassen.

Änderungen Updatesicher machen

Möchte man sein WordPress Theme anpassen, so ist es wichtig ein Child Theme zu erstellen. Der Hintergrund ist einfach, dass durch das Child Theme das Haupttheme aktualisiert werden kann und die eigenen Änderungen beibehalten bleiben. Wie man ein Child Theme richtig erstellt wird hier erklärt: Child Theme Tutorial

Schreibe einen Kommentar

Deine E-Mail-Adresse wird nicht veröffentlicht. Erforderliche Felder sind mit * markiert.