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;
}