Unterschiedliche CSS-Definitionen, z.B. zu Farben, in Projekten nutzen
Veröffentlichungsdatum: 03. März 2020
Änderungsdatum: 08. August 2023
Projektgrundlage: BASE
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. Dieser Artikel zeigt zwei mögliche Varianten einer Umsetzung auf.
Variante 1: Umsetzung über Selektoren
Sie können z.B. in den SCSS-Dateien die Selektoren abhängig von der Klasse setzen, welche im html-Tag gesetzt ist.
Nehmen wir ein Beispiel eines Multiprojektes, welches hinsichtlich der Inhaltsprojekte wie folgt strukturiert ist:
/de
/de-wGlobal
/wissen
/wissen-wGlobal
/multi-wAssets
/multi-wGlobal
Um dem Kopfbereich eine andere Hintergrundfarbe zu geben, definieren Sie über den Selektor zum html-Tag für die Klasse des Inhaltsprojektes (.project-wissen) eine andere Farbe zu #blockHeader.
Beispiel: Auszug aus der page.scss
/* ... */ /* Gestaltung der Kopfbereichs */ #blockHeader { @extend .clearAfter; width:100%; padding:0; background:$backgroundColorHeader; html.project-wissen & { background:$baseColorPrimary3; } /* ... */ }
Variante 2: Umsetzung über unterschiedliche Farb-CSS-Dateien
Wollen Sie allgemeiner in der Darstellung unterscheiden, ist die Umsetzung über unterschiedliche color-SCSS Dateien zu empfehlen.
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');
}
// wenn das CSS auch im Editor erforderlich ist, dann auch in der preEditor.php setzen
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 */ $wShowFontsInPanel:no; /* Schriftanpassung über das Panel aufrufbar */ @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';