Change field color on change

[Kristoffer Bertsch]

Hi,

I have a simple list, with a dropdown of three options:
No gaps were found =green
Minor gaps were found= yellow
Significant gaps found, remediation required= red

I would like the tab to change color according to one of the option selected above. Is there CSS that will change the tab color to green, yellow or red when one of the options above is chosen? Or is there another way to show the “status” when one of the options is selected?

Thanks for the help!
-Kris

[Alexander Bautz]

Put this is the Custom CSS in the “CSS and JS” tab:

.tabGreen *{
	color:#ffffff !important;
	background-color:green !important;
}
.tabYellow *{
	color:#444 !important;
	background-color:yellow !important;
}
.tabRed *{
	color:#ffffff !important;
	background-color:red !important;
}

Put this is the Custom JS in the “CSS and JS” tab:

function colorTab(){
	$("#dffs_tab_2").removeClass("tabGreen tabYellow tabRed");
	switch(getFieldValue("Color")){ // Color is the FieldInternalName
		case "Green": // The option form the choice field
			$("#dffs_tab_2").addClass("tabGreen");
		break;
		case "Yellow": // The option form the choice field
			$("#dffs_tab_2").addClass("tabYellow");
		break;
		case "Red": // The option form the choice field
			$("#dffs_tab_2").addClass("tabRed");
		break;		
	}	
}

Change the tab ID number of the tab – “dffs_tab_2” is the third tab as the index is 0-based. Also change the “case” to match your choice field values.

Then add a rule to trigger on your choice field, and have it call the function “colorTab” in the “Run these functions / trigger these rules” field.

Alexander

[gerrits]

Is it possible to also change the ToolTip dialog box heading color?

Currently when the user clicks on the question mark icon to keep the tooltip displayed…the X (to exit the tooltip) is blue, and the heading is blue.

• This reply was modified 9 years, 5 months ago by gerrits.

[Alexander Bautz]

Hi Gerrits,
Can you post a sceenshot? – in my setup the x icon is white.

Alexander

[gerrits]

See attached.

Attachments:

1. 

   tooltip.jpg
   

[Alexander Bautz]

Which SharePoint version and browser are you using?

Alexander

[gerrits]

Chrome Version 43.0.2357.124 m

DFFS Backend v4.253|CSS version: 4.01 / |spjs-utility version: 1.206

[Alexander Bautz]

This image is set using a base64 encoded string. If you encounter problems, you may change the image to a proper image in the file DFFS_frontend.css – look for the class “tooltipHolderClose”-

Alexander

[gerrits]

I found it…but not sure I understand the CSS. Could you explain the URL? or point me to an article?

background-image: url(“data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABAAAAAQCAYAAAAf8/9hAAAAAXNSR0IArs4c6QAAAARnQU1BAACxjwv8YQUAAAAJcEhZcwAADsMAAA7DAcdvqGQAAAAYdEVYdFNvZnR3YXJlAHBhaW50Lm5ldCA0LjAuM4zml1AAAAB5SURBVDhPzZJBDoAgEAN5CG/jF74fGewigSUcOOgkTaTtrhoN/yHnHIuSFGU3djkFAuMqai”);

[gerrits]

I’ve uploaded an image, and changed the line to:

background-image: url(“Red_X_icon.png”);

But it isn’t showing up. Not sure if I have the syntax right or if there’s another issue. I’ve even tried giving it the complete url, instead of just the file name.

[Alexander Bautz]

I guess you need the relative URL of the image – like “/site/library/Red_X_icon.png”.

Alexander

[gerrits]

That was it! Thanks for your help.

[Kristoffer Bertsch]

Thank you sir!! Much appreciated!!

[Author]

Posts