Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen

Die Umsetzung von Projekten erfordert teilweise unterschiedliche Farben in den Projekten. Dies kann z.B. für Sprachprojekte und Multi-Projekte erforderlich sein oder auch zur Umsetzung anderer alternative Darstellungen (Kontrastanpassung, Farbgebung, etc.).

Für eine Umsetzung abweichender Farben bzw. CSS-Definitionen gibt es unterschiedliche Ansätze.

Sie können z.B. in den SCSS-Dateien die Selektoren abhängig von der Klasse setzen, welche im html-Tag gesetzt ist.

Eine andere gute Möglichkeit ist die Umsetzung über unterschiedliche color-SCSS Dateien.
Fragen Sie hierzu in der pre.php des globalen Projektes den aktuellen Projektpfad ab und setzen dann über die wPageCur::setVar Framework-Funktion den wCSSPath anders. Hierzu nachfolgend entsprechende Beispiele zur Veranschaulichung.

Die auf diese Weise gesetzte Variable muss vom CSS-Pfad im globalen styles-Pfad abliegen und einen fest definierten Dateinamen, beginnend mit design_varXXX.css tragen (XXX steht für die entsprechende Benennung).

Beispielpfade:
[IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/design_var2.css
[IHR-GLOBALES-PROJEKT]/wGlobal/layout/styles/design_varABC.css

Beispiel 1: Unterschiedliche Projektfarben

Innerhalb einer Multi-Projekt Umsetzung sollen die Projekte farblich unterschiedlich gestaltet werden. Setzen Sie hierzu über die pre.php unterschiedliche wCSSPath-Variablen.

Beispiel: Auszug aus der pre.php zu projektabhängiger Design-CSS zur Farbgebung

// nach dem Aufruf des /weblication/grid.php Includes setzen

  
if(wProjectCur::getPath() == '/projekt2'){
    
wPageCur::setVar('wCSSPath''/multi-wGlobal/wGlobal/layout/styles/design_var2.css');
  }

In der Projekt spezifischen design-CSS können Sie dann u.a. eine andere Color-SCSS Datei importieren und somit nutzen, in welcher Sie andere Farben für Texte, Überschriften, Navigationen, etc. definieren.

Beispiel: Inhalt der design_var2.css

/* Haupt-CSS */

$baseType: mobileFirst;
$version: 1.0.31;
$cssInterpreter: wCss2; /* Zu verwendender SASS-Interpreter [sassc(sassc)|sass(sass, je nach Ruby-Version sehr langsam)|wCss2]*/
$wAddLinesSource: yes; /* Zeigt Administratoren beim Einsatz von wCss2 die Zeilennummern und die Quelldateien in der Entwicklerkonsole des Browsers an */ 
$wGlobalProjectPath: '/multi-wGlobal';

$wShowColorsInPanel:no; /* Farbanpassung über das Panel aufrufbar, ab Version 14 */
$wShowFontsInPanel:no; /* Schriftanpassung über das Panel aufrufbar, ab Version 14 */

@import 'breakpoints.scss';
@import 'colors_p2.scss';
@import 'fonts.scss';
@import 'mixins/*';
@import 'globals/*';
@import 'includes/*';
@import 'navigations/*';
@import 'page.scss';
@import 'html.scss';
@import 'items/*';
@import 'objects/*';
@import 'lists/*';
@import 'decorators/*';
@import 'additional.scss';

Beispiel 2: Unterschiedliche Farben für eine Kontrastanpassung

Innerhalb eines Projektes soll für eine barrierearme Umsetzung eine Kontrastanpassung realisiert werden.

Das Weblic® Kontrastanpassung bildet hierfür die Grundlage. Nach dessen Installation kann das Element zur Kontrastanpassung z.B. in der (vorangestellten) Kopfleiste eingefügt werden. Dies ermöglicht dem Seitenbesucher per Klick auf das Kontrast-Symbol ein Umschalten auf Kontrastfarben (Setzen eines technisch erforderlichen Cookies).

Um abhängig vom Cookie-Wert andere CSS-Definitionen zu laden, setzen Sie hierzu über die pre.php unterschiedliche wCSSPath-Variablen. Zudem wird eine eigene Cache-Variante für die Kontrast-Darstellung genutzt.

Beispiel: Auszug aus der pre.php zu projektabhängiger Design-CSS zur Kontrasanpassung

// nach den Includes der grid.php und wMyProject.php setzen

  // Falls eine alternative CSS genutzt werden soll
  
if(wRequest::getCookie('websitecontrast') == '1'){
    
wPageCur::setVar('wCSSPath''/default-wGlobal/wGlobal/layout/styles/design_varWAI.css');    
    
$preVars['cacheVariant'] = 'design_varWAI'
  }

In der Projekt spezifischen design-CSS können Sie dann u.a. eine andere Color-SCSS Datei importieren und somit nutzen, in welcher Sie andere Farben für Texte, Überschriften, Navigationen, etc. definieren.

Beispiel: Inhalt der design_varWAI.css

/* Haupt-CSS */

$baseType: mobileFirst;
$version: 1.0.31;
$cssInterpreter: wCss2; /* Zu verwendender SASS-Interpreter [sassc(sassc)|sass(sass, je nach Ruby-Version sehr langsam)|wCss2]*/
$wAddLinesSource: yes; /* Zeigt Administratoren beim Einsatz von wCss2 die Zeilennummern und die Quelldateien in der Entwicklerkonsole des Browsers an */ 
$wGlobalProjectPath: '/default-wGlobal';

$wShowColorsInPanel:no; /* Farbanpassung über das Panel aufrufbar, ab Version 14 */
$wShowFontsInPanel:no; /* Schriftanpassung über das Panel aufrufbar, ab Version 14 */

@import 'breakpoints.scss';
@import 'colors_wai.scss';
@import 'fonts.scss';
@import 'mixins/*';
@import 'globals/*';
@import 'includes/*';
@import 'navigations/*';
@import 'page.scss';
@import 'html.scss';
@import 'items/*';
@import 'objects/*';
@import 'lists/*';
@import 'decorators/*';
@import 'additional.scss';