CSS Basics – Background

Dieser Artikel ist der erste in unserer CSS Basics Artikelserie. Wir kümmern uns an der Stelle um verschiedene Anwendungsbeispiele der CSS Eigenschaft background, also alles was mit einer Hintergrundfarbe oder einem Hintergrundbild zu tun hat. Wenn du von CSS noch gar keine Ahnung hast, dann schau dir auch mal unser CSS Einsteiger Tutorial an. 🙂

Farbanpassung: Bewertungsbox

Quelle der Frage: affiliatetheme.io/forum/thema/farbanpassung-bewertungen/

Mit unserer Bewertungsbox (Beispiel) geben wir Nutzern die Möglichkeit verschiedene Eigenschaften eines Produktes mit hübschen 0-100% Bars zu stylen. Standardgemäß sind die Balken der Prozent-Review-Box in 3 Farben definiert, die je nach %-Wert entsprechend eingefärbt werden.

• 33 und kleiner wird rot
• 34 bis 66 wird gelb
• 66 und größer wird grün

Wem diese 3 Farben zu langweilig sind, oder wenn sie einfach nicht in das CI der restlichen Seite passen, der kann natürlich mit Hilfe von etwas CSS das ganze anpassen. Im folgenden zeige ich ein paar Beispiele, was man damit alles machen kann.

Einfarbige Balken

Zum einen können alle Balken einheitlich gefärbt werden, wenn es nicht so bunt sein soll. Hierzu einfach folgendes CSS Snippet verwenden:

[pastacode lang=“css“ manual=“.product-reviews-procentual%20.progress-bar%20%7B%0A%09background%3A%20%23c01313%20!important%3B%0A%7D“ message=““ highlight=““ provider=“manual“/]

Wir sprechen hier also direkt das HTML-Element mit der Klasse .progress-bar an, aber auch nur, wenn es sich innerhalb des Elements mit der Klasse .product-reviews-procentual befindet. Hier setzen wir dann über die CSS Eigenschaft background die Hintergrundfarbe auf unser ATIO-Rot #c01313.

Da die einzelnen Balken über einen noch detaillierten CSS Pfad bunt gefärbt werden, müssen wir an der Stelle das !important verwenden, damit wir an der Stelle den Wert der anderen Styles überschreiben.

Das Ergebnis sieht dann so aus:

Farbiger Verlauf

Aber das Ganze geht noch viel cooler. Wir können z.B. den Balken einen Farbverlauf geben. Damit nun aber nicht alle Balken den gleichen Verlauf haben und auch bei 10% grün mit vor kommt, brauchen wir eine etwas elegantere Lösung. Dabei setzen wir die Verläufe anhand der 3 extra Klassen, die ich oben zu anfangs bereits erwähnt habe.

[pastacode lang=“css“ manual=“.product-reviews-procentual%20.progress-bar.progress-red%20%7B%0A%09background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20right%20top%2C%20color-stop(50px%2C%20%23c01313)%2C%20color-stop(150px%2C%20%23f3961d))%3B%0A%09background%3A%20-webkit-linear-gradient(left%2C%20%23c01313%2050px%2C%20%23f3961d%20150px)%3B%0A%09background%3A%20linear-gradient(to%20right%2C%20%23c01313%2050px%2C%20%23f3961d%20150px)%3B%0A%7D%0A.product-reviews-procentual%20.progress-bar.progress-orange%20%7B%0A%09background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20right%20top%2C%20color-stop(50px%2C%20%23c01313)%2C%20color-stop(150px%2C%20%23f3961d))%3B%0A%09background%3A%20-webkit-linear-gradient(left%2C%20%23c01313%2050px%2C%20%23f3961d%20150px)%3B%0A%09background%3A%20linear-gradient(to%20right%2C%20%23c01313%2050px%2C%20%23f3961d%20150px)%3B%0A%7D%0A.product-reviews-procentual%20.progress-bar.progress-green%20%7B%0A%09background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20right%20top%2C%20color-stop(50px%2C%20%23c01313)%2C%20color-stop(150px%2C%20%23f3961d)%2C%20color-stop(300px%2C%20%237AB317))%3B%0A%09background%3A%20-webkit-linear-gradient(left%2C%20%23c01313%2050px%2C%20%23f3961d%20150px%2C%20%237AB317%20300px)%3B%0A%09background%3A%20linear-gradient(to%20right%2C%20%23c01313%2050px%2C%20%23f3961d%20150px%2C%20%237AB317%20300px)%3B%0A%7D“ message=““ highlight=““ provider=“manual“/]

Das Ergebnis sieht dann so aus:

In dem Beispiel ist es jedoch auf Pixel basiert, d.h. es kann sein, dass man den Code nochmal für die mobile Ansicht etwas optimieren muss. Das kommt aber immer darauf an, wie die Seite aufgebaut ist. 🙂

Farbiger Verlauf ins Transparente

Als dritte Option könnte man den Balken auch noch von links (farblich) nach rechts (farblos) auslaufen lassen, was auch nicht gerade schlecht aussieht. Wobei das eigentlich nur eine etwas einfachere Variante vom vorherigen ist und der Verlauf geht einfach nur von einer Farbe ins hellgraue (sodass man den Balken auf dem weißen Hintergrund noch leicht sieht).

[pastacode lang=“css“ manual=“.product-reviews-procentual%20.progress-bar.progress-red%20%7B%0A%09background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20right%20top%2C%20from(%23c01313)%2C%20to(%23f0f0f0))%3B%0A%09background%3A%20-webkit-linear-gradient(left%2C%20%23c01313%200%25%2C%20%23f0f0f0%20100%25)%3B%0A%09background%3A%20linear-gradient(to%20right%2C%20%23c01313%200%25%2C%20%23f0f0f0%20100%25)%3B%0A%7D%0A.product-reviews-procentual%20.progress-bar.progress-orange%20%7B%0A%09background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20right%20top%2C%20from(%23c01313)%2C%20to(%23f0f0f0))%3B%0A%09background%3A%20-webkit-linear-gradient(left%2C%20%23c01313%C2%A00%25%2C%20%23f0f0f0%20100%25)%3B%0A%09background%3A%20linear-gradient(to%20right%2C%20%23c01313%C2%A00%25%2C%20%23f0f0f0%20100%25)%3B%0A%7D%0A.product-reviews-procentual%20.progress-bar.progress-green%20%7B%0A%09background%3A%20-webkit-gradient(linear%2C%20left%20top%2C%20right%20top%2C%20from(%23c01313)%2C%20to(%23f0f0f0))%3B%0A%09background%3A%20-webkit-linear-gradient(left%2C%20%23c01313%C2%A00%25%2C%20%23f0f0f0%20100%25)%3B%0A%09background%3A%20linear-gradient(to%20right%2C%20%23c01313%C2%A00%25%2C%20%23f0f0f0%20100%25)%3B%0A%7D“ message=““ highlight=““ provider=“manual“/]

Das Ergebnis sieht dann so aus:

Extra: Gesamtbewertung stylen

Wie man nun auf den Screenshots sieht, passt die Headline der Box „Gesamtbewertung“, an der linken Seite nicht mehr so super ins Bild. Wer nun also auch hier die Farbe austauschen will kann es mit folgendem CSS Snippet anpassen:

[pastacode lang=“css“ manual=“.product-reviews-procentual%20.rating-summary%20.summary-header%20%7B%0A%09background%3A%20%23c01313%3B%0A%7D“ message=““ highlight=““ provider=“manual“/]

Wer noch weitere Ideen oder Wünsche hat, darf natürlich gerne Kommentieren. 🙂

Vergleichtabelle mit farbigen Trennlinien

Quelle der Frage: affiliatetheme.io/forum/thema/vergleichtabelle-mit-farbigen-trennlinien/

folgt…

Alert-Boxen stylen

Quellen der Frage: affiliatetheme.io/forum/thema/alerts/ und affiliatetheme.io/forum/thema/alert-feld-farblich-anpassen/

Unsere Alert-Boxen (Beispiel) sind eine schöne Option um besonders wichtige Infromationen bzw. Hinweise innerhalb eines Textes hervorzuheben. Von Haus aus sehen die in 4 Farben möglichen Boxen so aus:

Der Grundaufbau ist dabei immer identisch. Die Boxen haben einen leichten grauen Rahmen rund rum und an der linken Seite einen etwas breiteren, farbigen Rand. Zudem sind die Texte in der gleichen Farbe gehalten und suggerieren dem Nutzer die „wichtigkeit“ der Inhalte. Wer nun lieber eine komplett farbige Box haben will, benötigt hier ebenfalls wieder die CSS Eigenschaft background.

Dafür können wir folgende CSS Codes verwenden.

[pastacode lang=“css“ manual=“.alert%20%7B%0A%09border%3A%20none%3B%0A%7D%0A.alert-success%20%7B%0A%09background%3A%20%237ab317%3B%20color%3A%20%23fff%3B%0A%7D%0A.alert-info%20%7B%0A%09background%3A%20%2319aece%3B%20color%3A%20%23fff%3B%0A%7D%0A.alert-warning%20%7B%0A%09background%3A%20%23f3961d%3B%20color%3A%20%23fff%3B%0A%7D%0A.alert-danger%20%7B%0A%09background%3A%20%23c01313%3B%20color%3A%20%23fff%3B%0A%7D“ message=““ highlight=““ provider=“manual“/]

Der erste Wert entfernt generell die Rahmen, damit sich diese nicht mit dem eigentlichen Hintergrund beißen. Bei den 4 weiteren wurde die Hintergrundfarbe gesetzt und damit man den Text auch lesen kann wurde dieser per color auf #fff, also weiß, gesetzt.

Das Ergebnis sieht dann so aus:

Alert-Boxen mit farbiger Headline

Ein Punkt den wir ebenfalls häufiger hören ist der Wunsch, dass bei einer solchen Box nur ein farbiger Balken als Header dient. Dazu müssen wir in der eigentlichen Alert-Box ein wenig mit HTML spielen. Anstelle des reinen Textes müssen wir eine Headline im Content der Box definieren. Der Shortcode dazu würden dann in etwa so aussehen:

[pastacode lang=“markdown“ manual=“%5Balert%20style%3D%22success%22%5D%3Ch2%3EAlert%20Success%3C%2Fh2%3E%0ALorem%20ipsum%20dolor%20sit%20amet%2C%20consectetuer%20adipiscing%20elit.%20Aenean%20commodo%20ligula%20eget%20dolor%5B%2Falert%5D%0A“ message=““ highlight=““ provider=“manual“/]

Nun können wir über CSS direkt die Headline (bitte den CSS Code bzgl. des h2-Tags ggf. an eure verwendete Headline-Tag anpassen) ansprechen und mit ein paar weiteren CSS Eigenschaften bekommen wir sehr auffällige Boxen.

Hierzu setzen wir als erstes einen allgemeinen Style auf die Alert-Boxen, zunächst ohne die eigentlichen Farben zu definieren.

[pastacode lang=“css“ manual=“.alert%20%7B%20padding%3A%2010px%3B%20%7D%0A.alert%20h2%20%7B%20padding%3A%2010px%3B%20margin%3A%20-10px%20-10px%2010px%20-10px%20!important%3B%20%7D“ message=““ highlight=““ provider=“manual“/]

In der ersten Zeile definieren wir das Padding, also den Innenabstand der eigentlichen Box auf 10px und reduzieren den von den standardmäßigen 15px damit es nicht zu aufgeblasen wird. In der nächsten Zeile sprechen wir direkt das h2-Tag an. Hier setzen wir ebenfalls einen Innenabstand und müssen nun über margin den Außenabstand ausrichten, sodass sich die Headline an die Box anpasst, da sie sich ansonsten an dem Innenabstand der äußeren Alert-Box orientieren würden.

Wir übergeben dem margin nun 4 Werte für (in der Reihenfolge) oben rechts unten links und ziehen Damit die Headline also -10px nach oben, rechts und links und geben ihr zudem einen Abstand nach unten i.H.v. 10px, damit der eigentliche Inhalt nicht direkt an der Headline hängt.

Da diese Vorgehensweise für CSS Anfänger etwas komplex sein könnte verweise ich an der Stelle mal auf unsere Margin und Padding bzw Box-Modell Anleitung.

Nun kümmern wir uns um die eigentliche Farbe. Und zwar ersetzen wir in der ersten Zeile den, bereits oben erwähnten, grauen Rahmen mit einem in der Farbe der jeweiligen Box und in der zweiten Zeile setzen wir nun den Hintergrund der Headline auf die entsprechende Farbe und definieren zudem noch die Farbe auf weiß, wie es bereits im vorherigen Beispiel auch gemacht wurde.

[pastacode lang=“css“ manual=“.alert-success%20%7B%20border%3A%201px%20solid%20%237ab317%3B%20%7D%0A.alert-success%20h2%20%7B%20background%3A%20%237ab317%3B%20color%3A%20%23fff%3B%20%7D%0A.alert-info%20%7B%20border%3A%201px%20solid%20%2319aece%3B%20%7D%0A.alert-info%20h2%20%7B%20background%3A%20%2319aece%3B%20color%3A%20%23fff%3B%20%7D%0A.alert-warning%20%7B%20border%3A%201px%20solid%20%23f3961d%3B%20%7D%0A.alert-warning%20h2%20%7B%20background%3A%20%23f3961d%3B%20color%3A%20%23fff%3B%20%7D%0A.alert-danger%20%7B%20border%3A%201px%20solid%20%23c01313%3B%20%7D%0A.alert-danger%20h2%20%7B%20background%3A%20%23c01313%3B%20color%3A%20%23fff%3B%20%7D“ message=““ highlight=““ provider=“manual“/]

Das Ergebnis sieht dann so aus:

Natürlich kann man hier auch noch viel mehr machen, wie einen ganz leichten Hintergrund der kompletten Box, aber ich denke für das erste Verständnis dieser Optimierung reicht es bis hier hin. 🙂

…

Filter-Box (Page Builder) umfärben

Quellen der Frage: n/a

Wer im Page Builder den Filter benutz wird sehen, dass die Box drumherum von Haus aus etwas CSS hat. Einen sehr hellgrauen Hintergrund und ein etwas dunkleren Border.

Wer hier nun etwas anders möchte kann es mit Hilfe des folgenden CSS Codes anpassen. Zum Beispiel einen grellen Rahmen und einen ganz leichten Hintergrund.

[pastacode lang=“css“ manual=“.filterform.form-inline%20%7B%0A%20%20%20%20background%3A%20%23faecec%3B%0A%20%20%20%20border%3A%202px%20solid%20%23c01313%3B%0A%7D“ message=““ highlight=““ provider=“manual“/]

Das Ergebnis sieht dann so aus:

Alternativ kann natürlich auch der Wunsch aufkommen, dass der Bereich komplett weiß, also ohne Hintergrund und Rahmen styled wird. Hier müssen ein paar weitere Anpassungen machen.

Als erstes wir den background und den border auf none, sodass dieser also komplett verschwindet.

Bei dem nächsten Code-Abschnitt werden dann die Größen der Boxen noch etwas angepasst, sodass diese über die komplette Breite laufen. Zudem wird der Rahmen auf der linken Seite entfern, damit wenn sich 2 Boxen berühren kein doppelter Rahmen vorhanden ist. Damit die erste Box aber links nicht offen ist wird beim nächsten Style der ersten Box erneut ein Rahmen gesetzt.

Abschließend positionieren wir noch den Button durch das entfernen des Innenabstands und geben ihn über den Außenabstand etwas Luft zu den oberen Boxen.

[pastacode lang=“css“ manual=“.filterform.form-inline%20%7B%0A%20%20%20%20background%3A%20none%3B%0A%20%20%20%20border%3A%20none%3B%0A%7D%0A.filterform.form-inline%20.form-group%20%7B%0A%09margin%3A%200%3B%0A%09width%3A%2025%25%3B%0A%09border-left%3A%200%3B%0A%7D%0A.filterform.form-inline%20.form-group%3Afirst-of-type%20%7B%0A%09border-left%3A%201px%20solid%20%23f0f0f0%3B%0A%7D%0A.filterform.form-inline%20.form-group.form-group-block%20%7B%0A%09padding%3A%200%3B%0A%09margin-top%3A%2010px%3B%0A%7D“ message=““ highlight=““ provider=“manual“/]

Das Ergebnis sieht dann so aus:

Content und Sidebar trennen (Tiles Layout)

Quellen der Frage: https://affiliatetheme.io/forum/thema/sidebar-von-content-trennen/

folgt…

„Wichtig Infos“-Boxen

Quellen der Frage: https://affiliatetheme.io/forum/thema/obere-box-border-mit-css-anpassen/

folgt…

Hintergrundbilder

Quellen der Frage: https://affiliatetheme.io/forum/thema/hintergrundbild-oder-muster-fuer-eine-sektion-im-pagebuilder-definieren/

folgt…

Vor-/Nachteil-Boxen

Quellen der Frage: https://affiliatetheme.io/forum/thema/obere-box-border-mit-css-anpassen/

folgt…