How to amend external style sheets

[kc99]

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.

[adambraden]

Were you ever able to find an answer for this?   I'm needing to edit the css_includes_m.css stylesheet and I'm running in to the same issue.

[tltoulson]

Hi Adam and Keiron,

I don't believe you can edit/upload the style sheets directly.   ServiceNow allows you to edit certain CSS properties.   See Theming an Instance - ServiceNow Wiki for details.

An alternative is to use javascript to dynamically add "style sheets" client side using a Global UI script though I would not recommend this approach except for very well defined use cases limited to cosmetic color changes.   These types of dynamic scripts could potentially fail with UI Updates causing entire pages to fail to load.

Another alternative is to create a CMS where you have full control of the styles.

I hope this has helped.

[kc99]

Hi Travis, Adam,

I'd almost given up on this one so many thanks for the helpful answer.

I've probably amended 95% of our Self Service CMS's CSS after eventually finding the bits to change.

Perhaps I'm missing something but do you think that it's possible to have a full CMS whereby every component (font size, background colour) can be fully controlled? - it just seems that there is always a page that pops up that uses something from the central, external style sheets mentioned above.

Anyway, our project has been delayed for a bit so we've got a bit more breathing space,

many thanks again for your help,

Keiron.

[tltoulson · Accepted solution]

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).