EC Pro Theme and CSS Variables

[JD Barlow]

I'm trying to understand if it is better to modify the OOB EC theme or if we should do an Insert and Stay to create a new theme altogether. We're probably just looking at some minor changes to colors/fonts/font sizes at first, but may be open to more extensive changes in the future.

• Will modifications to the OOB theme be overwritten with ServiceNow upgrades?
• If we do create a new one, is it best practice to copy the contents of the OOB EC Theme and re-associate all of the OOB CSS and JS includes?
• How do the CSS variables in the portal record relate to the theme? Are these additional variables, or do these overwrite same variables if they are found in the theme record?
• Is there a "cheat sheet" that further describes what the variables in the EC Theme file control?

Sorry for all of the questions, but thought it would be best to ask them all in one post. Thank you!

[Dan O Connor]

So it kind of depends on what changes you are looking to make to the theme. I have done a lot of Employee Centers for customers, and never had to create a custom theme. There is a lot of configuration options available that should allow you achieve what you want.

With customisation it is always worth assessing the value vs the overhead. 

If you create a new Custom Theme, when you come to upgrade via main release or plugin release, Theme updates will be skipped as it will see you are using a custom one. So you would need to manually maintain the theme, and check each release to see any theme related updates or upgrades you may wish to include. This isn't always an easy task as we don't define changes right down to asset level (we assume you are not customising) 

There is a consistent debate over the last two years in the space of clone and customised vs customised directly. 

The argument for clone and customise is based of what was been recommended for many years, and that you are keeping the OOTB asset should you ever wish to switch back.

The argument for customizing directly is that upgrades should be applied as they will not be skipped. 

There are negatives for both also. Cloning means more assets and records, and that you will need to manually manage each new feature, enhancement, fix you want to bring into the asset, that we provide from a release. 

Customizing directly has the issue of us coming along to drop new code or script into your customized asset, and it breaking.

Personally I still go with the clone and customised method. Although that is after having a pretty meaningful conversation about why we are customizing, what value it is bringing and if its worth the hassle. 

Like without knowing your context specifically, I would still be comfortable in suggesting you look to avoid customising your own theme. Use the OOTB provision with Branding editor to setup the portal as you need. You can then use CSS in the instance of widgets(which is not customizing the widget) to do any adjustments, alignment or stylistic changes you need 

[JD Barlow]

Thanks @Dan O Connor. Very helpful. I've looked at the Branding Editor but it seems to only have high-level styles that can be changed. Is it ok to go into the OOB theme record (see below) and make adjustments to the CSS, or will those changes be overwritten with an upgrade? There are a lot of variables within the theme record that are not available in the Branding Editor.

Also, if we wanted to add something to the OOB header file can we edit that or would we need to create a new header file? We have a requirement to include a company global header at the top of all pages, and this would go above the SNOW header. My concern with creating a new header file is what you mentioned previously about missing updates and such.

[Dan O Connor]

If you maintain and use a custom theme, it will be ignored during updates. So your existing OOTB one will get the updates, changes, fixes etc. but not your custom one.

You would need to maintain that manually, adding in changes or enhancements to your customised theme 

[JD Barlow]

I wanted to follow up on my question regarding adding content above the main header bar. We have a requirement to include a company global header at the top of all pages, and this would go above the SNOW OOB header. 

Can I edit the OOB header widget directly or would I need to clone the header file and add the code there? I believe all the code will be added above the OOB code, so the contents of the OOB code will not be touched. I've read in different places that cloning the header is not recommended, but I'm wondering how companies can make their Employee Center look more on-brand without doing this. Thank you!