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 · ‎07-18-2014

Great, thanks Travis - I'm just reading up on the '!important' property - a good one to know, my CSS knowledge is pretty basic at the moment.

I didn't expect a reply at this time from the US - are you working night shift?

tltoulson · ‎07-18-2014

No, I'm not on night shift. I'm just exercising my nocturnal tendencies and staying up late. I love my job and I love helping out in the ServiceNow Community so I will occasionally sneak in here at night and do some work off hours.

kc99 · ‎07-18-2014

Now that's what I call dedicated - thanks for being nocturnal.

kc99 · ‎05-11-2015

Hello again Travis, I hope you are well.

I'm still having trouble using the '!important' property on certain page elements in CMS.

For example, I'm trying to change the section label colours on a form so that it matches the colours in the rest of the CMS site's CSS.

So, as an example, in the 'base' CSS file for the site I have tried to copy and override the system CSS with this...

TR.io_label_section TD {

padding: 2px;

font-weight:bold;

background-color: red !important;

color: black !important;

}

but this is not working - when I look at the element in DOM Explorer it doesn't mention the new CSS at all even though the correct style sheet link appears in the source code.

Are there certain elements that can't be overridden with revised CSS?

Many thanks in advance,

Keiron.

tltoulson · ‎05-11-2015

Hi Keiron,

You should see it in the DOM Explorer, even if the CSS is overridden by something else. Have you tried clearing both the browser and the server cache? As far as I can tell, your CSS should override the out of box. As far as I know, there aren't any limits on what can be overridden. The "!important" keyword should ensure in most cases that the CSS will apply regardless of other rules. The best I can say is try clearing the cache and if that doesn't work, try manipulating the CSS from the Web Inspector / DOM Explorer to get the desired result.

Kind regards,

Travis