Color Background for Class/ID Page Title

Mark_Jones

It would be nice to envelop the individual request's page class title/ID within the color of the class it represents, much like the status area at the top of each page. In other words, when you have a request that is "In Progress", those two words have a blue background. We want to do the same where the title of the page shows "Change Request - CR20223", and do it for all classes on all request's individual pages.

I have had several requests to make all work item class titles and the ID match the color of the icon that correspond to that class (Incident orange, Service Request green, Change blue, etc.) The feedback I am getting it that the blue status background throws people off when working quickly through their requests and they would like to have the ability to quickly glance up to see the class color surrounding the ID.

I am not a web developer so my knowledge is limited on the process to do this. Thanks for everyone's input!

Tom_Hendricks

My time is extremely limited this week (just replying in the minutes between meetings now), but I might be able to help; see below.  I would need to sanitize my code before it could be shared, though.  There are also many other talented individuals here who might beat me to it, too.  But it can definitely be done.



In this example, the status does not change colors, but it certainly could if one wanted.  The SR icon could also be less monochrome if desired (it is not an image, it is actually text and CSS).  This is not only CSS--I had to add a class to the page using a few lines of Javascript, and I add a different class based on what kind of page it is.

Mark_Jones

Perfect! That is exactly what we are looking for! No need to for that status to change. I figured it had .js and .css fixin' up to do!

Thanks, Tom. There is certainly no rush. Really appreciate the reply!

Matt_Medley

Feeding off Tom's post regarding the SR icon being less monochrome, you can export the icon files and modify them in Photoshop and re-import them. Open the icon in Photoshop, duplicate the layer and delete the locked layer. Then on the new layer add some drop shadow, this will add depth to the icons and make them look 3D. Save / Export back to the same format and put them in the correct directory. 

Tom_Hendricks

Very true.  If you want the exact look of the SCSM console or even just a look that is less flat, that is a great way to go.

I have personally found that the font awesome icons do a respectable job standing in for the SCSM icons (except for CR, but I was able to use the one from the drawer for that), so I simply use background, border, and color attributes on them to give the appearance that you see above.  In my example, the background and foreground are on the same side of the color wheel and are just varying shades of the same color, but you could specify anything you want.  I just wanted mine to be subtle since they don't convey much more information than the background color does.

As for how to do it, you are adding a class to the page, and then adding (prepend) an <i> tag with a certain class, to get the icon added to the front of the title.  Note that this could also be a <img> tag if you prefer the approach that @Matt_Medley has shared.

In your custom.js file:

/* Ticket-type background color */
#main_wrapper > div.viewbuilder-struct:first-of-type.serviceRequest {
	background: linear-gradient(to bottom, green, #FFFFFF);
}
#main_wrapper > div.viewbuilder-struct:first-of-type.incident {
	background: linear-gradient(to bottom, yellow, #FFFFFF);
}
#main_wrapper > div.viewbuilder-struct:first-of-type.changeRequest {
	background: linear-gradient(to bottom, cyan, #FFFFFF);
}
#main_wrapper > div.viewbuilder-struct:first-of-type.problem {
	background: linear-gradient(to bottom, red, #FFFFFF);
}
/* Ticket icons */
.page_title > i.ci, .page_title > i.fa {
	font-size: .85em;
	padding: 3px;
	margin-top: 3px;
	border: 1px solid;
	border-radius: 4px;
	float: left;
	margin-right: 8px;
}
.page_title > i.ci-service-request {
	background-color: green;
	border-color: green;
	color: lightgreen;
}
.page_title > i.ci-incident {
	background-color: yellow;
	border-color: yellow;
	color: lightyellow;
}
.page_title > i.ci-change-request {
	background-color: cyan;
	border-color: cyan;
	color: lightcyan;
}
.page_title > i.ci-problem {
	background-color: red;
	border-color: red;
	color: orange;
}</code>app.custom.formTasks.add('Incident',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('incident');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-incident'></i>");<br>	});<br>});<br>app.custom.formTasks.add('ServiceRequest',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('serviceRequest');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-service-request'></i>");<br>	});<br>});<br>app.custom.formTasks.add('ChangeRequest',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('changeRequest');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-change-request'></i>");<br>	});<br>});<br>app.custom.formTasks.add('Problem',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('problem');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-problem'></i>");<br>	});<br>});</pre><br><br>In your custom.css file:<br><i>Note: </i><b><i>the named colors here are obnoxiously garish--replace the color names</i></b><i> to suit your specific color palette.&nbsp; I cannot share my exact color hex codes, but the names here should point you in the right direction.</i><br><pre class="CodeBlock"><code>

Since I am pulling this out of a very large style sheet, it is possible that I have accidentally omitted some other classes that are contributing to the look and feel, but this should be all you need, to my knowledge.

Tom_Hendricks

My time is extremely limited this week (just replying in the minutes between meetings now), but I might be able to help; see below.  I would need to sanitize my code before it could be shared, though.  There are also many other talented individuals here who might beat me to it, too.  But it can definitely be done.



In this example, the status does not change colors, but it certainly could if one wanted.  The SR icon could also be less monochrome if desired (it is not an image, it is actually text and CSS).  This is not only CSS--I had to add a class to the page using a few lines of Javascript, and I add a different class based on what kind of page it is.

Mark_Jones

Perfect! That is exactly what we are looking for! No need to for that status to change. I figured it had .js and .css fixin' up to do!

Thanks, Tom. There is certainly no rush. Really appreciate the reply!

Matt_Medley

Feeding off Tom's post regarding the SR icon being less monochrome, you can export the icon files and modify them in Photoshop and re-import them. Open the icon in Photoshop, duplicate the layer and delete the locked layer. Then on the new layer add some drop shadow, this will add depth to the icons and make them look 3D. Save / Export back to the same format and put them in the correct directory. 

Tom_Hendricks

Very true.  If you want the exact look of the SCSM console or even just a look that is less flat, that is a great way to go.

I have personally found that the font awesome icons do a respectable job standing in for the SCSM icons (except for CR, but I was able to use the one from the drawer for that), so I simply use background, border, and color attributes on them to give the appearance that you see above.  In my example, the background and foreground are on the same side of the color wheel and are just varying shades of the same color, but you could specify anything you want.  I just wanted mine to be subtle since they don't convey much more information than the background color does.

As for how to do it, you are adding a class to the page, and then adding (prepend) an <i> tag with a certain class, to get the icon added to the front of the title.  Note that this could also be a <img> tag if you prefer the approach that @Matt_Medley has shared.

In your custom.js file:

/* Ticket-type background color */
#main_wrapper > div.viewbuilder-struct:first-of-type.serviceRequest {
	background: linear-gradient(to bottom, green, #FFFFFF);
}
#main_wrapper > div.viewbuilder-struct:first-of-type.incident {
	background: linear-gradient(to bottom, yellow, #FFFFFF);
}
#main_wrapper > div.viewbuilder-struct:first-of-type.changeRequest {
	background: linear-gradient(to bottom, cyan, #FFFFFF);
}
#main_wrapper > div.viewbuilder-struct:first-of-type.problem {
	background: linear-gradient(to bottom, red, #FFFFFF);
}
/* Ticket icons */
.page_title > i.ci, .page_title > i.fa {
	font-size: .85em;
	padding: 3px;
	margin-top: 3px;
	border: 1px solid;
	border-radius: 4px;
	float: left;
	margin-right: 8px;
}
.page_title > i.ci-service-request {
	background-color: green;
	border-color: green;
	color: lightgreen;
}
.page_title > i.ci-incident {
	background-color: yellow;
	border-color: yellow;
	color: lightyellow;
}
.page_title > i.ci-change-request {
	background-color: cyan;
	border-color: cyan;
	color: lightcyan;
}
.page_title > i.ci-problem {
	background-color: red;
	border-color: red;
	color: orange;
}</code>app.custom.formTasks.add('Incident',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('incident');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-incident'></i>");<br>	});<br>});<br>app.custom.formTasks.add('ServiceRequest',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('serviceRequest');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-service-request'></i>");<br>	});<br>});<br>app.custom.formTasks.add('ChangeRequest',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('changeRequest');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-change-request'></i>");<br>	});<br>});<br>app.custom.formTasks.add('Problem',&nbsp;null,&nbsp;function&nbsp;(formObj,&nbsp;viewModel)&nbsp;{
	formObj.boundReady(function&nbsp;()&nbsp;{
		//&nbsp;Set&nbsp;the&nbsp;banner&nbsp;class&nbsp;to&nbsp;apply&nbsp;the&nbsp;correct&nbsp;bg&nbsp;color
		<b>$('#main_wrapper&nbsp;div:nth-child(1)').addClass('problem');</b>
		$('.page_title').prepend("<i&nbsp;class='drawer-icon&nbsp;ci&nbsp;ci-problem'></i>");<br>	});<br>});</pre><br><br>In your custom.css file:<br><i>Note: </i><b><i>the named colors here are obnoxiously garish--replace the color names</i></b><i> to suit your specific color palette.&nbsp; I cannot share my exact color hex codes, but the names here should point you in the right direction.</i><br><pre class="CodeBlock"><code>

Since I am pulling this out of a very large style sheet, it is possible that I have accidentally omitted some other classes that are contributing to the look and feel, but this should be all you need, to my knowledge.

Brian_Wiest

v8.10.0.x was just released with new title bar features.

With this this specific custom add-on no longer works as detailed.

Attached I have gone thru and updated the values to match the new CSS classes.

It is setup to work for both pre and post v8.10.0.x portals.

Hope everyone like the schema as I tried best to match the console colors.

(Still attempting to figure out the new ticket and the icon)

Rob_Simon

Thanks Brian!

Brian_Wiest

Well I worked around the issue. At least for my environment not sure if others will run down the same path or need a observer function. Just moved the Icon piece to the work item ID instead of title as the ID doesn't update on the page, thus remaining at all times. In the end the design I think doesn't really matter as it just a nice to have option of seeing the icon.

james_kleinschnitz

@Brian_Wiest we are working this week to fix some of the issues you raised and other improvements to the new header as well.  While we are in there I will have the team add a class somewhere that denotes the work item type, so you can get rid of the js code.  Quick question why did you add the class to

$('#main_wrapper div:nth-child(1)').addClass(...

instead of

$('#main_wrapper').addClass(

Brian_Wiest

The code I posted is the same as what @Tom_Hendricks originally posted. I just applied some updates so the code will work of pre v8.10x portal and post. Basically its containing his original coding and the updates I did for the new classes the new header utilizes. He would be best to answer as that line is for the pre scripts.

Tom_Hendricks

I had a reason for tagging certain divs with that class that has since been outgrown.  It happened to also be beneficial for this, although not necessary as written, so I left it as-is rather than test a different variation. 

It will certainly be nice to have the work item type (and hopefully asset and config item as well) identified for us!

Brett_Daly

Hey @Brian_West

I recently updated our test environment and need to get these changes updated, thank you for the quick update!  In looking at your screenshots, do you mind me asking where you got the formatting of the general, planning, etc tabs?  I really like the look of that!

james_kleinschnitz

We added the current Work Item type as a CSS class to the body and #main_wrapper in 8.11.0

Brian_Wiest

@Brett_Daly

Update the .nav-pills class to you theme.

See attached and add to your custom.css