cancel
Showing results for 
Search instead for 
Did you mean: 

High Contrast CSS for the Community skin for Firefox and Chrome users

Community Gaffer
Community Gaffer
Posts: 2,842
Thanks: 1,524
Fixes: 62
Registered: 22-02-2016

High Contrast CSS for the Community skin for Firefox and Chrome users

I have been reading that some users would like to use a custom stylesheet to override colours and layouts and I thought it would be a good idea to get involved in some way going by some of the feedback I have received about the community. One of issues that has arisen a few times is to do with visual impairment and no way of adjusting the contrast of the site colours. I thought it would be best to create a new thread about this as my reply would get buried.

If you using Firefox or Chrome there are extensions available so you can inject custom styles for specific websites and adjust it more to your liking. Using the Firefox extension Stylish, I have created a high contrast version of the community for those who have trouble viewing the site. The Chrome equivilant is called Stylebot. Attached are screenshots of what the community will look like if you choose to override the styles using my code (provided as seperate posts below with instructions).

I would like to continue to work with you all to improve this so please reply with any sensible suggestions or let me know if I missed anything.

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

5 REPLIES
Community Gaffer
Community Gaffer
Posts: 2,842
Thanks: 1,524
Fixes: 62
Registered: 22-02-2016

High contrast - Firefox instructions

Firefox users

Visit https://addons.mozilla.org/en-gb/firefox/addon/stylish/ and add the Stylish extension to your browser

  1. Look for the Stylish icon (Screen Shot 2016-04-21 at 15.35.06.png) in your browser and click it
  2. Navigate to 'Write new style' > 'For community.plus.net' (this will open a new tab)
  3. Visit this link for the CSS code: http://pastebin.com/jzTBtTwy
  4. Copy and paste the code from this page directly into the Stylish addon tab we just opened.
  5. Click save on Stylish.

The Community should now show the high contrast colours.

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Community Gaffer
Community Gaffer
Posts: 2,842
Thanks: 1,524
Fixes: 62
Registered: 22-02-2016

High contrast - Chrome instructions

Chrome users

Visit https://chrome.google.com/webstore/detail/stylebot/oiaejidbmkiecgbjeifoejpgmdaleoha?hl=en and download and install the Chrome application for Stylebot.

  1. Look for the Stylebot icon (Screen Shot 2016-04-21 at 15.41.01.png) in Chrome and click it
  2. Navigate to 'options'. This will open a new tab.
  3. Click 'Styles' on the left.
  4. On the right side panel, click 'add new style'. This will open a modal box to edit.
  5. add 'community.plus.net' to the URL input on this box then visit http://pastebin.com/p5QZUjtC to get the code to paste into the big input box.
  6. When finished, click 'add'.

The community will now be in a high contrast colour mode after refreshing the page.

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

rongtw
Seasoned Hero
Posts: 6,316
Thanks: 1,152
Fixes: 11
Registered: 01-12-2010

Re: High contrast - Chrome instructions

Thanks Jaread83  , its a vast improvement Thumbs Up

Asus ROG Hero Vii Z97 , Intel i5 4690k ,ROG Asus Strix 1070,
samsung 850evo 250gig , WD black 2 TB . Asus Phoebus sound ,
16 gig Avexir ram 2400 , water cooling Corsair H100i gtx ,
Corsair 750HXI Psu , Phanteks Enthoo pro case .
Community Gaffer
Community Gaffer
Posts: 2,842
Thanks: 1,524
Fixes: 62
Registered: 22-02-2016

Re: High contrast - Chrome instructions

Thanks @rongtw, I hope it helps some of the more regular users with using the site. Am happy to make changes if any are needed but I think I have managed to catch all the important stuff.

Moderator's note by Dick (Strat): Full quote of preceding post removed as per the forum rules

Frontend Web Developer | www.plus.net

If you have an idea to improve the community, create a new topic on our Community Feedback board to start a discussion about your idea.

Fifer
Hooked
Posts: 6
Thanks: 4
Registered: 14-04-2016

Re: High contrast - Chrome instructions

Thanks jaread83, i also find this a vast improvement to the forum.Thumbs Up