How to amend external style sheets

kc99 · ‎04-24-2014

Hi,

I've Googled as much as I can on this before deciding to ask the experts.

I need to amend one of our external style sheets ('/styles/css_uncludes.cssx') - can someone please advise how I go about doing this?

When I use the Internet Explorer developer tool to view the CSS on my Self Service home page I can see several external style sheets mentioned (please see the attached screenshot).

Can anyone please advise how I go about amending '/styles/css_uncludes.cssx'?

I can obviously save and amend the CSS file but I'm unclear on how to upload this to the '/styles' folder on an upload - does the system recognise that it is a cssx file and automatically place it in the correct folder?

many thanks in advance,

Keiron.

tltoulson · ‎07-18-2014

Hi Keiron,

Sorry, I didn't realize you were doing this from the CMS. From within a CMS you can override default styles. The key is to use the CSS property !important. For example, the following CSS will override the color of List Titles:

.list_title {

color: red !important;

}

You can put this CSS in a Stylesheet that is linked to the CMS sites theme. The great thing about this approach is that even Forms, Lists, etc exposed via iFrames inherit these stylesheets. Overriding default styles can be a bit of a pain but it is generally better than having to write all the CSS (including layout CSS like padding, position, etc) yourself.

One thing I would love to see for CMS purposes is a more flexible/configurable client side Glide API. It would be nice to be able to ditch the out of box form layouts in the CMS portals but still be able leverage Client Scripts and UI Policies. I highly doubt this will happen but I can dream. (Then again, with Angular.js being introduced, maybe we will see a more configurable UI).

View solution in original post

kc99 · ‎05-11-2015

Thanks again Travis - I'll try that.

In the meantime I also tried to change the style using an onLoad Client Script which looped round the TD elements and inspected the class for each element before changing it.

Suffice to say that I've given up on that method as it's far too cumbersome.

Hopefully the cache clearing will let me see what's going on - I'm sure that I'm making this more difficult than it should be !!

kc99 · ‎05-11-2015

Hi Travis,

it looks like it could be linked to the fact that I'm using an iFrame (to display a record producer) as none of the elements within the iFrame seem to accept any !important changes I make in the CMS style sheets - it doesn't reference any of my local style sheets when I look in the DOM Inspector - is this as expected?

Thanks,

Keiron.

tltoulson · ‎05-11-2015

Hi Keiron,

In the past, I have seen CMS iFrames pull in CSS sheets from the CMS. But it may come down to how the link is constructed. It could also come down to version of ServiceNow. It is hard to tell. Are your iframe links relative? If not, try making them relative urls.

kc99 · ‎05-12-2015

Yes Travis, all of our iframe URLs are relative so I'm still puzzled by it all.

I Googled again when I got home last night and came across the suggestion made by Rowan Staveley at the bottom of this article...

http://www.servicenowguru.com/system-ui/field-styles-service-catalog-variables/

which also points to...

https://community.servicenow.com/thread/157928

which in turn links to...

ServiceNow Style Sheets and Caching — Chris Hann

Anyway, it was suggested that we embed the link to a local style sheet in the UI Page that presents the Record Producer (com.glideapp.servicecatalog_cat_item_view).

So I created a new local 'override' style sheet and linked to this at the bottom of com.glideapp.servicecatalog_cat_item_view like so...

</j2:if>
<j2:if test="$[!jvar_cat_item_authorized]">
Not Authorized

</j2:if>

<g:call function="u_include_stylesheet" stylesheet_id="zzzzzzz910e98c8200a9475fe9490d5095" />

</j:jelly>

And that worked !

Mark Stanger warns about this being cleared when we get a new upgrade so we would need to remember to add the line of code back in after any upgrades.

If you think of a better (safer) way to do this then please let me know,

thanks again for all your help,

Keiron.

tltoulson · ‎05-12-2015

Hi Keiron,

Yes, the cache can definitely prevent changes from showing up. When I mentioned clearing the browser and server cache before, did you try it? If you were able to get the results to show up by clearing the cache, then the approach you mention should work. If clearing the cache had no effect, then this approach will likely not work either. Certainly worth a shot though. I have never had problems with frames picking up CSS changes in the CMS that wasn't a simple caching issue. So this is pretty strange.