Entwicklertools zur schnellen Layoutanpassung nutzen

14. Jul 2014

Layoutelemente schnell und einfach umbauen.

In diesem Tutorial erfahren Sie, wie Sie mithilfe des Webbrowsers Firefox sowie dem dafür frei erhältlichen AddOn Firebug auf schnelle und einfache Weise die Gestaltung des BASE-Projektes ändern. Ähnlich stelllt auch der Google Chrome Browser und der Internet Explorer 11 ein Entwicklertool zur Verfügung. Nachfolgend werden diese nützlichen Helfer auf Basis des Firebugs innerhalb Mozilla Firefox erklärt.

Das Tutorial geht von folgenden Voraussetzungen aus:

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

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 Browserzoom
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 Firebug-Aufruf öffnen

Firefox - Element mit Firebug untersuchenzoom
Firefox - Element mit Firebug untersuchen

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 mit Firebug untersuchen" aus.

Schritt 3: Darstellung beispielhaft ändern

Firefox - Untersuchtes Element mit Firebugzoom
Firefox - Untersuchtes Element mit Firebug

Durch die Option "Element mit Firebug untersuchen" öffnet sich die Oberfläche von Firebug im unteren Drittel des Browsers (kann auch anders eingestellt werden). Im linken Bereich von Firebug 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 elementBox elementBox_var0“> design.css, Zeile 912 (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

Firefox - Untersuchtes Element mit Firebugzoom
Firefox - Untersuchtes Element mit Firebug

Ö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.

Ähnliche Seiten

Entwicklerbereich Weblication® CMS - © Scholl Communications AG