How to change background color of employee self-service portal

[fpuzon]

Hello again everyone,
As I play around more with style sheets one of the latest things I've been trying to change is the background color of the ESS portal.   I'm trying to find out where I change every background color element on the ESS portal through the different style sheets in the CMS.   Changing the Portal Header bars seem easy enough, but when I try to go a step further a try to change the rest of the background from white to black it gets a little more tricky.   I inspect all the elements using the Chrome developer tool and when I try inspect the background element I can't seem to find the style sheet it's associated with.   I know with some elements you can capture the sys_id and just search the style sheets based on that, but that doesn't seem to work with every element.   Is there another way to find where each element is part of a style sheet?

What I am trying to do is make this page all black, including footers,   except for the 3 content blocks.  

Any help would be greatly appreciated.

Thanks again everyone!

Fred

[Artemis15]

Well, I think this will help you Creating ServiceNow CMS Sites — ServiceNow ELITE.com

--

Cheers,

AR

[Manjul Katare · Accepted solution]

Hi Fred,

I would advice to make changes on layout as there are multiple places where you would need to change the background.   I'm assuming that your want to keep the black background for home-page and all other pages with list & form would still be same. If so I would create a copy of "CMS 1 Column" layout and create a new one. Please refer: https://instance-name.service-now.com/sys_ui_macro.do?sys_id=67f092fa0a0a0b420026133b8feff1c2

On my new layout I would add below <style> so that it does not apply on rest of the portal.

<style>

HTML[data-doctype=true] body.non_standard_lists,

table.cms_header_table tr.cms_header_top_menu_row td.cms_header_top_menu,

table.cms_header_table tr.cms_header_logo_row td table,

table.cms_header_table tr.cms_header_bottom_menu_row td,

div.cms_layout_container_1_column table,

table tr td.cms_layout_content_body div.cms_menu_section_blocks

{

  background: #000000 !important;

  /* you would need !important for overwriting inline styles being written with JS */

}

table tr TD#dropzone0 {

border-bottom: 10px solid #000000;

}

img[src="decorative_top_border.pngx"],

img[src="decorative_bottom_border.pngx"] {

      display: none;

}

</style>

Now you can apply this new layout to your homepage.

Your end result would be something like this:

Hope this help!

-Manjul

[fpuzon]

Hi Manjul,

This worked out perfectly. Thank you! If I wanted to change the color of a form could this be done through layouts as well?   Or would this be done through a style sheet only?   I've been meaning to ask you this from my previous post regarding the background color for forms.   Do you know which style sheets the form uses?   I was looking through all the style sheets and couldn't find the code you were referencing:

#item_table,

#item_table table { background: #f4f5f6; }

Thanks for you time,
Fred

[Manjul Katare]

Hi Fred,

I'm glad I could help you with it! For changing the Form's background color you would need to make lot of changes for example change in color of background, color of text, color of form icons and then UI action buttons as well. Also Form's have pretty much the same look and feel on CMS as Main application and they are just embedded using iFrames. My personal recommendation would be keep the Form and List same as OOB.

Thanks,

Manjul