Recent searches
No recent searches
Temporary high contrast styling for ticket tabs
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
Andrew J
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
Megan
thanks for posting... the low contrast has been hard on my blind eyes!
0
Andrew J
Glad it helped Megan - I had in the back of my mind that people with partial sight issues would be in real strife!
0