Creating a Custom SuiteP Sub-theme

Since SuiteCRM 7.10, the SuiteP theme started to have 4 Sub-themes called Dawn, Day, Dusk and Night. This article teaches how to "fork" one of these and start a new Sub-theme of your own.

I will create a new Sub-theme called Noon, based on Day, and I will make some changes in order to increase the contrast in some parts of the app.

This article applies only to SuiteCRM versions 7.10 or newer.

Forking an existing Sub-theme

I start by creating a custom version of themes/SuiteP/themedef.php. To create this file, I apply the usual way to customize files in SuiteCRM: first I create any necessary subdirectories to get to custom/themes/SuiteP/ and then copy the existing file (from themes/SuiteP/themedef.php to custom/themes/SuiteP/themedef.php).

Edit the new file in a text editor and near the end, next to the similar lines, I add this one:

'Noon' ⇒ $app_strings['LBL_SUBTHEME_OPTIONS_NOON'],

Now we need add that new label in a couple of places (create any missing sub-directories as needed):

custom/modules/Users/language/en_us.lang.php

<?php
$mod_strings = array (
  'LBL_SUBTHEME_OPTIONS_NOON' => 'Noon',
);

And a slightly different one for $app_strings here:

custom/Extension/application/Ext/Language/en_us.NoonThemeLabel.php

<?php
$app_strings['LBL_SUBTHEME_OPTIONS_NOON'] = 'Noon';

Next, we copy the subdirectory of the sub-theme that looks closest to what we want, giving this command from the root of the SuiteCRM installation:

cp -R themes/SuiteP/css/Day themes/SuiteP/css/Noon

At this point, just do a Quick Repair and Rebuild and the Sub-theme is operational and can be selected from the User’s profile, under Layout options.

Compiling the styles

In order to be able to compile this CSS, you need to install a SASS compiler. On Ubuntu this can be done from your SuiteCRM directory with:

composer require leafo/scssphp

You can then compile using the following command everytime you change any .scss file:

./vendor/bin/pscss -f compressed themes/SuiteP/css/Noon/style.scss > themes/SuiteP/css/Noon/style.css

Note that you always use this exact command even if you didn’t change style.scss, but another .scss file, because this is the main file that includes all the others.

Customizing the styles

There are several .scss files that can be changed.

themes/SuiteP/css/variables.scss
themes/SuiteP/css/color-palette.scss
themes/SuiteP/css/style.scss

Here are a few tweaks I tried in color-palette.scss to add more contrast:

Top menus
C2C3C4 > 555555
Lettering
817C8D > 111
Sidebar
929798 > 626768
707d84 > 303d44

In my case, the full color-palette.scss looks like this after the changes (note that this could be different for different versions of the product, make sure you edit the one you have):

//********************
//* color palette
//********************
$color-1: #000000;
$color-2: #31708F;
$color-3: #333333;
$color-4: #378CBE;
$color-5: #3C763D;
$color-6: #444444;
// See list view
$color-7: #4B97C4;
$fg-color-7: #111;
$color-8: #555556;
$color-9: #555557;
$color-10: #5CB85C;
$color-11: #CCE3F0;
$color-12: #666666;
$color-13: #303D44;
$color-14: #677785;
$color-15: #6A6578;
$color-16: #6EA674;
$color-17: #6A80E6;
$color-18: #757083;
$color-19: #777777;
$color-20: #626768;
$color-21: #79996A;
$color-22: #808F9C;
$color-23: #829EB5;
$color-24: #8499AB;
$color-25: #888888;
$color-26: #8A6D3B;
$color-27: #93A0AB;
$color-28: #303D44;
$color-29: #89b3ac;
$color-30: #99534D;
$color-31: #999999;
$color-32: #A2A5AF;
$color-33: #3E7291;
$color-34: #c4e3f5;
$color-35: #76C1B7;
$color-36: #ABC3D7;
$color-37: #B29EB5;
$color-38: #BBE6A5;
$color-39: #555558;
$color-40: #C4C3C7;
$color-41: #C9D2DA;
$color-42: #CCE8E2;
$color-43: #5FA9D4;
$color-44: #FFFFFF;
$color-45: #E2E7EB;
$color-46: $color-7;
$color-47: #E6D5A5;
$color-48: #E6E6E6;
$color-49: #FF0000;
$color-50: #FFFFFF;
$color-51: #F5F5F5;
$color-52: #F8F8F8;
$color-53: #63AAD4;
$color-54: #FAF7CF;
$color-55: #FAFAFA;
$color-56: #4B97C4;
$color-57: #A5E6E6;
$color-58: #A94442;
$color-59: #AFAABF;
$color-60: #B3C0C7;
$color-61: #C7254E;
$color-62: #CCCCCC;
$color-63: #D9EDF7;
$color-64: #E6E6E6;
$color-65: #DFDFDF;
$color-66: #DFF0D8;
$color-67: #E0DDEB;
$color-68: #E3E3E3;
$color-69: #E5E5E5;
$color-70: #E67C73;
$color-71: #ECE9F5;
$color-72: #EDEBF5;
$color-73: #F2DEDE;
$color-74: #F5F5F5;
$color-75: #F7F7F7;
$color-76: #F8F8F8;
$color-77: #F9F2F4;
$color-78: #F9F9F9;
$color-79: #FCF8E3;
$color-80: #FFFFFF;
$color-81: #F08377;
$color-82: #FFFFFF;

Note that I just customized some "quick wins", a few colors that I could change and affect a lot of places in the application. There are many other things that need to be tuned after this.

By pgorod | September 5, 2018