Color Background for Class/ID Page Title
Mark_Jones
Customer IT Monkey ✭
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!
1
Best Answers
-
Tom_Hendricks
Customer Super IT Monkey ✭✭✭✭✭
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.
3 -
Mark_Jones
Customer IT Monkey ✭
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!0 -
Matt_Medley
Member Advanced IT Monkey ✭✭✭
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.1 -
Tom_Hendricks
Customer Super IT Monkey ✭✭✭✭✭
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', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('incident');</b> $('.page_title').prepend("<i class='drawer-icon ci ci-incident'></i>");<br> });<br>});<br>app.custom.formTasks.add('ServiceRequest', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('serviceRequest');</b> $('.page_title').prepend("<i class='drawer-icon ci ci-service-request'></i>");<br> });<br>});<br>app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('changeRequest');</b> $('.page_title').prepend("<i class='drawer-icon ci ci-change-request'></i>");<br> });<br>});<br>app.custom.formTasks.add('Problem', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('problem');</b> $('.page_title').prepend("<i class='drawer-icon ci 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. 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.
9
Answers
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.
Thanks, Tom. There is certainly no rush. Really appreciate the reply!
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', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('incident');</b> $('.page_title').prepend("<i class='drawer-icon ci ci-incident'></i>");<br> });<br>});<br>app.custom.formTasks.add('ServiceRequest', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('serviceRequest');</b> $('.page_title').prepend("<i class='drawer-icon ci ci-service-request'></i>");<br> });<br>});<br>app.custom.formTasks.add('ChangeRequest', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('changeRequest');</b> $('.page_title').prepend("<i class='drawer-icon ci ci-change-request'></i>");<br> });<br>});<br>app.custom.formTasks.add('Problem', null, function (formObj, viewModel) { formObj.boundReady(function () { // Set the banner class to apply the correct bg color <b>$('#main_wrapper div:nth-child(1)').addClass('problem');</b> $('.page_title').prepend("<i class='drawer-icon ci 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. 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.
$('#main_wrapper div:nth-child(1)').addClass(...instead of$('#main_wrapper').addClass(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!