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.
Forking an existing Sub-theme
I start by editing
custom/themes/SuiteP/themedef.php, 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:
And a slightly different one for
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,
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
./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.
Here are a few tweaks I tried in
color-palette.scss to add more contrast:
C2C3C$ > 555555
817C8D > 111
929798 > 626768
707d84 > 303d44
color-palette.scss looks like this after the changes:
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.