Suite P and the solution to a problem ...

Like many other SuiteCRM users, I was concerned by the announcement that, effective release 7.9.0, the Suite R and 7 themes were going to be dropped. It was Suite P … or nothing! (Sure, I could have stayed with 7.8.x, but that is not where any future SuiteCRM breakthroughs will happen).

I love the Suite R theme, simply because it shows so much information on one screen without having to scroll around. Not being or having mobile users, I was not concerned about having to accommodate “fat fingers” on mobile devices. My world is desktops and laptops.

So … what was I to do?

A solution started to appear when a couple of other skilled users developed their own variations of Suite P, to cut down on the excessive padding/spacing … namely Urdhva Tech’s “SuiteP Improved Theme”, which was further tweaked/compressed by “JCrist”.

Having installed and activated this compressed Suite P theme (which is mentioned and available elsewhere on this forum), things started looking up. Everything on screen was immediately looking nicer; more compact!

The only things I did not like were the Suite P color palette of red and gray (grey!) and the size of the data font (… for my eyes, a little too small). Despite not being too CSS-savvy, these fixes were actually simple to make…

After taking a copy of the “style.css” file from the compressed Suite P theme/css folder and putting it into the custom-equivalent folder location, I downloaded it to my PC (for easier editing).

Using my Chrome browser, by inspecting the CSS code for a couple of the red Suite P elements, I could see that the color codes being used were “f08377” and “e56455”. I prefer cooler colors on web pages (red is for warning messages), so using an online color hex-code picker (Google “color ffffff” to see an example), I eventually settled on “7270d8” … on my PC, a nice restful shade of blue!

With the “style.css” file open in my text editor, I merely search-and-replaced all occurrences of “f08377” and “e56455” with “7270d8”. Then, to show the CRM data in a slightly larger font, I changed all the “font-size: 12px” (and “13px”) statements to “font-size: 14px”.

After these changes, I uploaded the modified style file back to my SuiteCRM instance and, following a quick page refresh, everything looked great!

2 Likes