Mika,
You're right. I'm not sure what I was thinking. For those of you who can benefit please look below.
Issue: Some of the elements of the UI16 interface share the same CSS variable but it seems that for some branding some of the element attributes such as text color need to be different. There doesn't seem to be a way to make this kind of modification within the System UI theme page.
A resolution:
- Create a property - Type: color, Add appropriate category if you like for it display one of the system properties pages. This will allow it to be easliy modified if needed
- a Script Include (GlideAjax) to retrieve the property value
- a UI Script to call Script Include (GlideAjax), grab desired elements, and apply the CSS styling
Below setup will control the color of the Top bar search text and the hover text of the side bar history
Create two properties to hold a color value
- In filter navigator type sys_properties.list (press enter if on Helsinki)
- Click New
- Fill out Name
- Add Description (optional - will display as the label if added to a system ui properties page)
- Choose type color
- Supply a value
- Click Edit under the category related list and select desired category (optional - in this example I chose CSS to add to the CSS system properties page
- Click Save
- Repeat for second property
Create Script Include (GlideAjax)
- In text navigator type System UI
- Click on Script Includes
- Click New
- Add Name
- Check the Client Callable box
- I used the following as a method in the script section
getColorCSS: function(){
var sysProp = this.getParameter('sysparm_property');
return gs.getProperty(sysProp);
},
- Click Submit
Create Script UI
- In text navigator type System UI
- Click on UI Scripts
- Click New
- Add a name
- I used the following script within the script field
getCSS('replace_with_name_of_your_property_for_the_top_bar_search_text', setSearchTextStyle);
getCSS('replace_with_name_given_to_the_property_for_the_history_hover_text', setHistoryHoverStyle);
//Calls the GlideAjax script include
function getCSS(prop, callback){
var colorGA = new GlideAjax('replace_with_name_given_to_the_script_include');
colorGA.addParam('sysparm_name', 'getColorCSS');
colorGA.addParam('sysparm_property', prop);
colorGA.getXML(callback);
}
//Used as the callback to set the CSS styling for the top bar search Text when answer is returned
function setSearchTextStyle(response){
var answer = response.responseXML.documentElement.getAttribute("answer");
var searchTextColor = getTopWindow().window.document.getElementById('sysparm_search');
searchTextColor.style.color = answer;
}
//Used as the callback to set the styling for the history hover text in the left-side navigator
function setHistoryHoverStyle(response){
var answer = response.responseXML.documentElement.getAttribute('answer');
//creates a style element containing the CSS style and adds to the DOM before the elements where the history list exists
var historyHoverTextColorCSS = '.nav-body div.navpage-history ul.nav-history-list li a:hover span{color: ' + answer + ' !important}';
var style = document.createElement('style');
style.appendChild(document.createTextNode(historyHoverTextColorCSS));
getTopWindow().window.document.querySelector('#gsft_nav').appendChild(style);
}
Search Text and Filter Navigator result:
History Hover Text and Top Bar Color Text result:
