I’ve updated the article above with a new solution. Check it out and let me know how it goes.

I’m trying to set the background color for forms in UI16.
I tested the approach you suggested here for an older version and it changes the background color of all buttons on the header but not the header itself.
What syntax should I use to address the background of the header in a form in UI16?

Very thankful if you can help med out.

Best regards

Ted

Hi all,
I’ve build some functions you could use to manipulate elements.
As an example I used the fixed element insert as shown by Mark in his reply dd 24/03/2014

Hope this helps out some of you ;-)

/* using document construct as is:
You can of course use other elements as well,...
But for the purpose of this script we are just manipulating the form_header content.

 class= "form_header"
  |
  |---  class="pointerhand" (eg. Change Request)
  |   |
  |   |---  class="section view" (eg.  [Action Request view])
  |
  |---  class="mandatory_explained"
  |   |
  |   |---     
  |   |---  class="mandatory" ( )
  |   |---  id="section508_mandatory_explained"
  |   |---   = Required field

We will use this class structure to add / modify the content
 */
/* example : based on Mark stranger insert after example on https://servicenowguru.com/scripting/client-scripts-scripting/change-form-header-background-color/

Instead of directly pointing to the 'mandatory_explained' we could use the function as below (and could reuse it for other elements..
--------------------------------------------------
Thus instead of :
--------------------------------------------------
$('mandatory_explained').insert({after: ' - ' + g_form.getValue('number')});
--------------------------------------------------
We could do something like this:
--------------------------------------------------
var targetEl = 'mandatory_explained';
var strInsert = ' - ' + g_form.getValue('number');
insertAfterElement(targetEl, strInsert);
------------------------------------------------------------------------------------------------------------------------------------
Of course like this the variables can be placed in a loop on top of an array of elements, and so on,...
Making it a little bit more versatile.
I'll use checks on view and change request type for example to set a certain string (combined out of number etc))
I'll also build in a get and check on elements innerHTML using the getElementContent function, 
which you could handle (substring, trim, replace in the string itself,...) (retaining some parts of it and just replaced some stuff in it,..)
After which you could replace the innerHTML with your new string 
using the replaceElementContent function ;-)
/* The Functions we can use // author JDC */
function hideElement(targetEl){
	$(targetEl).hide();
}
function insertAfterElement(targetEl, strInsert){
	$(targetEl).insert({after: strInsert});
}
function insertBeforeElement(targetEl, strInsert){
	$(targetEl).insert({before: strInsert});
}
function replaceElementContent(targetEl, strReplace){
	$(targetEl).replace(strReplace);
}
function removeElement(targetEl){
	$(targetEl).remove;
}
function getElementContent(targetEl){
	var returnContent = $(targetEl).innerHTML;
	return returnContent;
}

As long as there’s a consistent form header element that can be targeted, it’s possible. In this case, it’s pretty simple. Here’s some sample code that grabs the ticket number and places it in the header. Just add it to an ‘onLoad’ script or any other place you want to add it.

$('mandatory_explained').insert({
    after: ' - ' + g_form.getValue('number')
});

first thanks for all those great solutions. I have one question though. Is there a possibilty to change the content of the form header? I´m thinking of the Task number as an example.

As a small add-on to the example above, fields may become mandatory on one of the section tabs on the form that is not the active one one the foreground.
If you want to color the tab itself, and not just the header bar underneath the tab, you can use:

[code]
var tabs = document.getElementsByClassName(‘tabs2_tab’);
tabs[1].style.backgroundColor = ‘red’;
[code/]

That’s javascript prototype CSS selector syntax. Basically it’s saying “find all elements on the page that have a CSS class named ‘header’, give me the first element in that array, then change the background color. CSS selectors are very helpful, especially in ServiceNow since it contains the prototype library by default.
http://prototypejs.org/doc/latest/dom/dollar-dollar/

Works Amazing. Can you please tell me the meaning of this line
$$(‘.header’)[0].style.backgroundColor