Hintergrundfarbe und Schriftfarbe in Inhaltsbereichen (z.B. Fußbereich)

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.

Maske colors.scss zu Farben im Fußbereich
Maske colors.scss zu Farben im Fußbereich

Ü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:

Beispiel: Auszug aus der elementSection.scss zur Untervariante 610 für Hintergrundfarbe

/*@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;
  }
}

Andere Schriftfarbe im Fußbereich verwenden

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

Beispiel: Auszug aus der elementSection.scss zur Untervariante 610 für Hintergrundfarbe

/*@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 */
}