B7: Widgettrennlinien gestalten

Vorwort

In diesem Beitrag machen wir die Trennlinien zwischen den aktivierten Widgets  optisch gefälliger, damit die Website stärker „aus einem Guss“ erscheint. Die Widgettrennlinien werden ebenfalls weiß-durchschimmernd.

Außerdem gibt es eine Kurzexkursion zum CSS – Befehl ‚border-top‘.

Es sind abermals keine Programmierkenntnisse notwendig. Als Browser mit „Element-Untersuchen“ benutze ich Google Chrome. Als Codeeditor kommt Brackets zum Einsatz.

Widgettrennlinien auf der Internetseite finden und Gestalten.Abb.: Widgettrenlinien – Ausgangslage. Die Widgettrennlinien (1) werden in Farbe, Dicke und Beschaffenheit auf das übrige Erscheinungsbild abgestimmt.

Quelltext untersuchen mit Google Chrome

2. Drücken Sie in Google Chrome die rechte Maustaste auf der Internetseite mit den Widgettrennlinien und wählen Sie ‚Untersuchen‘.

Den Widgetbereich auf der Internetseite suchen.

Hinweis:

In ‚SH – Manier‘ (3) vermuten wir, dass die Widgettrennlinien irgendetwas mit der Klasse ‚widget‘ zu tun haben könnte.

Dieser Vermutung werden wir durch Codedeaktivierung / Codeaktivierung und Beobachten der Liveveränderungen im Folgenden nachgehen.

Den Widgetbereich auf der Internetseite durch den Mauszeiger aufsprüren.

4. Drücken Sie mit der linken Maustaste den ‚Selector‘ und bewegen sie den Mauszeiger auf eine Widgettrennlinien.

5. Der zugehörige Quellcode wird angezeigt.
Wir vermuten, dass der gesuchte Befehl in der Klasse ‚widget‘ zu finden ist.

Finden des Quellcodes der Wigettrennlinien.

6. Durch ausprobieren (Codebefehle deaktivieren und Liveveränderungen beobachten) ermitteln wir den Befehl ‚border-top‘ als unseren Befehl.

Kurzexkursion: CSS – Anweisung ‚border-top‘

Über die „Befehlsfamilie“ ‚border‘ können Sie auf vielfältige Weise Linien und ganze Rahmen gestalten. Dabei reichen die Gestaltungsparameter von Farbe, Linieneigenschaft (z.B. gestrichelt) bis zur 3-D –Darstellung. Eine ausführliche Dokumentation dazu finden Sie hier. Das Durchlesen möchte ich Ihnen für einen Einblick in die vielen Gestaltungsmöglichkeiten empfehlen. Sie können diese auch sofort durch praktisches Probieren auf Grundlage des Folgenden auf sich wirken lassen.

Dem ‚border-top‘ – Befehl werden folgende Eigenschaften „mitgegeben“:

▓      Linienstärke

▓      Linienstil

▓      Linienfarbe

Ein CSS – Befehlsbeispiel ist:

»  border-top: 4px dotted rgb (123, 234, 5);

Widgettrennlinien gestalten

Der 'border-top' - Befehl, um die Widgettrennlinien zu gestalten.

7. Wir verändern ‚live‘ den Quelltext wie in dem Bild zu sehen.

»  border- top: 8px solid rgba(255,255,255,0.6);

Das Ergebnis kann direkt im Browser gesichtet werden.

Hinweis: Die Veränderung ist nicht dauerhaft! Sie wird durch ein „Neu laden“ der Seite zurückgesetzt.

Die style.css des Childthemes öffnen.

8. Kopieren Sie den gesamten Quellcode wie  im vorherigen Bild angezeigt (in den Zwischenspeicher).

9. Öffnen Sie die ‚style.css‘ des Childthemes mit einem geeigneten Codeeditor (z.B. Brackets)

Der CSS - Code der Wigettrennlinien in Brackets.

10. Fügen Sie den gesamten Quellcode ein und löschen Sie nicht veränderte Eigenschaften aus ihm raus.

Speichern Sie die Datei.

Hinweis: Die Veränderungen sind nun dauerhaft umgesetzt.

 

Schreibe einen Kommentar

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