Entwicklertools zur schnellen Layoutanpassung nutzen

Veröffentlichungsdatum: 03. September 2018
Änderungsdatum: 15. Mai 2020

weblication cms layout anpassungen css html firebug entwicklertool base mobile first

Layoutelemente schnell und einfach umbauen.

In diesem Tutorial erfahren Sie, wie Sie mithilfe des Webbrowsers Firefox und dessen eingebautem Developer Tool (Entwicklerwerkzeug, in älteren Firefox-Versionen über das Add-On Firebug nutzbar) auf schnelle und einfache Weise die Gestaltung des BASE-Projektes ändern. Ähnlich stelllt auch der Google Chrome Browser und der Internet Explorer 11 bzw. Microsoft Edge ein Entwicklertool zur Verfügung. Nachfolgend werden diese nützlichen Helfer auf Basis des Developer Tools innerhalb Mozilla Firefox erklärt.

Das Tutorial geht von folgenden Voraussetzungen aus:

Firefox aktuelle Version (http://www.mozilla.org/)
altes Firefox-AddOn Firebug ( https://addons.mozilla.org/de/firefox/addon/firebug/ )
Installiertes Weblication^® CMS (Stand bei Artikelveröffentlichung: CMS 9.x), sowie eine frische Installation des aktuellen BASE Classic bzw. Mobile First Projekts

Die Vorgehensweise bekommen Sie am Beispiel der Hintergrundfarbe eines Inhaltscontainers in einer Schritt-für-Schritt Anleitung demonstriert.

Nachfolgend wird auf die Vorgehensweise bei einem BASE Classic 2.x Projekt eingegangen.
Bei Mobile First Projekten (BMF) ist der Ablauf grundsätzlich der gleiche. Dadurch, daß die MF mehrere SCSS-Dateien nutzt, welche für die generierten Seiten zu einer Haupt Design-CSS zusammengeführt werden, gibt es hier einen Unterschied. Als Administrator eingeloggt, finden Sie über das Browserwerkzeug (Element untersuchen) die genaue Stelle einer CSS-Definition in der Source-Angabe, was z.B. wie folgt aussieht:

.elementHeadline {
    --wsource: /items/elementHeadline.scss 127;
    position: static;
    margin: 0 auto;
    font-weight: normal;
}

In diesem Fall geht es also um Zeile 127 der elementHeadline.scss Datei.
Ggf. aktivieren Sie die Checkbox "Nicht erfüllte Bedingungen einblenden" rechts unten im CSS-Editor, um alle Zeilen ersichtlich zu haben.

Schritt 1: Anmelden als Administrator und Projekt aufrufen
Schritt 2: Kontextmenü für Element untersuchen Aufruf öffnen
Schritt 3: Darstellung beispielhaft ändern
Schritt 4: CSS-Datei zur Bearbeitung öffnen und Farbwert ändern

Schritt 1: Anmelden als Administrator und Projekt aufrufen

Melden Sie sich in Weblication als Administrator an und rufen die Startseite des BASE-Projekts auf.

Aufruf der BASE im Mozilla Firefox Browser

Im rechten Inhaltsbereich befindet sich ein Inhaltscontainer in der Darstellung "Box", das heißt, die Inhalte werden gegen einen grauen Hintergrund angezeigt. In den nächsten Schritten erfahren Sie, wie Sie die Hintergrundfarbe mit wenigen Handgriffen ändern.

Schritt 2: Kontextmenü für Element untersuchen Aufruf öffnen

Klicken Sie mit der rechten Maustaste auf die graue Box im rechten Inhaltsbereich.

Durch den Rechtsklick auf die graue Fläche öffnet sich das Kontextmenü von Firefox. Hier wählen Sie die Option "Element untersuchen" aus.

Schritt 3: Darstellung beispielhaft ändern

Firefox - Untersuchtes Element mit Firefox

Durch die Option "Element untersuchen" öffnet sich die Oberfläche des Entwicklerwerkzeuges im unteren Drittel des Browsers (kann auch anders eingestellt werden). Im linken Bereich des Werkzeuges sehen Sie den HTML-Quelltext des ausgewählten Elementes, im rechten Bereich den zugehörigen CSS-Code sowie die entsprechende Stelle/ Zeile in der CSS-Datei, an der die Eigenschaft der Klasse definiert wurde.

In unserem Fall sollte folgendes Element ausgewählt sein:

<div class="elementStandard elementContent elementBox elementBox_var0 elementBoxBackgroundColor_var30 elementBoxPadding_var20 elementBoxInnerHeight_var0"> design.css, Zeile 1651 (Stelle in der CSS-Datei)

Unter Umständen ist bei Ihnen ein anderes Element markiert, wählen Sie in diesem Fall das Element direkt mit einem Mausklick aus.

Den CSS-Code im rechten Bereich können Sie direkt im Browser ändern! Änderungen, die Sie auf diese Weise vorgenommen haben, werden jedoch nicht gespeichert. Diese Option bietet sich zum Testen neuer Eigenschaften, etc. an.

Schritt 4: CSS-Datei zur Bearbeitung öffnen und Farbwert ändern

Öffnen Sie nun die Datei design.css (Weblication^® Panel: "CSS Stylesheets - Allgemein") zur Bearbeitung und ändern den Farbwert ab. Die Hintergrundfarbe kann entweder als Farbwert angegegben sein (z.B. background-color:#f0f0f0) oder - wie hier im Beispiel - als Weblication^® CSS-Variable gesetzt sein. Diese CSS-Variablen finden Sie im Kopf der design.css definiert und können dort den Farbwert wie gewünscht zur Variable anpassen:

Auszug aus der design.css zur Hintergrundfarbe von Inhaltsboxen (als CSS-Variable)

...
$backgroundColorBoxSheet:#f0f0f0; /* Hintergrundfarbe Sheet-Boxen */
...

Dieses Verfahren eignet sich grundsätzlich für die Änderung aller HTML/ CSS Elemente.

Weiterführende Links

Nützliche Helfer zum Debuggen von Javascript, CSS, HTML & Co

FAQs

Welche Voraussetzungen werden für das Tutorial zu den Entwicklertools genannt?: Für das Tutorial werden eine aktuelle Firefox-Version, das (alte) Firebug-Add-on sowie eine installierte Weblication® CMS-Umgebung (Stand bei Veröffentlichung: CMS 9.x) vorausgesetzt. Außerdem wird eine frische Installation des aktuellen BASE Classic bzw. Mobile First Projekts genannt.
Welches Vorgehen wird im Tutorial beispielhaft demonstriert?: Das Tutorial demonstriert die Änderung der Hintergrundfarbe eines Inhaltscontainers anhand einer Schritt-für-Schritt-Anleitung.
Wie unterscheidet sich der Ablauf bei einem 2.x Projekt im Vergleich zu anderen Projekten?: Bei 2.x Projekten gibt es einen Unterschied: Es werden mehrere SCSS-Dateien genutzt, die für die generierten Seiten zu einer Haupt-Design-CSS zusammengeführt werden. Dafür finden Administratoren im Browserwerkzeug ("Element untersuchen") die genaue Stelle einer CSS-Definition in der Source-Angabe (z. B. Zeile einer konkreten SCSS-Datei).
Wie finde ich per Browserwerkzeug heraus, in welcher CSS/SCSS-Datei eine Eigenschaft definiert ist?: Als Administrator im Browserwerkzeug ("Element untersuchen") den relevanten Bereich markieren. In der Source-Angabe wird dabei angezeigt, wo die CSS-Definition herkommt, z. B. über einen Pfad zur SCSS-Datei und eine Zeilennummer (Beispiel: Zeile 127 der Datei *elementHeadline.scss*).
Wie aktiviert man im CSS-Editor ggf. das Anzeigen aller Zeilen?: Falls nicht alle Zeilen sichtbar sind, soll rechts unten die Checkbox "Nicht erfüllte Bedingungen einblenden" aktiviert werden, um alle Zeilen im CSS-Editor ersichtlich zu haben.
Was sind die Schritte im Tutorial zur Änderung der Darstellung (Überblick)?: Die Schritte sind: 1) als Administrator anmelden und das Projekt aufrufen, 2) im Kontextmenü "Element untersuchen" öffnen, 3) die Darstellung testweise ändern, 4) die passende CSS-Datei öffnen und den Farbwert anpassen.
Wie starte ich Schritt 1 im Tutorial richtig?: Als Administrator in Weblication anmelden und die Startseite des Projekts aufrufen. Im rechten Inhaltsbereich soll ein Inhaltscontainer in der Darstellung "Box" sichtbar sein (mit grauem Hintergrund).
Wie öffne ich in Schritt 2 das Kontextmenü "Element untersuchen"?: Mit der rechten Maustaste auf die graue Box im rechten Inhaltsbereich klicken. Im Kontextmenü die Option "Element untersuchen" auswählen.
Was passiert nach Auswahl von "Element untersuchen" (Schritt 3)?: Das Entwicklerwerkzeug öffnet sich im unteren Drittel des Browsers. Im linken Bereich wird der HTML-Quelltext des ausgewählten Elements gezeigt, im rechten Bereich der zugehörige CSS-Code inklusive der Stelle/Zeile, an der die Eigenschaft definiert ist. In der Beispielbeschreibung wird dabei ein bestimmtes div-Element mit zugehörigen CSS/Variablen gezeigt.
Kann ich die CSS-Änderungen im Browser direkt testen und werden sie gespeichert?: Ja, der CSS-Code im Browser kann direkt geändert werden, um Eigenschaften zu testen. Diese Änderungen werden jedoch nicht gespeichert.
Wo passe ich im Tutorial die Hintergrundfarbe dauerhaft an (Schritt 4)?: In Schritt 4 wird die Datei *design.css* ("CSS Stylesheets - Allgemein") zur Bearbeitung geöffnet und der Farbwert wird geändert. Die Hintergrundfarbe kann entweder als konkreter Farbwert angegeben werden (z. B. <code class="codeInline">background-color:#f0f0f0</code>) oder als Weblication® CSS-Variable.
Wie werden im Beispiel CSS-Variablen in der design.css für die Hintergrundfarbe verwendet?: Die Hintergrundfarbe wird im Beispiel über eine CSS-Variable gesetzt, z. B. <code class="codeInline">... $backgroundColorBoxSheet:#f0f0f0; /* Hintergrundfarbe Sheet-Boxen */ ...</code>. Diese Variable ist im Kopf der <code class="codeInline">design.css</code> definiert und kann dort auf den gewünschten Farbwert angepasst werden.
Für welche Arten von Änderungen eignet sich das beschriebene Verfahren grundsätzlich?: Laut Tutorial eignet sich das Verfahren grundsätzlich, um alle HTML/CSS-Elemente zu ändern, indem die jeweiligen CSS-Eigenschaften bzw. Variablen angepasst werden.