So erstellen Sie eine weitere Primärfarbe

Öffnen Sie über die CSS-Styles die Farben (colors.scss) und ergänzen Sie über die Quelltextanzeige eine weitere Primärfarbe.

Quelltext
Editor
Quelltext
Quelltextansicht color.scss
Editor
Editoransicht color.scss

Einsetzen der Primärfarbe

Da die Primärfarbe in den Weblic-Varianten automatisch noch keine Verwendung findet, können diese ganz komfortabel ergänzen.


Beispiel 1: Ergänzen der Farb-Variante in den Überschriften

  • Öffnen Sie die Überschriften (elementHeadline.scss) zum Bearbeiten
  • Scrollen Sie zu der Untervariante Color
  • Duplizieren Sie die Untervarinate Primärfarbe 1 oder Primärfarbe 2
  • Ersetzen Sie in der neuen Variante nun die Variable $baseColorPrimary1 oder $baseColorPrimary2 durch $baseColorPrimary3

Auszug elementHeadline.scss

/*@wCssFragment{class:elementHeadlineColor;variant:92;caption:Primärfarbe 2;caption-en:Primary color 2;preview-color:#{$baseColorPrimary2};livepreview:yes}*/
.elementHeadlineColor_var92 {
  
  > h1, > h2, > h3, > h4, > h5, > h6, > .h1, > .h2, > .h3, > .h4, > .h5, > .h6, .wEditorWysiwyg {
    color:$baseColorPrimary2 !important;
  }  
}

/*dupliziert und angepasst */
/*@wCssFragment{class:elementHeadlineColor;variant:10000;caption:Primärfarbe 3;caption-en:Primary 3;preview-color:#{$baseColorPrimary3};livepreview:yes}*/
.elementHeadlineColor_var10000 {
  
  > h1, > h2, > h3, > h4, > h5, > h6, > .h1, > .h2, > .h3, > .h4, > .h5, > .h6, .wEditorWysiwyg {
    color:$baseColorPrimary3 !important;
  }  
}

Beispiel 2: Ergänzen der Farb-Variante in den Inhaltsboxen

  • Öffnen Sie die Inhaltsboxen (elementBox.scss) zum Bearbeiten
  • Scrollen Sie zu der Untervariante elementBoxBackgroundColor
  • Duplizieren Sie die Untervarinate Primärfarbe 1 oder Primärfarbe 2
  • Ersetzen Sie in der neuen Variante nun die Variable $baseColorPrimary1 oder $baseColorPrimary2 durch $baseColorPrimary3

Auszug elementBox.scss

/*@wCssFragment{class:elementBoxBackgroundColor;variant:92;caption:Primärfarbe 2;caption-en:Primary color 2;preview-color:#{$baseColorPrimary2};livepreview:yes;isdarkbackground:yes}*/
.elementBoxBackgroundColor_var92 {
    
  -w-editmaskExtendedWebtag-layoutBackgroundOpacity:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,clear=both,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundOpacity,selectable="0(Ohne Transparenzeffekt)|50(Halbtransparent)",caption="Transparenz",livepreviewdefault=yes';  
  -w-editmaskExtendedWebtag-layoutBackgroundBlur:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundBlur,selectable="0(Ohne Unschärfeeffekt)|8(Unschärfeeffekt)",caption="Unschärfe",livepreviewdefault=yes';        
  
  --backgroundColorOrigin:$baseColorPrimary2;
  --backgroundColorRgb:rgbSplit($baseColorPrimary2);  
  --backgroundColor:$baseColorPrimary2; 

  &.elementBoxBackgroundOpacity_var50 {
    --backgroundColor:rgba($baseColorPrimary2, 0.5);  
  }  
  
  background-color:var(--backgroundColor);  
  
  
  &.elementBoxBackgroundBlur_var8 {
    backdrop-filter:blur(8px);
  }
  
  @include colorsOnDarkBackground;
}

/*dupliziert und angepasst*/
/*@wCssFragment{class:elementBoxBackgroundColor;variant:93;caption:Primärfarbe 3;caption-en:Primary color 3;preview-color:#{$baseColorPrimary3};livepreview:yes;isdarkbackground:yes}*/
.elementBoxBackgroundColor_var93 {
    
  -w-editmaskExtendedWebtag-layoutBackgroundOpacity:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,clear=both,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundOpacity,selectable="0(Ohne Transparenzeffekt)|50(Halbtransparent)",caption="Transparenz",livepreviewdefault=yes';  
  -w-editmaskExtendedWebtag-layoutBackgroundBlur:'positionInEditmask=insertafter:elementBoxBackgroundColor,active=admin,decorators=col2,inputStyle="width:100%",editor=selectCssClassVariant,cssClassMain=elementBox,addIdVariant=0,allowAdaptVariant=0,allowInstallVariant=0,cssClass=elementBoxBackgroundBlur,selectable="0(Ohne Unschärfeeffekt)|8(Unschärfeeffekt)",caption="Unschärfe",livepreviewdefault=yes';        
  
  --backgroundColorOrigin:$baseColorPrimary3;
  --backgroundColorRgb:rgbSplit($baseColorPrimary3);  
  --backgroundColor:$baseColorPrimary3; 

  &.elementBoxBackgroundOpacity_var50 {
    --backgroundColor:rgba($baseColorPrimary3, 0.5);  
  }  
  
  background-color:var(--backgroundColor);  
  
  
  &.elementBoxBackgroundBlur_var8 {
    backdrop-filter:blur(8px);
  }
  
  @include colorsOnDarkBackground;
}

Allgemeine CSS-Deklaration

span {color:$baseColorPrimary3}
div {background-color:$baseColorPrimary3}
...