So we got to use the shiny new Jira 4 at work last week. It’s all a bit more polished, more ajaxy. That doesn’t necessarily mean it’s more productive.
But with anything new, there’s always a learning curve, an adjustment in your personal workflow, and maybe in a short while I’ll be more productive, who knows. But one thing that irked me immediately was the contrast of the new screens. Text and labels are in different shades of grey, links in a blue shade. It looks like there had a fog descended over my screen, a veil, a summer’s smog. I was almost squinting.
I filed a Jira to improve contrast on our Jira version, but didn’t wait for IT to solve this.
I popped up Firebug (which Jira doesn’t like, as it shows me a warning message things may run slow), and looked under the hood. I pointed it to the grey labels and text, and changed its colours to black, the links to a darker shade of blue. I dropped this all into a Greasemonkey script, which also runs as an extension in Chrome, and all was good (at least better) again.
For your reference, this is the CSS I changed:
<br></br>body { color: #000 !important;}<br></br>.property-list .name { color: #000 !important;font-weight: bold !important}<br></br>.mod-header h3 { color: #000 !important;}<br></br>ul.item-details dl dt { color: #000 !important;}<br></br>a,a:link,a:visited { text-decoration: underline !important; color:#036 !important;}<br></br>a { text-decoration: underline !important;}<br></br>dt.tt_text { color: #000 !important;}<br></br>.item-header ul.breadcrumbs a, .item-header ul.breadcrumbs a:link, .item-header ul.breadcrumbs a:visited {text-decoration: none !important}<br></br>h2#issue_header_summary a, h2#issue_header_summary a:link, h2#issue_header_summary a:visited {text-decoration: none !important}<br></br>.item-header ul.breadcrumbs li:nth-last-child(1) {font-weight: bold !important; font-size:1.1em;}<br></br>#main-nav a, #main-nav a:link, #main-nav a:visited{font-weight: bold !important; color: #fff !important;}<br></br>#main-nav li.selected a, #main-nav li.selected a:link, #main-nav li.selected a:visited, #main-nav li.dd-allocated a:hover{font-weight: bold !important; color: #036 !important;}<br></br>#main-nav li.active a, #main-nav li.active a:link, #main-nav li.active a:visited, #main-nav li.active a:hover{font-weight: bold !important; color: #036 !important;}<br></br>#createItem a, #createItem a:link, #createItem a:visited { font-weight: bold !important; color: #fff !important;}<br></br>#main-nav li.dropdown-item a, #main-nav li.dropdown-item a:link, #main-nav li.dropdown-item a:visited {color:#036 !important;}<br></br>.ops-menus a, .ops-menus a:link, .ops-menus a:visited, .ops-menus a:hover, .ops-menus a:active { text-decoration: none !important;}<br></br>
It’s not perfect, but it works for me. You might find it useful too.
