Veröffentlichungsdatum: 21. Januar 2019
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
Im Fussbereich einer Webseite werden die Inhalte in der Regel farbig abgesetzt, wozu sich ein Inhaltsbereich-Element anbietet.
Die BASE (Mobile First) Projektgrundlage liefert Ihnen hierzu bereits eine dynamische Umsetzung im Standard.
Über die CSS-Datei für Farben (colors.scss) kann im Feld "Hintergrundfarbe des Fußbereiches" eine Farbe definiert werden. Sollte dies eine dunkle Farbe sein, kann unterhalb des Feldes die Option "Weiße Schrift im Fußbereich nutzen" aktiviert werden (Auswahl auf "Ja" stellen). In den meisten Fällen reicht dies aus und wird in der CSS-Untervariante für die Hintergrundfarbe für Inhaltsbereiche wie folgt abgefragt:
/*@wCssFragment{class:elementSectionBackgroundColor;variant:610;caption:Hintergrund Fußbereich;caption-en:Footer;preview-color:#{$backgroundColorFooter};livepreview:yes;isdarkbackground:yes;contentgroups:content5}*/ .elementSectionBackgroundColor_var610 { $isDarkBackgroundFooter:yes !default; $backgroundColorFooter:$baseColorDarker !default; background-color:$backgroundColorFooter; @if $isDarkBackgroundFooter == yes { @include colorsOnDarkBackground; } }
Sie können für die Elemente im Fußbereich auch pro Element (z.B. Überschrift, Fliesstext, etc.) eine Variante mit anderer Schriftfarbe wählen.
Oder Sie definieren eine eigene Untervariante für die Hintergrundfarbe und geben dort über CSS-Selektoren die gewünschte Schriftfarbe mit (siehe nachfolgendes Beispiel).
/*@wCssFragment{class:elementSectionBackgroundColor;variant:10000;caption:Hintergrund Fußbereich dunkel, Schrift hell;caption-en:Footer;preview-color:#{$backgroundColorFooter};livepreview:yes;isdarkbackground:yes;contentgroups:content5}*/ .elementSectionBackgroundColor_var10000 { background-color:#3137A5; h1, h2, h3, h4, a, p, .elementText {color:#E7CF82 !important;} a.extern:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/extern.svg?stroke=#E7CF82")} a.phone:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/extern.svg?stroke=#E7CF82")} a.mail:before {background-image:url("#{$wGlobalProjectPath}/wGlobal/layout/images/links/extern.svg?stroke=#E7CF82")} /* weitere Definitionen individuell erweitern */ }