Service Portal CSS URL

[sonalin]

Hi All,

Could anyone please help me understand the below URL of the CSS.

I am trying to trace the location of this file sp-bootstrap.scss

And what is the v=sysid? (v=17c9899adb03c1503081d4bdd3961918). What is its pointing to? 

 

Please assist since I am really not able to understand CSS getting applied from this file since their is already a custom CSS written for the Page.

Thanks, Sonali.

[-O-]

That is a file not exposed to editing. Parameters portal_id and v are there to make sure that the CSS will be detected as needing to be updated in the browser's cache at the correct occasion. That is if the contents will be changed (by ServiceNow), the v parameter will change, which will make the browser "see" the css file as a different/new file and it (the browser) will re-cache (the new version) of the file. This is done so in order to "force" the browser to re-cache mostly static files as seldom as possible in a controlled fashion to increase site speed.

As for the right CSS rule being applied or not, just creating a custom CSS is not enough, CSS rule priority/specificity still applies, so you need to craft your selectors so that those will be priorities by the browser. E.g. if the original file has a rule

.type-boolean label input[type="checkbox"]:checked ~ span:after

you could bump its priority/specificity by making the rule more specific by prefixing it:

HTML body .type-boolean label input[type="checkbox"]:checked ~ span:after

sometimes that is not possible (this will most likely not influence a rule that has an id selector in it) and in those cases you need to force the application of a CSS attribute by marking it with the !important keyword - but this must always be ones last resort solution:

HTML body .type-boolean label input[type="checkbox"]:checked ~ span:after {
	border: 2px solid blue !important;
}

[sonalin]

Thank you @János for your reply and answering my questions.

I appreciate your time for writing it out to me. The recent change was done is the upgrade to San Diego of the UAT environment since it is the first instance upgraded and not dev.

The primary issue is the below thread. 

https://community.servicenow.com/community?id=community_question&sys_id=f8d1c0c1db874950457ae6be139619a9

 Like you have mentioned we already done the !important over the custom CSS to make it priority however the sp-bootstrap.scss is overriding two areas of the checkbox as below.

The screenshot CSS are so strongly getting applied to the checkbox element that I am not able to get hold on it even I have made the entire Custom CSS !important.

This is strange behavior because this customization was never impacted in the Qubec upgrade.

Hope there would be some solution to it.

Thanks,

Sonali. 

[-O-]

Could you be a bit more specific as to what you want to accomplish? I mean doing what I suggested in a San Diego instance does apply even without resorting to !important. Also strictly speaking about the screen-shots, all those rules are crossed out, so not applied. I mean it should work.

[sonalin]

Yes they are crossed out because I have checked the custom CSS while I was inspecting the checkbox element on the form to correct the alignment However, when it get loads from the service portal it is as below.

The actual Custom CSS which are supposed to apply are getting crossed out and default are getting applied when form loads.

The Blue arrow are getting applied and the Red one Custom CSS are actually getting crossed.

Hope now you are able to understand my issue. I am not able to get control over the Blue background color getting applied to the checkbox, the check mark is tilted to 45 degree due to a webkit CSS property. All this CSS is from sp-bootstrap.scss

 And when I cross the sp-bootstrap.scss at the browser debug level, I get the expected behaviour. But I don't have any idea how to fix it at service portal page or custom CSS level