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. 
  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_SimonRob_Simon Customer IT Monkey ✭
    Thanks Brian!
  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    @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_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    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_HendricksTom_Hendricks Customer Super IT Monkey ✭✭✭✭✭
    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_DalyBrett_Daly Customer IT Monkey ✭

    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_kleinschnitzjames_kleinschnitz Cireson Dev, Product Owner Advanced IT Monkey ✭✭✭
    We added the current Work Item type as a CSS class to the body and #main_wrapper in 8.11.0
  • Brian_WiestBrian_Wiest Customer Super IT Monkey ✭✭✭✭✭
    Update the .nav-pills class to you theme.
    See attached and add to your custom.css
Sign In or Register to comment.