How to change color of Border & Footers?

fpuzon
Tera Contributor

Hello everyone,
Does anyone know if there's a way to change the background color of borders and footers from white to any other color?   I've tried inspecting elements and checking the style sheet being referenced, but can't seem to find this block of code for it.   Any help would be appreciated.   Thanks in advance!

Fred

Boarders.jpg

5 REPLIES 5

Mike Patel
Tera Sage

Open Homepage and regular way, right click on footer and select inspect element. Once you find the id of the box add below code to your theme css.


You can use css color code if you don't know name (HTML Color Picker)


td#dropzone100 {


      background-color: limegreen;


}



find_real_file.png


Manjul Katare
ServiceNow Employee
ServiceNow Employee

Hi Fred,



You can use below snippet :



div.cms_footer_container {


  min-height: 20px;


  width: 100%;


  background: #999999;


  padding: 10px;


}



Adding a style to td#dropzone100 may also affect some other pages where #dropzone100 is being used just as row in any layout definition.



The end result would be something like shown below:


find_real_file.png



** Please note that the HEADER block may not look good unless it always sits at the bottom of the page.



Also, the border with light blue gradient effect is an image and you would have to replace with something new:



These images are:


https://<instance-name>.service-now.com/ess/decorative_top_border.pngx


https://<instance-name>.service-now.com/ess/decorative_bottom_border.pngx



You can locate these images by file name on "db_image_list.do".



Hope this help!


-Manjul


fpuzon
Tera Contributor

Hi Manjul,
Thank you.   This worked perfectly!   And you were absolutely right about about adding style to dropzones.   When I did this it affected other pages that I did not desire.   So, your snippet worked great for the footer itself, but what if I wanted to add it to different types of custom content. For example, I'm trying to change the color of the white border around my vertical blocks like you see below.   I was able to change the color from white to black on the left side, but that was by adding style to "dropzone11", but I want to be able to make this change to only that container.   I tried modifying your snippet, but I'm not getting the results I need.   Any ideas?  



Thanks again,


Fred



Manjul.jpg


Manjul Katare
ServiceNow Employee
ServiceNow Employee

Fred,



The white border is actually a background color for Td#dropzone10, because you have TD#dropzone10 {background-color: white;}



Try   TD#dropzone10 {background-color: transparent;} and let me know if that helps?



Please be careful while changing the background color of the dropzones and try make your style specific to just this particular page.


The best way would be, introduce a new classname on the layout and apply the background color to it as transparent.



Thanks,


Manjul