High Contrast CSS for the Community skin for Firefox and Chrome users
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Feedback
- :
- Community Site Feedback
- :
- High Contrast CSS for the Community skin for Firef...
High Contrast CSS for the Community skin for Firefox and Chrome users
21-04-2016 3:28 PM - edited 21-04-2016 3:50 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
High contrast - Firefox instructions
21-04-2016 3:34 PM - edited 21-04-2016 3:52 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
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.
High contrast - Chrome instructions
21-04-2016 3:45 PM - edited 21-04-2016 3:51 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
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.
Re: High contrast - Chrome instructions
21-04-2016 4:07 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Thanks Jaread83 , its a vast improvement
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 .
Re: High contrast - Chrome instructions
on 21-04-2016 4:11 PM - last edited on 21-04-2016 4:23 PM by Strat
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
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.
Re: High contrast - Chrome instructions
25-04-2016 1:29 PM
- Mark as New
- Bookmark
- Subscribe
- Subscribe to RSS Feed
- Highlight
- Report to Moderator
Thanks jaread83, i also find this a vast improvement to the forum.
- Subscribe to RSS Feed
- Mark Topic as New
- Mark Topic as Read
- Float this Topic for Current User
- Bookmark
- Subscribe
- Printer Friendly Page
- Plusnet Community
- :
- Forum
- :
- Feedback
- :
- Community Site Feedback
- :
- High Contrast CSS for the Community skin for Firef...