最近の検索
最近の検索はありません
Temporary high contrast styling for ticket tabs
Community Moderator
投稿日時:2016年11月02日
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件のコメント
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