Simple CSS Override

SuiteCRM Forum - English Language
1

I have what should be a simple task to override some CSS in a safe manner for a new field added by Studio. But I’m not seeing a simple solution.

The new field is a URL field, which can be very long. To prevent it looking so crappy and overflowing / wrapping, the CSS solution is really easy… just disable the overflow and truncate the displayed URL and signify the truncation using ellipses. Eg:

#cstmField a {
    display: inline-block;
    width: 250px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

Really the basic theme should do something similar.

But how do I simply get that CSS inserted into the output document? I could inject via a Javascript ‘ready’ event but that feels like overkill to me and I think it would be suboptimal because It would probably also make the output “jump” as it re-renders.

So what’s the current state-of-the art for simply solving this?

Thanks.

2

Hey,

There may be a few methods to inject JS/CSS into the views,
The quickest way, in my opinion, would be to include a custom .js file into the detailviewdefs.php file

I’ve written up a post about this previously
(This is re: editviews, but the steps will be similar): How to remove "Resource List" in Project's edit view?
As well as there being some tutorials online, such as: https://www.youtube.com/watch?v=ZuIKR4ts8Sw

This will let you target the CSS elements more directly


Alternatively, you could create a custom Detailview, and modify how it renders the field Here are some links regarding changes possible, that hopefully point in the right direction:

https://community.suitecrm.com/t/calculate-and-display-total-lead-scores/55634
https://community.suitecrm.com/t/is-there-logic-hook-for-detailsview/47802
https://gist.github.com/rajeshvaya/32584d21a1e772d9ca20
https://community.suitecrm.com/t/include-css-and-js-in-an-upgrade-safe-way/23347


Those are the two methods I can think of at the moment, unless any other users have some ideas?

Let us know how you get on!

3

I think the mention of JS injection is leading you guys in a needlessly complex direction.

If you just add that snippet of CSS into a file called

custom/themes/SuiteP/css/Dawn/style.css

it will get appended to your styles. Make sure to change that Dawn for the specific sub-theme you’re using. Or create 4 separate files, one for each sub-theme.

1 Like
4

Well adding custom/themes/SuiteP/css/Dawn/style.css was trivially easy… once you know about it! It’s not in the Developer Guide - the guide talks about entirely rebuilding style.css from its source which I’m glad was not necessary in this case.

Thanks!

5

@andrewm

I copied style.css to custom/themes/SuiteP/css/Noon folder and deleted theme folder from cache and QR&R.

But, I am seeing any changes on UI.

How did you achieve it? Please explain me.

6

So after deleting cache/themes folder.

We need to do ‘Empty cache and hard reload’ on your browser.