topic Re: High contrast - Chrome instructions in Community Site Feedback

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

jaread83 — Thu, 21 Apr 2016 14:50:40 GMT

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.

High contrast - Firefox instructions

jaread83 — Thu, 21 Apr 2016 14:52:02 GMT

Firefox users

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

Look for the Stylish icon () in your browser and click it
Navigate to 'Write new style' > 'For community.plus.net' (this will open a new tab)
Visit this link for the CSS code: http://pastebin.com/jzTBtTwy
Copy and paste the code from this page directly into the Stylish addon tab we just opened.
Click save on Stylish.

The Community should now show the high contrast colours.

High contrast - Chrome instructions

jaread83 — Thu, 21 Apr 2016 14:51:43 GMT

Chrome users

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

Look for the Stylebot icon () in Chrome and click it
Navigate to 'options'. This will open a new tab.
Click 'Styles' on the left.
On the right side panel, click 'add new style'. This will open a modal box to edit.
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.
When finished, click 'add'.

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

Re: High contrast - Chrome instructions

rongtw — Thu, 21 Apr 2016 15:07:46 GMT

Thanks Jaread83 , its a vast improvement

Re: High contrast - Chrome instructions

jaread83 — Thu, 21 Apr 2016 15:23:16 GMT

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

Re: High contrast - Chrome instructions

Fifer — Mon, 25 Apr 2016 12:29:04 GMT

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