Layout anpassen mit CSS

Letztens wurde ich gefragt: Wie kann ich die Farbe eines Buttons ändern? Meist kann man solche Einstellungen im Theme selber ändern, Farben festlegen. Aber manchmal gibt es Fälle, wo das so nicht funktioniert.

Dabei kann man doch jedes Element einer Webseite, also Formular, Felder, Buttons, Bilder usw, individuell anpassen. Dazu nutzt man CSS. Was ist CSS? CSS ist die Abkürzung für Cascading Style Sheets und ist eine Sprache, mit der Sie Ihre Vereinshomepage individuell gestalten können. Damit können Sie für jedes Element Ihrer Webseite die Gestaltung festlegen.

Mit Elementen sind dabei die einzelnen Markup-Elemente des HTML-Grundgerüstes gemeint, also z.B. <p> für Paragraphen, <h1> für Überschriften. Wenn Sie sich den HTML-Quelltext Ihrer Webseite ansehen, erkennen Sie dieses Grundgerüst. Eine einfache Anweisung für CSS ist zum Beispiel p { color:#FF0000; margin-bottom:20px; } p steht dabei für den HTML-Tag p=paragraph, die Anweisungen in der geschweiften Klammer für die einzelnen Style-Definitionen.

In unserem Fall wird der Text in Rot dargestellt, und der untere Abstand auf 20 Pixel festgelegt. Der einfachste Weg, solche Style-Anweisungen in Ihrer WordPress-Seite zu nutzen, ist die Möglichkeit vieler Themes, zusätzliches CSS anzulegen. Dazu gehen Sie im Theme auf den Customizer und suchen dort nach Custom-CSS oder zusätzliche CSS-Anweisungen und tragen dann Ihre Style-Anweisungen dort ein.

Style-Anweisungen können aber auch in eigenen CSS-Dateien gespeichert werden, die dann von der eigentlichen Webseite eingebunden werden. Das hat Vor- und Nachteile. Eine solche Datei zu erstellen und einzubinden, ist wesentlich aufwendiger. Der Pflegeaufwand, vor allem bei größeren Anpassungen, und auch die Ladezeit der Webseite ist damit geringer. Um eigene CSS-Dateien einzubinden, empfiehlt sich der Einsatz eines eigenen Child-Themes. Unser Beispiel: Farbänderung des Login-Buttons Wollen Sie nun z.B. die Farbe des Buttons im Login-Formular von a.s.Verein ändern, suchen Sie sich zuerst die entsprechenden CSS-Klassen aus dem Quellcode heraus. Style-Anweisungen können nicht nur einem reinen HTML-Element zugordnet werden, sondern auch einzelnen Klassen, die wiederum einem oder mehreren HTML-Elementen zugeordnet werden. Diese werden z.B. folgendermaßen angegeben: <p class="mein-paragraph"> Nun können eine Style-Anweisung schreiben, die sich auf die Klasse "mein-paragraph" bezieht. Und wenn diese Klasse jetzt mehreren HTML-Elementen zugeordnet ist, werden all diese Elemente gleich formattiert. Um herauszufinden, welche CSS-Klasse für eine bestimmtes HTML-Element genutzt wird, können Sie den Quellcode-Inspektor nutzen, der in jedem gängigen Browser eingebaut ist. Wenn Sie ein entsprechendes Element mit der rechten Maustaste anklicken und dann auf "Untersuchen" klicken, öffnet sich das Inspektor-Fenster innerhalb des Browsers.

In diesem Fenster sehen Sie nun jedes HTML-Element Ihrer Seite, und im zweiten Teilfenster die dazugehörigen Style-Anweisungen. Textweise können Sie diese auch einfach ändern um zu sehen, wie sich die Änderungen auf das Aussehen Ihrer Seite auswirken. In unserem Fall nehmen wir nun die CSS-Klasse "btn-primary" und verändern diese. Öffnen Sie dazu unter "Design->Customizer" den Customizer Ihres Themes und gehen dann dort auf "zusätzliches CSS", oder einen ähnlichen Bereich. Dort tragen Sie nun die neue Style-Anweisung ein: .btn-primary { background-color:#16749c!important; color:#fff!important; } Wir ändern damit die Farben für "background-color" und "color", also Hintergrundfarbe und Schriftfarbe. Die entsprechenden Farbcodes können Sie jeweils anpassen. Hinter den eigentlichen Anweisungen fügen wir in diesem Fall noch ein "!important" ein, damit wird festgelegt, dass diese Anweisung einzuhalten ist und nicht überschrieben werden darf von weiteren Style-Anweisungen. Wenn Sie dies weglassen, kann es passieren, dass Ihre Style-Anweisung von einer nachfolgenden Anweisung in einer weiteren Style-Datei überschrieben wird. Eine einführende Refernz für mögliche Styleanweisungen finden Sie unter folgender Adresse: https://wiki.selfhtml.org/wiki/CSS