Add css to service portal pages.

[ankit110]

I want to make the service portal look like company's homepage. So mostly i have to deal with css of different pages and widgets. As far as i could go, i have discovered that css is applied to widgets, widget instances and at containers too. Apparently in containers we use css classes which are from bootstrap, if i am not wrong.

1) How can i use other framework instead of bootstrap to apply css to containers?

2) And if i have to change the css at widget level do i have to clone all of them?

[scottl]

Some advice, DO NOT follow ServiceNow's direction and place CSS in every widget, this is not a "best practice" approach to web development, as this is a nightmare for maintenance and portability of widgets across different portals.

Use a "theme" and assign a "CSS include" file to that theme. Then assign that theme to the portal.   This way the CSS is global across the portal you are creating and in one central location.   So as you bring in widgets, that widget takes up your styles.

I have no idea who decided at ServiceNow to make this decision by hardcoding CSS styles into widgets, because what they have done is essentially created in-line styles within every widget creating an absolute nightmare for web development, as the HTML should be clean enough so you shouldn't have too.   If you need to utilise the SASS variables (you shouldn't have to if your theme is setup correctly), I would keep the CSS in the widgets extremely "THIN", as I'm not sure at this stage that they work in the CSS include file.

[ankit110]

If i will be using any other framework for CSS, then the classes need to be changed in widgets, which means that i have to create new widgets (or clone existing ones). Is it good if i make a new portal altogether.

[scottl]

Deciding on making a new portal will be based on your expertise in web development.     If you need to clone the out of the box widgets to add additional classes this maybe a path you will need to take.   But be warned, building a custom Service Portal is quite an undertaking.   Consider also, depending on your requirements and what you need to build, there is considerable 'bloat' in using the out of the box portal for a mobile site too.   The effort it takes to 'modify' the existing SP widgets to get it to do what you want could be very time consuming as from what I have found with several onclick events, CSS and even the HTML, slightly modifying it causes major headaches.

[nathanfirth]

I think there is plenty of reason to have CSS on the widget level, although I agree that universal styles should live on the theme. But there are plenty of widgets where without CSS the widget may not render correctly and having support for CSS makes the widgets self contained. The whole notion of widgets is based off of web components which also includes styles.

I think best practices would be:

• widgets only use CSS for required styles (needed to render)
• CSS for "look and feel" should live on the theme

But there are also cases where you need HTML on the individual Page level as well, e.g. where the homepage has a different background color.

ankit1 I would not suggest deviating from Bootstrap... however if you feel so inclined, there is a checkbox called "Bootstrap alternative" that lives on the container that will remove the standard Bootstrap grid classes.