Is SuiteP Theme Too Big?

I tried the SuiteP Theme. I use an FHD screen resolution (1920x1080) on a 22" monitor (or 15.4" laptop display).

Isn’t it me, or does this theme make everything look really big so you can’t actually fit a lot of data on the display?

One of the major drawbacks of SugarCRM, at least the last version of Community which Suite is based on, is that the layour grid for Studio is only a measly two columns. This might have been great back in the 1990’s when people were using 800x600 and 1024x768 display resolutions (Laughe, and Cry, out loud.) So I’ve had to hack the views to allow for 4 columns (which allows for 4 fields each with 4 labels). You could probably even get away with 6.

This SuiteP theme almost looks like it was designed by someone who’s primary display device is a Mobile Phone!

Are any improvements being made in 7.9 to address the huge size of the SuiteP theme or is anyone branching off to create an improved theme that makes more efficient use of the available display space?

1 Like

Hello

I agree on your point. We have tried to fine tune up to some level. You may find more here Fine tunning suitecrm theme by urdhva tech

2 Likes

Please upvote the issue here

https://trello.com/c/br9PlvSc/74-suite-p-too-much-whitespace-more-compact-theme-needed

Just looked at your guide. THANK YOU.

Now I just have to resolve other layout issues but I think that’s best for another thread as it’s not a CSS issue.

My thoughts exactly, the SuiteP theme is not dense enough. Very difficult to work with on my 15 inch laptop! I really hope they fix this officially, but in the mean while I’ll explore the solution shown in this thread. Thanks!

Great addition to the theme from urdhvatech!

Just FYI. I was able to further modify to make a 4-column format (like I had made through layout def max-columns change which is no longer recognized). Unfortunately, while it works great in Detail View it creates issues in Edit View. So I have to decide if I want to have inconsistency or live with 2-columns.

The font size in my opinion is still a little too large even in the urdvha tech version. If you go 4-column most of the field labels wrap. So I went from 14px to 12px and looks much better.

It’s really unfortunate that the interface in my opinion was really the weakest aspect of SugarCRM Community all along. Obviously it’s a bit too big of an undertaking to totally rewrite it. However, the Suite-P theme while have a more modern Bootstrap style, to me really represents a functional step backward which just makes an already weak interface worse.

Agree with each work of topic starter.

Theme in 7.10 is too big and ugly. And you, guys, left us without any other option.
Urdhva improved theme work only up to 7.9.8

Actually, in 7.10 the theme’s spacing was reduced so you shouldn’t need SuitePImproved.

Also, 4 different color schemes were added, which you can select from User profile / Layout

The CSS is much more organized so you can customize from variables: https://pgorod.github.io/Customize-SubTheme/

Finally - I know Urdhva have made a new version of SuitePImproved, I don’t know if it works on 7.10, but at least it should work up to 7.9.14.

2 Likes

Let’s say original SuiteCRM size had been 100%, then you made SuiteP that was 200% from original size up to 7.9.8
Then you decreased it to 175% of original size in 7.10.0
Sorry, but that’s not actually: “theme’s spacing was reduced”
It’s like Shop sell product for 10$, then it increase price to 20$. Everybody in panic, and shop make price 17$ with words: “You won! We listen for your demands, so we decreased the price”.

Advice with CCS is very decent. That’s exactly what I’m doing right now.

And Urdhva theme for 7.9.8 is not working on 7.10

Could you please explain, where and how I can:

1)Decrease size of space after


2)Decrease size of field
3)Decrease size of text in field
4)Decrease size of name of field (lable)

Answer for my question:
1)You can understand what CSS manage what element simply by using Chrome or Firefox.
This is how it looks in Chrome what I’m talking about. You just click Right-Mouse-Button on element you want to check, and choose ‘Inspect element’

Then you see, what exactly CSS rules influence on that element. You can even edit them in you browser. Most important is that you can see group name of those settings, in my case that was “.detail-view-field”

Then you go to suitecrm/themes/SuiteP/css/Day/style.css
In my case it was “Day”, because I’m using Day layout, you may use other layouts. There are 4 of them.
And search for “.detail-view-field”
It repeated few times, but in 1 of them you will see what you need, bellow is my example when I open file in Visual Studio Code:

When you open the file for a first time, it little bit messy (that save time for compile the code), so I automatically edited it.

So you edit the file as you want and save it. Then you need to go to cache folder as I showed and deleted files from that folder. Because by default SuiteCRM render the pages from cache folder, not from original code folder.
/suitecrm/cache/themes/SuiteP/css/Day

That’s all

1 Like

Here is example of my production style.css file
remove extention .jpg from file before you’ll use it.

Forum doesn’t allow to upload .css files…