Color Background for Class/ID Page Title

Mark_JonesMark_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!

Tagged:

Best Answers

  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Accepted Answer
    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_JonesMark_Jones Customer IT Monkey ✭
    Accepted Answer
    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_MedleyMatt_Medley Cireson Support Advanced IT Monkey ✭✭✭
    edited January 30 Accepted Answer
    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. 

Answers

  • Tom_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    Accepted Answer
    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_JonesMark_Jones Customer IT Monkey ✭
    Accepted Answer
    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_MedleyMatt_Medley Cireson Support Advanced IT Monkey ✭✭✭
    edited January 30 Accepted Answer
    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. 
Sign In or Register to comment.