Übersicht der LESS-Variablen in Community Framework 2

  • WCF 2

Achtung: Diese Seite ist nur noch Teil eines Archivs und wird in Zukunft entfernt.

Bereits für Community Framework 1 gab es Variablen im Stileditor, die man nutzen konnte, um sich einerseits Tipparbeit zu sparen, andererseits aber auch, um einfache Änderungen über den Stileditor selbst zuzulassen, die sich auch auf die eigenen CSS-Deklarationen auswirken.

Mit Community Framework wird das noch etwas geändert, da mit LESS nun wesentlich besser mit solchen Variablen gearbeitet werden kann. LESS selbst nämlich unterstützt von Haus aus schon Variablen, die man auch selbst definieren kann. Diese werden immer mit einem vorangestellten @ geschrieben.

In diesem Artikel werde ich die bereits mit Community Framework 2 bzw. Burning Board 4 mitgelieferten Variablen nennen und angeben, wo diese greifen.

Globale Einstellungen
useFluidLayout:
Standardwert: 1
Verwendung: Legt fest, ob eine flexible Breite genutzt wird (1) oder nicht (0).

wcfLayoutMinWidth:
Standardwert: 980px
Verwendung: Legt die Mindestbreite der Seite fest.

wcfLayoutMaxWidth:
Standardwert: 90%
Verwendung: Legt die Maximalbreite der Seite fest.

wcfLayoutFixedWidth:
Standardwert: 1200px
Verwendung: Legt die statische Breite fest.

pageLogo:
Standardwert: leer
Verwendung: Legt den Pfad/Namen der Logo-Grafik fest.

wcfBaseFontSize:
Standardwert: 13px
Verwendung: Legt die Standardschriftgröße fest.

wcfBaseFontFamily:
Standardwert: "Trebuchet MS", Arial, sans-serif
Verwendung: Legt die Standardschriftart fest.

Seite
wcfPageBackgroundColor:
Standardwert: rgba(224, 224, 224, 1)
Verwendung: Legt die Hintergrundfarbe der Seite fest.

wcfPageColor:
Standardwert: rgba(102, 102, 102, 1)
Verwendung: Legt die Schriftfarbe der Seite fest.

wcfPageLinkColor:
Standardwert: rgba(63, 127, 191, 1)
Verwendung: Legt die Linkfarbe der Seite fest.

wcfPageLinkHoverColor:
Standardwert: rgba(15, 79, 143, 1)
Verwendung: Legt die Linkfarbe der Seite beim Hover fest.

Inhaltsbereich
wcfContentBackgroundColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Hintergrundfarbe für Hauptbereiche fest.

wcfColor:
Standardwert: rgba(102, 102, 102, 1)
Verwendung: Legt die Schriftfarbe für Hauptbereiche fest.

wcfDimmedColor:
Standardwert: rgba(136, 136, 136, 1)
Verwendung: Legt die Schriftfarbe von weniger wichtigen Inhalten fest.

wcfExtraDimmedColor:
Standardwert: lighten(@wcfDimmedColor, 20%)
Erklärung des Standardwertes: Der Wert von @wcfDimmedColor um 20% aufgehellt.
Nicht im Stileditor einstellbar!*

wcfLinkColor:
Standardwert: rgba(63, 127, 191, 1)
Verwendung: Legt die Schriftfarbe von Links fest.

wcfLinkHoverColor:
Standardwert: rgba(15, 79, 143, 1)
Verwendung: Legt die Schriftfarbe von Links beim Hover fest.

Container
wcfContainerBackgroundColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Hintergrundfarbe für die ersten bzw. allgemeinen Container fest.

wcfContainerAccentBackgroundColor:
Standardwert: rgba(249, 249, 249, 1)
Verwendung: Legt die Hintergrundfarbe für die zweiten bzw. hervorgehobenen Container fest.

wcfContainerHoverBackgroundColor:
Standardwert: rgba(244, 244, 244, 1)
Verwendung: Legt die Hintergrundfarbe für Container beim Hover fest.

wcfContainerBorderColor:
Standardwert: rgba(221, 221, 221, 1)
Verwendung: Legt die Rahmenfarbe von Containern fest.

wcfContainerBorderRadius:
Standardwert: 0
Verwendung: Legt die Abrundung von Ecken von Containern fest.
Nicht im Stileditor einstellbar!*

wcfSidebarBackgroundColor:
Standardwert: @wcfContainerHoverBackgroundColor
Verwendung: Legt die Hintergrundfarbe der Seitenleiste fest.
Nicht im Stileditor einstellbar!*

Benutzerleiste
wcfUserPanelBackgroundColor:
Standardwert: rgba(45, 45, 45, 1)
Verwendung: Legt die Hintergrundfarbe der Benutzerleiste (des Benutzermenüs) fest.

wcfUserPanelColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Schriftfarbe der Benutzerleiste (des Benutzermenüs) fest.

wcfUserPanelHoverBackgroundColor:
Standardwert: rgba(60, 60, 60, 1)
Verwendung: Legt die Hintergrundfarbe der Benutzerleiste (des Benutzermenüs) beim Hover fest.
Nicht im Stileditor einstellbar!*

wcfUserPanelHoverColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Schriftfarbe der Benutzerleiste (des Benutzermenüs) beim Hover fest.

Tabellarische Auflistungen
wcfTabularBoxBackgroundColor:
Standardwert: rgba(63, 127, 191, 1)
Verwendung: Legt die Hintergrundfarbe von Tabellen fest.

wcfTabularBoxColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Schriftfarbe von Tabellen fest.

wcfTabularBoxHoverColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Schriftfarbe von Tabellen beim Hover fest.

Buttons
wcfButtonBackgroundColor:
Standardwert: rgba(249, 249, 249, 1)
Verwendung: Legt die Hintergrundfarbe von allgemeinen Buttons fest.

wcfButtonBorderColor:
Standardwert: rgba(221, 221, 221, 1)
Verwendung: Legt die Rahmenfarbe von allgemeinen Buttons fest.

wcfButtonColor:
Standardwert: rgba(102, 102, 102, 1)
Verwendung: Legt die Schriftfarbe von allgemeinen Buttons fest.

wcfButtonHoverBackgroundColor:
Standardwert: rgba(241, 241, 241, 1)
Verwendung: Legt die Hintergrundfarbe von allgemeinen Buttons beim Hover fest.

wcfButtonHoverBorderColor:
Standardwert: rgba(224, 224, 224, 1)
Verwendung: Legt die Rahmenfarbe von allgemeinen Buttons beim Hover fest.

wcfButtonHoverColor:
Standardwert: rgba(102, 102, 102, 1)
Verwendung: Legt die Schriftfarbe von allgemeinen Buttons beim Hover fest.

wcfButtonPrimaryBackgroundColor:
Standardwert: rgba(211, 232, 254, 1)
Verwendung: Legt die Hintergrundfarbe von hervorgehobenen Buttons fest.

wcfButtonPrimaryBorderColor:
Standardwert:rgba(136, 194, 255, 1)
Verwendung: Legt die Rahmenfarbe von hervorgehobenen Buttons fest.

wcfButtonPrimaryColor:
Standardwert: rgba(102, 153, 204, 1)
Verwendung: Legt die Schriftfarbe von hervorgehobenen Buttons fest.

wcfButtonPrimaryHoverBackgroundColor:
Standardwert: darken(@wcfButtonPrimaryBackgroundColor, 3%)
Erklärung des Standardwertes: Der Wert von @wcfButtonPrimaryBackgroundColor um 3% verdunkelt.
Verwendung: Legt die Hintergrundfarbe von hervorgehobenen Buttons beim Hover fest.
Nicht im Stileditor einstellbar!*

wcfButtonPrimaryHoverBorderColor:
Standardwert: darken(@wcfButtonPrimaryBorderColor, 10%)
Erklärung des Standardwertes: Der Wert von @wcfButtonPrimaryBorderColor um 10% verdunkelt.
Verwendung: Legt die Rahmenfarbe von hervorgehobenen Buttons beim Hover fest.
Nicht im Stileditor einstellbar!*

wcfButtonPrimaryHoverColor:
Standardwert: @wcfButtonPrimaryColor
Verwendung: Legt die Schriftfarbe von hervorgehobenen Buttons beim Hover fest.
Nicht im Stileditor einstellbar!*

Eingabeelemente in Formularen
wcfInputBackgroundColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Hintergrundfarbe von Eingabefeldern fest.

wcfInputBorderColor:
Standardwert: rgba(204, 204, 204, 1)
Verwendung: Legt die Rahmenfarbe von Eingabefeldern fest.

wcfInputColor:
Standardwert: rgba(102, 102, 102, 1)
Verwendung: Legt die Schriftfarbe von Eingabefeldern fest.

wcfInputHoverBackgroundColor:
Standardwert: rgba(239, 247, 255, 1)
Verwendung: Legt die Hintergrundfarbe von Eingabefeldern beim Hover fest.

wcfInputHoverBorderColor:
Standardwert: rgba(198, 222, 248, 1)
Verwendung: Legt die Rahmenfarbe von Eingabefeldern beim Hover fest.

Sonstiges
Alle hier angegeben Variablen sind nicht im Stileditor selbst einstellbar.

Allgemein
wcfBaseLineHeight:
Standardwert: 1.28
Verwendung: Legt die Zeilenhöhe der Seite fest.

wcfLabelColor:
Standardwert: @wcfColor
Verwendung: Legt die Schriftfarbe von Labels fest.

wcfHeadlineColor:
Standardwert: @wcfColor
Verwendung: Legt die Schriftfarbe von Überschriften fest.

wcfHeadlineFontFamily:
Standardwert: "Trebuchet MS", Arial, sans-serif
Verwendung: Legt die Schriftart von Überschriften fest.

wcfHeadlineFontSize:
Standardwert: 1.7rem
Verwendung: Legt die Schriftgröße von Überschriften fest.

wcfSubHeadlineFontSize:
Standardwert: 1.4rem
Verwendung: Legt die Schriftgröße von Unter-Überschriften fest.

wcfTitleFontSize:
Standardwert: 1.2rem
Verwendung: Legt die Schriftgröße von Titeln fest.

wcfSmallFontSize:
Standardwert: .85rem
Verwendung: Legt die Schriftgröße von kleinen Texten fest (normal mit dem Tag <small> versehen).

wcfHighlightBackgroundColor:
Standardwert: rgba(255, 255, 102, 1)
Verwendung: Legt die Hintergrundfarbe von gehighlighteten Inhalten fest (z.B. Suchtexte).

Dropdown-Menüs
wcfDropdownBackgroundColor:
Standardwert: @wcfContentBackgroundColor
Verwendung: Legt die Hintergrundfarbe von Dropdown-Menüs fest.

wcfDropdownBorderColor:
Standardwert: @wcfContainerBorderColor
Verwendung: Legt die Rahmenfarbe von Dropdown-Menüs fest.

wcfDropdownColor:
Standardwert: @wcfColor
Verwendung: Legt die Schriftfarbe von Dropdown-Menüs fest.

wcfDropdownHoverBackgroundColor:
Standardwert: @wcfContainerHoverBackgroundColor
Verwendung: Legt die Hintergrundfarbe von Dropdown-Menüs beim Hover fest.

Warnmeldungen
wcfWarningBackgroundColor:
Standardwert: rgba(255, 255, 221, 1)
Verwendung: Legt die Hintergrundfarbe von Warnmeldungen fest.

wcfWarningBorderColor:
Standardwert: rgba(204, 204, 0, 1)
Verwendung: Legt die Rahmenfarbe von Warnmeldungen fest.

wcfWarningColor:
Standardwert: rgba(153, 153, 0, 1)
Verwendung: Legt die Schriftfarbe von Warnmeldungen fest.

Fehlermeldungen
wcfErrorBackgroundColor:
Standardwert: rgba(255, 238, 238, 1)
Verwendung: Legt die Hintergrundfarbe von Fehlermeldungen fest.

wcfErrorBorderColor:
Standardwert: rgba(255, 153, 153, 1)
Verwendung: Legt die Rahmenfarbe von Fehlermeldungen fest.

wcfErrorColor:
Standardwert: rgba(204, 0, 0, 1)
Verwendung: Legt die Schriftfarbe von Fehlermeldungen fest.

Erfolgsmeldungen
wcfSuccessBackgroundColor:
Standardwert: rgba(238, 255, 238, 1)
Verwendung: Legt die Hintergrundfarbe von Erfolgsmeldungen fest.

wcfSuccessBorderColor:
Standardwert: rgba(0, 204, 0, 1)
Verwendung: Legt die Rahmenfarbe von Erfolgsmeldungen fest.

wcfSuccessColor:
Standardwert: rgba(0, 153, 0, 1)
Verwendung: Legt die Schriftfarbe von Erfolgsmeldungen fest.

Infomeldungen
wcfInfoBackgroundColor:
Standardwert: rgba(221, 238, 255, 1)
Verwendung: Legt die Hintergrundfarbe von Infomeldungen fest.

wcfInfoBorderColor:
Standardwert: rgba(153, 187, 238, 1)
Verwendung: Legt die Rahmenfarbe von Infomeldungen fest.

wcfInfoColor:
Standardwert: rgba(102, 136, 187, 1)
Verwendung: Legt die Schriftfarbe von Infomeldungen fest.

Tooltips
wcfTooltipBackgroundColor:
Standardwert: rgba(0, 0, 0, .8)
Verwendung: Legt die Hintergrundfarbe von Tooltips fest.

wcfTooltipColor:
Standardwert: rgba(255, 255, 255, 1)
Verwendung: Legt die Schriftfarbe von Tooltips fest.

Abstände
wcfGapTiny:
Standardwert: 4px
Verwendung: Legt den sehr kleinen Abstand fest.

wcfGapSmall:
Standardwert: 7px
Verwendung: Legt den kleinen Abstand fest.

wcfGapMedium:
Standardwert: 14px
Verwendung: Legt den mittleren Abstand fest.

wcfGapLarge:
Standardwert: 21px
Verwendung: Legt den großen Abstand fest.

Hauptmenü
wcfMainMenuBackgroundColor:
Standardwert: @wcfContainerAccentBackgroundColor
Verwendung: Legt die Hintergrundfarbe der Hauptmenü-Elemente fest.

wcfMainMenuHoverBackgroundColor:
Standardwert: @wcfContainerAccentBackgroundColor
Verwendung: Legt die Hintergrundfarbe der Hauptmenü-Elemente beim Hover fest.

wcfMainMenuColor:
Standardwert: @wcfColor
Verwendung: Legt die Schriftfarbe der Hauptmenü-Elemente fest.

wcfMainMenuActiveColor:
Standardwert: @wcfLinkColor
Verwendung: Legt die Schriftfarbe des aktiven Hauptmenü-Elements fest.

Navigation
wcfNavigationHeaderBackgroundColor:
Standardwert: @wcfContentBackgroundColor
Verwendung: Legt die Hintergrundfarbe der Navigation im Kopfbereich fest.

wcfNavigationFooterBackgroundColor:
Standardwert: @wcfContainerAccentBackgroundColor
Verwendung: Legt die Hintergrundfarbe der Navigation im Fußbereich fest.

Moderation
wcfSelectedBackgroundColor:
Standardwert: rgba(255, 255, 200, 1)
Verwendung: Legt die Hintergrundfarbe von markierten Elementen fest.

wcfSelectedColor:
Standardwert: @wcfColor
Verwendung: Legt die Schriftfarbe von markierten Elementen fest.

wcfDeletedBackgroundColor:
Standardwert: rgba(255, 238, 238, 1)
Verwendung: Legt die Hintergrundfarbe von gelöschten Elementen fest.

wcfDeletedColor:
Standardwert: rgba(204, 0, 0, 1)
Verwendung: Legt die Schriftfarbe von gelöschten Elementen fest.

wcfDisabledBackgroundColor:
Standardwert: rgba(238, 255, 238, 1)
Verwendung: Legt die Hintergrundfarbe von deaktiverten Elementen fest.

wcfDisabledColor:
Standardwert: rgba(0, 153, 0, 1)
Verwendung: Legt die Schriftfarbe von deaktiverten Elementen fest.

Rundungen
wcfButtonBorderRadius
Standardwert: 15px
Verwendung: Legt die Rundung border-radius von Buttons fest.

wcfSmallButtonBorderRadius
Standardwert: 3px
Verwendung: Legt die Rundung border-radius von kleinen Buttons fest.

wcfInputBorderRadius
Standardwert: 0
Verwendung: Legt die Rundung border-radius von Eingabefeldern fest.

Schatten
wcfTextShadowLightColor
Standardwert: rgba(255, 255, 255, .8)
Verwendung: Legt die Farbe von hellen Schatten (auf hellem Hintergrund) fest.

wcfTextShadowDarkColor
Standardwert: rgba(0, 0, 0, .8)
Verwendung: Legt die Farbe von dunklen Schatten (auf dunklem Hintergrund) fest.

messageSidebarOrientation:
Standardwert: left
Verwendung: Legt die Positionierung der Nachrichten-Seitenleiste fest.

individualLess:
Standardwert: leer
Verwendung: Speichert Einträge, die unter "Individuelles CSS und LESS" gemacht wurden. Keine sinnvolle Verwendung für den Designer gefunden.

overrideLess:
Standardwert: leer
Verwendung: Speichert Einträge, die unter "Überschreiben von LESS-Variablen" gemacht wurden. Keine sinnvolle Verwendung für den Designer gefunden.

* Änderungen sind nur durch die Funktion "Überschreiben von LESS-Variablen" oder durch eigenes CSS möglich.
Über den Autor
Ich bin Webentwickler in Stuttgart und administriere Server seit vielen Jahren. In diesem Blog erstelle ich hauptsächlich Tutorials für andere Webentwickler, Webdesigner und Serveradministratoren.
-------------------------------------------------------------------------------------------------------------------------------------
I’m a web developer in Stuttgart, Germany, and server administrator since many years. This blog mainly contains a tutorial set for other web developer, web designer and server administrators.

3.556 mal gelesen

Kommentare 3

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen