Clay Support

Clay Support Documents

 
Preview picture Clay

A dark style for WoltLab Suite 3.0 with turquoise color accents

This page lits all support articles available for Clay.

Overview

  • Available Style Variables

    This article lists the new style variables available for Clay.

    • current
    • Version 3.0

Style variables

Name of Variable Description Default Value  
$baseBadgeUpdateBackground sets the background color of the badges for updates (e.g. number of new forum posts) rgba(255,0,221,1)  
$baseBadgeUpdateColor sets the font color of the badges for updates #fff  
$baseSpaceTiny sets the spacing, e.g. padding or margin 5px  
$baseSpaceSmall sets the spacing, e.g. padding or margin 10px  
$baseSpaceMedium sets the spacing, e.g. padding or margin 15px  
$baseSpaceLarge sets the spacing, e.g. padding or margin 20px  
$baseThemeColorOne #343839  
$baseThemeColorTwo #2d3031  
$baseThemeColorThree #282b2c  
$baseThemeColorFour #202020  
$baseAccentColorOne #00e0fc  
$baseAccentColorTwo #008596  
$baseAccentColorThree #FC7200  
$baseAccentColorFour #7DB9E8  
$baseSignInUpText used for the login/ register area at the end of the page #fff  
$baseAccentGradient linear-gradient(to bottom, #00e0fc 0%,#008596 100%)  
$baseDialogContainerBoxShadow used to create a glow effect on dialog containers 0px 1px 32px 0px rgba(0, 224, 252, .4)  
$baseBodyBackground The basic background image. If you want to replace it upload an image with the exact same name to the images directory of the style #343839 url(#{$style_image_path}background.jpg)  
$baseStyleContentHeaderBackgroundImage The background image for e.g. sidebar box headers. If you want to replace it upload an image with the exact same name to the images directory of the style url(#{$style_image_path}backgroundTabular.jpg)  
$baseSignInUpBackground The background image of the login/ register area at page's footer. If you want to replace it upload an image with the exact same name to the images directory of the style url(#{$style_image_path}backgroundSidebar.jpg)  
$baseAccentGradient The background image of message sidebars. If you want to replace it upload an image with the exact same name to the images directory of the style url(#{$style_image_path}backgroundSidebar.jpg)  
$baseButtonBorder Sets the border color of buttons darken($wcfButtonBackground, 7%)  
$baseButtonBorderActive Sets the border color of active/ hovered buttons $baseButtonBorder  
$baseButtonPrimaryBorder Sets the border color of primary buttons darken($wcfButtonPrimaryBackground, 10%)  
$baseButtonPrimaryBorderActive Sets the border color of active/ hovered primary buttons darken($wcfButtonPrimaryBackgroundActive, 5%)  
$baseButtonDisabledBorder Sets the border color of disabled buttons darken($wcfButtonDisabledBackground, 10%)  
$baseButtonBorderWidth sets the border-width of buttons 1px 1px 2px 1px  
$baseUseMainMenuIcons Determines if the main menu items on large screens should have icons (code will only be compiled if set to yes) yes  
$baseFirstTableRowContainsHeadline Determines if the first row of tables (in messageContent and htmlContent) should always be formatted as if they contain headlines (code will only be compiled if set to yes) no  
$baseShowUserWelcome Determines if the users should be greeted with a welcome line (code will only be compiled if set to yes) yes  
$baseUseCircledAvatar Determines if user avatars should be displayed with rounded corners (circles if width = height) (code will only be compiled if set to no) no  
$baseUseLegacyMessageSidebarOrder Determines if the order of author, user title and avatar should match the style of WoltLab Suite 2.x (WBB 4.x) (code will only be compiled if set to yes) yes