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 borders, 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(
/**
* Primary Color:
* 3 pixel line on the navbar
* -------------------------
* was @primary
*/
'BorderColor' => '#d3dbe1',
/**
* Secondary Color:
* color of the navbar
* -------------------------
* was @secondary
*/
'NavigationBar' => '#fff',
/**
* Primary Button Color:
* color of the primary button
* -------------------------
* was @primaryBtn
*/
'PrimaryButton' => '#0679c8',
),
);
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 @BorderColor, @NavigationBar, and @PrimaryButton less variables. An example is shown below.
./custom/themes/clients/base/default/variables.php
<?php
if (!defined('sugarEntry') || !sugarEntry) die('Not A Valid Entry Point');
$lessdefs = array(
'colors' => array(
/**
* Primary Color:
* 3 pixel line on the navbar
* -------------------------
* was @primary
*/
'BorderColor' => '#E61718',
/**
* Secondary Color:
* color of the navbar
* -------------------------
* was @secondary
*/
'NavigationBar' => '#282828',
/**
* Primary Button Color:
* color of the primary button
* -------------------------
* was @primaryBtn
*/
'PrimaryButton' => '#176de5',
),
);
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;
}
}
Last modified: 2020-03-16 17:00:15