Recent searches


No recent searches

Temporary high contrast styling for ticket tabs



image avatar

Andrew J

Community Moderator

Posted Nov 02, 2016

To achieve higher contrast for agent ticket tabs tempororily (this only lasts until you refresh the page or change it)

Using Chrome - and not using multiple agent tabs.

Final Result - Dark Tabs!

 

  • Right click on a ticket tab (actually anywhere on the agent page will do)
  • Select 'Inspect'

 

  •  In the inspector window... Click the + icon
  • Copy the style selector from the CSS (shown a little further on) and paste into the selector section (in blue in the pic)

  • Click after the first curly bracket 

  • Paste the second part of the CSS in the box.

  • Repeat for the four CSS rules below.

That's all.

The CSS

CSS Selector 1

body.voltron #tabs .tab .tab-content-holder .tab_text 

CSS Code 1

color: #929292;

---------

CSS Selector 2

body.voltron #tabs .tab:not(.add):not(.overflow-tab) .tab-content-holder 

CSS Code 2

background-color: #3e3e3e;

-------


CSS Selector 3

body.voltron #tabs .tab.selected .tab-content-holder .tab_text 

CSS Code 3

font-weight: 600;
color: #ffffff;

-------


CSS Selector 4

body.voltron #tabs .mail.tab > .tab-content-holder .icon, body.voltron #tabs .mail.selected > .tab-content-holder .icon, body.voltron #tabs .web.tab > .tab-content-holder .icon, body.voltron #tabs .web.selected > .tab-content-holder .icon, body.voltron #tabs .play-mode.tab > .tab-content-holder .icon, body.voltron #tabs .play-mode.selected > .tab-content-holder .icon

CSS Code 4

background-color: #bbbbbb;
box-shadow: 0px 0px 2px 2px #bbbbbb;

 

 


0

3

3 comments

image avatar

Andrew J

Community Moderator

For even higher contrast...

Inactive tab text

body.voltron #tabs .tab .tab-content-holder .tab_text 
color: #ffffff;

Background Colour

body.voltron #tabs .tab:not(.add):not(.overflow-tab) .tab-content-holder
background-color: #000000;

Icons (havent covered them all sorry)

body.voltron #tabs .mail.tab > .tab-content-holder .icon, body.voltron #tabs .mail.selected > .tab-content-holder .icon, body.voltron #tabs .web.tab > .tab-content-holder .icon, body.voltron #tabs .web.selected > .tab-content-holder .icon 
background-color: #ffffff;
box-shadow: 0px 0px 2px 2px #ffffff;

0


thanks for posting... the low contrast has been hard on my blind eyes!

0


image avatar

Andrew J

Community Moderator

Glad it helped Megan - I had in the back of my mind that people with partial sight issues would be in real strife!

0


Please sign in to leave a comment.

Didn't find what you're looking for?

New post