Is there a way that I can create my own small CSS file that will override some colors and padding on SuiteP and put it in some folder such that it will always be loaded (i.e. after system updates?)
Or is there some PHP code I can pop in some ‘functions.php’ (thinking WordPress themes here) that will always load it?
The colors of SuiteP are a disaster for some people with visual issues, as well as those with normal vision who use this system all day (or all night) long. While the detail view is ok, the list and edit colors are difficult for some people, especially those who are color-blind:
I’d like to find a way to pop in my own CSS that will continue to be loaded after the many updates that I’m sure 7.9 is going to have.
I should copy the entire CSS file to a custom folder and make my changes (to the end of the CSS file?)
Doesn’t Suite have a system where it simply loads a small custom CSS with overrides AFTER it loads the main theme CSS? That would be the logical way to do it?
In this case the logic that won was to keep a similar scheme for every customization file in SuiteCRM. Normally the files you customize are much smaller, style.css happens to be quite big.
To all the people happily customizing style.css, this theme is SASS generated so you could be just editing a small file - variables.scss and then recompiling the theme (and style.css).
The problem there is that the variables.scss file is a high-level file … meaning only certain parameters are set within that file, which is then used for the compilation. If you want very fine control over a theme’s look, then you just have to wade in and edit the relevant “style.css” file.
What I do is initially take a copy of this file into the corresponding custom location and then implement all my changes there; leaving the original file intact.
However, for ease and speed of editing, I actually keep the “master” copy of “style.css” on my PC; using Notepad++ for any changes. I then upload those changes back to SuiteCRM on my hosting system. (You really don’t want to be making major edits, live, on your host’s system - in case the connection drops … and you lose everything!)
P.S. I always annotate any CSS changes in my file, so that when a brand new release of Suite appears (with a new style file), I can fairly easily re-implement all my specific tweaks.
(FYI: as these are merely CSS changes, there is no need to do a Repair and Rebuild in SuiteCRM for the changes to take effect. You simply upload the style file, then refresh the web page to immediately see the result of your changes).
paullm, I have to praise your willingness to learn and to teach. Coming back to the forums to explain what you did, and how, is a nice way for us to be helpful to one another in this community. Thanks.
I agree that the variables.scss is still too simple, I’d say one of the objectives is to add a few more configurable things in there. Since this is open source, we can do that and apply the changes in the code for everyone. So if there are things you feel the need to change in several places in the CSS, and think that they could be well expressed in variables, let us hear your suggestions.
I know nothing about SCSS, so I’m not able to offer any suggestions, there.
My knowledge of CSS is also limited, but taking a broader view, it appears to me that the new “single-theme” limitation in 7.9.x could actually be overcome just by having multiple SELECTABLE “style.css” files, to provide the different “themes”. Then, there could be literally hundreds of available “themes”, just by everyone making available and exchanging their style.css files.
Also, I would like to have the ability to select a theme when logging into Suite, so my choice is optimized for the device I am using … desktop, laptop, mobile.
Bear in mind that the Theme is responsive; so it will adapt to varying screen sizes, and look very different on mobile, as it now. You can easily experiment with that by de-maximizing your browser window and playing with the window size, bringing it down to the size of a mobile screen, or a landscape-mode mobile screen, or a tablet, etc.
Right now this responsiveness affects only layout (number of columns, for example), but I guess it could include some variation in spacing and padding, also.
Yes … like Suite R, I did notice that Suite P (Compact) was responsive.
The tweaks that I made … including larger font sizes, tighter line-spacing and heavier font-weights (to increase contrast) … have not affected the responsiveness.
Thanks guys for the heads up. The problem of SuiteP theme is that it is unfinished. The correct workflow of a designer-developer is to start designing for smaller screens (mobile) and implement changes using @media queries for larger displays. The fact that all “inputs” are min-height and line-height of 40px was to ensure that on small screen there is enough space to tap with our fingers. As I said, the problem is that the theme was released without being finished, so they didn’t fixed those heights, padding and spaces for normal screens where we spend more hours.
So I would suggest that your corrections should point only for larger screens using @media queries. I am starting to correct mine right now!
About the folder structure: yes, that is right. Create any needed folders if they don’t exist.
About the “workflow” of designing a theme: this wasn’t surely how it was done for SuiteCRM, due to historical reasons. It was always a Desktop theme, that was evolved to use Bootstrap, and visually redesigned. Somewhere along the way the new padding settings came in.
If you get things working well with the @media statements, please share. We’re still in need of a real solution inside the product…
I’ve only really gotten into css in the last week, so anything to do with @media is currently way over my head!
I can appreciate that developers must now address “mobile”, however as most SuiteCRM users are still using desktops/laptops, the developers probably could have reduced the immediate anguish (and hostility) by having a more compact Suite P theme variation available, on initial installation … perhaps as Suite P “Regular” and Suite P “Mobile”.
Regardless, taking the compact variation of the Suite P theme (mentioned elsewhere in this forum) as a starting point, I was further able to refine it to my needs and tastes.
I don’t use a smartphone, so I’ve only tested my changes on a Windows laptop and an iPad (using Safari) and they do appear to format correctly. On my iPad, the header line/navigation menu bar does not show; just the vertical “hamburger” icon. On my Windows 7 laptop, as I reduce Chrome’s window size, the screen elements do correctly “flow” around the screen.
Taking a glance through, my changes did not touch any @media statements within “style.css”. My specific changes address the following:
More restful to the eyes.
Slightly increase overall font sizes.
Pack more lines into dashlets and list views.
Increase the contrast.
Reduce corner-roundings in dashlets and data fields.
Switch to a shades-of-gray screen format, with blue links (no red/orange).
Show dashlet titles in upper and lowercase.
Show a logo in the top left, which is also a home button. (This did not appear on my iPad screen).
Show all available dashboards as a multi-row of “buttons across the top.
If anyone has installed a copy of the Urdhvatech / JCrist compact P theme (downloadable elsewhere on this forum) and wants to test my variation (you merely replace their “style.css” file with mine), the zipped file is attached.
