Themes
Overview
How to customize the Sugar theme.
Theme Variables
Sugar's theme variables, defined in ./styleguide/themes/clients/base/default/variables.php, determine the color of the primary action buttons, links, and header navigation. An example of the definition is shown below:
./styleguide/themes/clients/base/default/variables.php
$lessdefs = array(
'colors' => array(
/**
* Secondary Color:
* color of the navbar
* -------------------------
* was @secondary
*/
'NavigationBar' => '#fff',
/**
* Primary Button Color:
* color of the primary button
* -------------------------
* was @primaryBtn
*/
'PrimaryButton' => '#0679c8',
),
);
Variable Descriptions
It is important to understand what the purpuse and utility of each variable is before you apply in your code, below is an in-depth description:
@NavigationBar
- Used to customize the mega menu background colour
- Defaults to Sugar's
@white(#ffffff) - Note: This variable is only supported in light mode
@PrimaryButton
- Used to customize the background colour for primary buttons (elements using `btn btn-primary`)
- Defaults to Sugar's
@blue(#0679c8)
@LinkColor
- Used to customize the text color of link (anchor) elements
- Defaults to Sugar's
@blue(#0679c8) - Note: This variable is only supported in light mode
Custom Themes
Modifications to the theme can be made by creating ./custom/themes/clients/base/default/variables.php. Within this file, you can define the custom hex codes for the colors you would like to use. You should note that this is limited to the @NavigationBar, and @PrimaryButton less variables. An example is shown below.
./custom/themes/clients/base/default/variables.php
Note: Developers cannot override existing bootstrap less variables using this file.
Adding CSS
Sugar allows you to customize CSS using the less language in ./custom/themes/custom.less. As Sugar makes use of the Bootstrap library, you have access to the features of Bootstrap and can make use of its variables to create your own CSS. An example is shown below.
./custom/themes/custom.less
//You can import any less file you want and define your own file structure
//@import 'anyotherfile.less
@myCustomBgColor: lighten(@NavigationBar,10%); //variable defined on a custom variable.
.myCustomClass {
color: @linkColor; //bootstrap variable
background-color: @myCustomBgColor;
}
Overriding CSS Definitions
You can use the ./custom/themes/custom.less file to override CSS classes. The following example overrides the record label font size.
./custom/themes/custom.less
/*
* Changes record field label sizes to 13px;
*/
.record-cell .record-label{
font-size:13px;
}
Overriding the MegaMenu
As the MegaMenu has limited color customization within ./custom/themes/clients/base/default/variables.php, you may want to customize the look and feel further. The following example will automatically set the menu's link color to a contrasting color based on the @NavigationBar variable and determine the hover and active colors for the tabs.
./custom/themes/custom.less
// Workaround for luminance calculation
// Use luma() function once Sugar upgraded Lessphp to 1.7+ (see: http://lesscss.org/functions/#color-channel-luminance)
@luma: 1 - ( (0.299 * red(@NavigationBar)) + (0.587 * green(@NavigationBar)) + (0.114 * blue(@NavigationBar)))/255;
/**
* LESS GUARDS
*/
// General Nav Colors
.mixin-color() {
// Darker Colors
& when (@luma > 0.5) {
color: darken(contrast(@NavigationBar), 10%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
color: lighten(contrast(@NavigationBar), 10%) !important;
// color: darken(@NavigationBar, 30%) !important;
}
}
// Nav Fa Icon Colors
.mixin-fa-color(){
// Darker Colors
& when (@luma > 0.5) {
color: darken(contrast(@NavigationBar), 10%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
// color: lighten(@NavigationBar, 30%);
color: lighten(contrast(@NavigationBar), 10%) !important;
// color: darken(@NavigationBar, 30%) !important;
}
}
// Hover Button Groups Background colors
.mixin-background-color-hover(){
// Dark Colors
& when (@luma > 0.5) {
background-color: lighten(@NavigationBar, 15%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
background-color: darken(@NavigationBar, 15%) !important;
}
}
// Hover Button Groups colors
.mixin-color-hover(){
// Dark Colors
& when (@luma > 0.5) {
color: darken(contrast(@NavigationBar), 10%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
// color: lighten(@NavigationBar, 20%) !important;
color: lighten(contrast(@NavigationBar), 10%) !important;
}
}
// Active Button Group Background Colors
.mixin-background-color-active(){
// Dark Colors
& when (@luma > 0.5) {
background-color: lighten(@NavigationBar, 10%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
background-color: darken(@NavigationBar, 10%) !important;
}
}
// Active Button Group Hover Colors
.mixin-color-active-hover(){
// Dark Colors
& when (@luma > 0.5) {
color: darken(contrast(@NavigationBar), 5%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
color: lighten(contrast(@NavigationBar), 5%) !important;
}
}
// Open Button Group Background Colors
.mixin-background-color-open(){
// Dark Colors
& when (@luma > 0.5) {
background-color: lighten(@NavigationBar, 20%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
background-color: darken(@NavigationBar, 20%) !important;
}
}
// Open Button Group Hover Colors
.mixin-color-open-hover(){
// Dark Colors
& when (@luma > 0.5) {
color: darken(contrast(@NavigationBar), 15%) !important;
}
// Bright Colors
& when (@luma <= 0.5) {
color: lighten(contrast(@NavigationBar), 15%) !important;
}
}
// Background/Foreground Dropdown Menu Hover
.mixin-background-foreground-dropdown-menu-hover(){
// Dark Colors
& when (@luma > 0.5) {
background-color: lighten(@NavigationBar, 15%) !important;
color: darken(contrast(@NavigationBar), 15%) !important;
.fa {
color: darken(contrast(@NavigationBar), 15%) !important;
}
}
// Bright Colors
& when (@luma <= 0.5) {
background-color: @NavigationBar !important;
color: lighten(contrast(@NavigationBar), 5%) !important;
.fa {
color: lighten(contrast(@NavigationBar), 5%) !important;
}
}
}
/**
* LESS Definitions
*/
// Nav Button Group
.module-list .megamenu > .dropdown .module-name{
.mixin-color;
}
// Home Button Caret
.navbar .megamenu > .dropdown.active .btn-group:not(.open).home .fa-caret-down,
// More Button Caret
.module-list .megamenu > .dropdown.more .fa,
// Module Toggle caret
.navbar .megamenu > .dropdown .btn-group > .dropdown-toggle .fa {
.mixin-fa-color;
}
// Nav Button Group Hover
.megamenu .dropdown .btn-group{
&:hover, &:focus{
.mixin-background-color-hover;
.btn,
> .dropdown-toggle .fa{
.mixin-color-hover;
}
}
}
// Active Button Group
.navbar .megamenu > .dropdown.active .btn-group{
.mixin-background-color-active;
> .dropdown-toggle .fa,
> a.btn{
.mixin-fa-color;
}
}
// Active Button Group Hover
.navbar .megamenu > .dropdown.active .btn-group:hover{
.mixin-color-active-hover;
> .dropdown-toggle .fa,
> a.btn{
.mixin-color-active-hover;
}
}
// Open Nav Button Group
.navbar .megamenu > .dropdown .btn-group.open{
.mixin-background-color-open;
> .dropdown-toggle .fa,
> a.btn{
.mixin-fa-color;
}
}
// Open Nav Button Group Hover
.navbar .megamenu > .dropdown .btn-group.open:hover{
.mixin-color-open-hover;
> .dropdown-toggle .fa,
> a.btn{
.mixin-color-open-hover;
}
}
// Nav Button Group Dropdown Menu
.navbar .megamenu > .dropdown .dropdown-menu li a{
&:hover, &:focus{
.mixin-background-foreground-dropdown-menu-hover;
}
}