Simple CSS Override

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?



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:

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:

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!

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


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

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.



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.

So after deleting cache/themes folder.

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