Use my colors: Difference between revisions

From MozillaZine Knowledge Base
Jump to navigationJump to search
 
(15 intermediate revisions by 2 users not shown)
Line 1: Line 1:
This page addresses web page '''colors''' with some conceptual alternatives to use of  '''Tools, Options, Content, Fonts and Colors'''  to specify  font, links, and background colors and whether to allow pages to override your default color choices.
This page addresses web page '''colors''' with some conceptual alternatives to use of  '''Tools, Options, Content, [http://support.mozilla.com/kb/Options%20window%20-%20Content%20panel#w_fonts-colors Fonts and Colors]'''  to specify  font, links, and background colors and whether to allow pages to override your default color choices.


==Remove all styling with 'No Styles' styling==
==Remove all styling with 'No Styles' styling==
A quick way to view a page with bad color choices is to remove all styling,  which you can do with '''View,  page styles, no styles''',    and  return to normal  with  '''Basic style'''.  That includes formatting as well as colors, and is a quick way of making a page readble.
A quick way to view a page with bad color choices is to remove all styling,  which you can do with '''View,  page styles, no styles''',    and  return to normal  with  '''Basic style'''.  That includes formatting as well as colors, and is a quick way of making a page readable.


==Remove all styling with an extension==
==Remove all styling with an extension==
A quicker way to get an equivalent of 'No Styles' is the '''[https://addons.mozilla.org/firefox/1224 Read Easily]''' extension which can be toggled on/off with a toolbar button, context menu item or a hotkey (CTRL+SHIFT+Z) to disable/enable styles on web pages.  Applies to the current web-page.  (Although nothing changed in Firefox to make the extension actually incompatible, you will currently have to override non-compatibility to use this small extension in Firefox 3.)
A quicker way to get an equivalent of 'No Styles' is the '''[https://addons.mozilla.org/firefox/addon/1224 Read Easily]''' extension which can be toggled on/off with a toolbar button, context menu item or a hotkey (CTRL+SHIFT+Z) to disable/enable styles on web pages.  Applies to the current web-page.  (Although nothing changed in Firefox to make the extension actually incompatible, you will currently have to [[Updating_add-ons | override non-compatibility]] to use this small extension in Firefox 3.)


==Bookmarklets==  
==Bookmarklets==  
Line 14: Line 14:
==use of userChrome.css==
==use of userChrome.css==
You can make global styling changes, with [[userChrome.css]]  and [[userContent.css]] but it takes restarting of Firefox to implement and it is not very practical for most users for this type of a change as they would want to change things or instantly turn changes on or off.
You can make global styling changes, with [[userChrome.css]]  and [[userContent.css]] but it takes restarting of Firefox to implement and it is not very practical for most users for this type of a change as they would want to change things or instantly turn changes on or off.
[[Category:Websites]]


==use of Stylish extension==
==use of Stylish extension==
Styles from [http://userstyles.org userstyles.org] are used with the "'''Stylish'''" extension and would be the same as having them in your  userChrome.css to change your chrome appearance.  But stylish allows you to have separate style changes that you can turn on/off and use them immediately without restarting Firefox.  You can [http://userstyles.org/stylish read about Stylish] at userstyles.org and can '''[https://addons.mozilla.org/firefox/2108 install Stylish]''' at addons.  Stylish resides on your computer and is under your control.  Move the Stylish button to your toolbars using [[Customize]].
According to [https://bugzilla.mozilla.org/show_bug.cgi?id=1472948 this bug report] "The 'Stylish' extension was recently sold and the new company now logs all browser history.". [https://robertheaton.com/2018/07/02/stylish-browser-extension-steals-your-internet-history/] Supposedly [https://addons.mozilla.org/en-GB/firefox/addon/styl-us/ Stylus] is a fork of that extension without the spyware. See https://forum.userstyles.org/categories/stylish for a discussion about what's going on. Another fork is [https://github.com/JackCDK/osprey Osprey] but they have no plans to support Firefox, recommending you use the more bare bones [https://addons.mozilla.org/en-US/firefox/addon/stylrrr/ stylrr] add-on instead.
 
Styles from [http://userstyles.org userstyles.org] are used with the "'''Stylish'''" extension and would be the same as having them in your  userChrome.css to change your chrome appearance.  But stylish allows you to have separate style changes that you can turn on/off and use them immediately without restarting Firefox.  You can [http://userstyles.org/stylish read about Stylish] at userstyles.org and can '''[https://addons.mozilla.org/firefox/addon/2108 install Stylish]''' at addons.  Stylish resides on your computer and is under your control.  Move the Stylish button to your toolbars using [[Customize]].


===Global Styles===
===Global Styles===
Line 25: Line 29:
===Site Styles===
===Site Styles===
On a per site basis,  you can use  a  style from userstyles.org that is specific to a site(s) or domain(s).    Examples can be found in [http://userstyles.org/styles;site Site Styles] at userstyles.com.
On a per site basis,  you can use  a  style from userstyles.org that is specific to a site(s) or domain(s).    Examples can be found in [http://userstyles.org/styles;site Site Styles] at userstyles.com.
* [http://userstyles.org/styles/16842 Red: Mark visited links as read on unruly domains | userstyles.org], mark visited links red on selected sites,
* [http://userstyles.org/styles/17357 Red:visited -- Mark visited links Red | userstyles.org], mark visited links red on all sites.


There is a Stylish equivalent for "Read Easily" extension but without the button would not be as practical; however, you can modify colors exactly as you want, and you could also modify the code to apply to only certain sites, so it may be  an excellent starting point for your own customizations.  See [http://userstyles.org/styles/526 Read Easily extension's styles] and modify code to your own choice of sites and give your new style a new name.
There is a Stylish equivalent for "Read Easily" extension but without the button would not be as practical; however, you can modify colors exactly as you want, and you could also modify the code to apply to only certain sites, so it may be  an excellent starting point for your own customizations.  See [http://userstyles.org/styles/526 Read Easily extension's styles] and modify code to your own choice of sites and give your new style a new name.
Line 32: Line 39:
==Extensions==
==Extensions==
Some of the extensions involved with colors may be very large like 100kb so you might want to check carefully that it has features that you actually want/need.
Some of the extensions involved with colors may be very large like 100kb so you might want to check carefully that it has features that you actually want/need.
* [https://addons.mozilla.org/firefox/4242 Accessibar]  has a number of things that you can change for accessibility.
* [https://addons.mozilla.org/firefox/addon/4242 Accessibar]  has a number of things that you can change for accessibility (109 KB download).
* [http://codefisher.org/toolbar_button/toolbar_button_maker Custom Toolbar Buttons Maker] select "'''Toggle Page Colors'''", install, move custom button to toolbar.  Toggles preferences, removes some but not all images (loses the entire MozillaZine banner exactly same as the preference).  Another button that can be included is "'''Page Fonts'''", which toggles page fonts between your colors and the web page's colors.  Another button that may be needed to read some pages is "'''Toggle Styles'''" to toggle CSS styling off or back on.
* [https://addons.mozilla.org/en-us/firefox/addon/nosquint/ NoSquint] allows color settings  for each of text, background, unvisited links, and visited links (unlike Tools, Options which is as a group all or nothing).  Main purpose is  to allow you to adjust the text-only and full-page (both text and images) zoom levels as well as color settings  both globally (for all sites) and per site.
* [https://addons.mozilla.org/en-US/firefox/addon/1224/ Read Easily] adds toolbar button to  toggle page style on/off
* [https://addons.mozilla.org/en-US/firefox/addon/10596 toggleDocumentColors :: Firefox Add-ons] toggles [[Browser.display.background_colors | browser.display.use_document_colors]] (which is the same as Edit -> Preferences -> Colours -> Allow pages to choose their own colors).  Shortcut key is Ctrl+E.


===Auxiliary Extensions===
===Auxiliary Extensions===
Extensions to help change things but don't change the colors in themselves.
Extensions to help change things but don't change the colors in themselves.
* [https://addons.mozilla.org/en-US/firefox/addon/10596 toggleDocumentColors :: Firefox Add-ons] toggles [[Browser.display.background_colors | browser.display.use_document_colors]] (which is the same as Edit -> Preferences -> Colours -> Allow pages to choose their own colors).
* [http://codefisher.org/toolbar_button/toolbar_button_maker Custom Toolbar Buttons Maker] customized version of Toolbar Buttons of your own choices.
* [[Keyconfig extension]] (available [http://forums.mozillazine.org/viewtopic.php?t=72994 here]) allows you to configure keyboard shortcuts.  It works with [[Firefox]], [[Thunderbird]], and (probably) [[Mozilla Suite|Mozilla Suite/SeaMonkey]].  Shortcuts defined via a key can be changed. For more author notes see [http://dorando.emuverse.com/projects/mozilla/readme.html this].
* [[Keyconfig extension]] (available [http://forums.mozillazine.org/viewtopic.php?t=72994 here]) allows you to configure keyboard shortcuts.  It works with [[Firefox]], [[Thunderbird]], and (probably) [[Mozilla Suite|Mozilla Suite/SeaMonkey]].  Shortcuts defined via a key can be changed. For more author notes see [http://dorando.emuverse.com/projects/mozilla/readme.html this].


Line 49: Line 58:
* [http://live.gnome.org/GAP/ColorBlind GAP/ColorBlind - GNOME Live!] Colorblind Simulator, describes a Firefox extension that allows a user, and more importantly a developer, to simulate how a webpage might look for colorblind people.
* [http://live.gnome.org/GAP/ColorBlind GAP/ColorBlind - GNOME Live!] Colorblind Simulator, describes a Firefox extension that allows a user, and more importantly a developer, to simulate how a webpage might look for colorblind people.
* [http://jp29.org/wpowca.htm Web Content Accessibility Information.]  
* [http://jp29.org/wpowca.htm Web Content Accessibility Information.]  
==Test Colors Changes==
'''Test Color changes''' (CSS): <span style="color:black;border:1px solid;">black</span>, <span style="color:fuchsia;border:1px solid;">fuchsia</span>, <span style="color:green;border:1px solid;">green</span>, <span style="color:grey;border:1px solid;">grey</span>, <span style="color:lime;border:1px solid;">lime</span>, <span style="color:magenta;border:1px solid;">magenta</span>, <span style="color:maroon;border:1px solid;">maroon</span>, <span style="color:navy;border:1px solid;">navy</span>, <span style="color:olive;border:1px solid;">olive</span>, <span style="color:orange;border:1px solid;">orange</span>, <span style="color:pink;background-color:blue;border:1px solid;">pink on blue</span>, <span style="color:purple;border:1px solid;">purple</span>, <span style="color:red;border:1px solid;">red</span>, <span style="color:teal;border:1px solid;">teal</span>, <span style="color:white;background-color:black;border:1px solid;">white on black</span>, <span style="color:yellow;background-color:green;border:1px solid;">yellow on green</span>


==See also==
==See also==
* [[Accessibility features of Firefox]]. Firefox includes many features to make the browser and web content accessible to all users, including those who have low vision, no vision, or limited ability to use a keyboard or mouse.
* [[Accessibility features of Firefox]]. Firefox includes many features to make the browser and web content accessible to all users, including those who have low vision, no vision, or limited ability to use a keyboard or mouse. ''''At the bottom of MozillaZine KB articles, you will find additional related articles through category links.''''


==External Links==
==External Links==
* [http://en.wikipedia.org/wiki/Cascading_Style_Sheets Cascading Style Sheets - Wikipedia, the free encyclopedia]
* [http://en.wikipedia.org/wiki/Cascading_Style_Sheets Cascading Style Sheets - Wikipedia, the free encyclopedia]
[[Category:Accessibility (Firefox)]]

Latest revision as of 23:29, 4 July 2018

This page addresses web page colors with some conceptual alternatives to use of Tools, Options, Content, Fonts and Colors to specify font, links, and background colors and whether to allow pages to override your default color choices.

Remove all styling with 'No Styles' styling

A quick way to view a page with bad color choices is to remove all styling, which you can do with View, page styles, no styles, and return to normal with Basic style. That includes formatting as well as colors, and is a quick way of making a page readable.

Remove all styling with an extension

A quicker way to get an equivalent of 'No Styles' is the Read Easily extension which can be toggled on/off with a toolbar button, context menu item or a hotkey (CTRL+SHIFT+Z) to disable/enable styles on web pages. Applies to the current web-page. (Although nothing changed in Firefox to make the extension actually incompatible, you will currently have to override non-compatibility to use this small extension in Firefox 3.)

Bookmarklets

You can temporarily use a bookmarklet to change colors or other page styling then use F5 to reset the appearance back to normal, some bookmarks will toggle by running them again. Reloading a page also wipes out changes made by bookmarklets. A bookmarklet is JavaScript code that you can be run from the location bar; therefore, it can be bookmarked, and invoked as a bookmark. Assigning an easily remembered word (or characters) as a Keyword to the bookmark properties would be highly recommended for easy access.

An example would be zap colors bookmarklet on the Bookmarklets for Zapping Annoyances page at squarefree.com. Click on the "zap colors" button on that page to see change. The button is actually a link. You can drag the link to a folder on your toolbars, and give it a keyword shortcut so you can implement it from the location bar, or drag it directly to the bookmarks toolbar itself and use it like a button.

use of userChrome.css

You can make global styling changes, with userChrome.css and userContent.css but it takes restarting of Firefox to implement and it is not very practical for most users for this type of a change as they would want to change things or instantly turn changes on or off.

use of Stylish extension

According to this bug report "The 'Stylish' extension was recently sold and the new company now logs all browser history.". [1] Supposedly Stylus is a fork of that extension without the spyware. See https://forum.userstyles.org/categories/stylish for a discussion about what's going on. Another fork is Osprey but they have no plans to support Firefox, recommending you use the more bare bones stylrr add-on instead.

Styles from userstyles.org are used with the "Stylish" extension and would be the same as having them in your userChrome.css to change your chrome appearance. But stylish allows you to have separate style changes that you can turn on/off and use them immediately without restarting Firefox. You can read about Stylish at userstyles.org and can install Stylish at addons. Stylish resides on your computer and is under your control. Move the Stylish button to your toolbars using Customize.

Global Styles

You can install a style into Stylish as a global style to change all web pages, as in Zap Colors style, which is similar to the Zap Colors bookmarklet. This particular example would not be as practical as a toolbar button, or a bookmarklet because it overrides all web pages and you have to go through Styles Manager to change. But you could easily convert it to be site specific by creating a new style modified to be site specific. Another style of interest might be Inputs Default to Black on White style.

But there are a lot of Global styles available at userstyles.org that actually are intended for global use, and many are comparable to Themes used in Firefox.

Site Styles

On a per site basis, you can use a style from userstyles.org that is specific to a site(s) or domain(s). Examples can be found in Site Styles at userstyles.com.


There is a Stylish equivalent for "Read Easily" extension but without the button would not be as practical; however, you can modify colors exactly as you want, and you could also modify the code to apply to only certain sites, so it may be an excellent starting point for your own customizations. See Read Easily extension's styles and modify code to your own choice of sites and give your new style a new name.

Most of the styles at userstyles.org are probably site specific styling changes, each site, or groups of sites would be another style, so there is a big proliferation in that area of styling changes way beyond simple color changes.

Extensions

Some of the extensions involved with colors may be very large like 100kb so you might want to check carefully that it has features that you actually want/need.

  • Accessibar has a number of things that you can change for accessibility (109 KB download).
  • Custom Toolbar Buttons Maker select "Toggle Page Colors", install, move custom button to toolbar. Toggles preferences, removes some but not all images (loses the entire MozillaZine banner exactly same as the preference). Another button that can be included is "Page Fonts", which toggles page fonts between your colors and the web page's colors. Another button that may be needed to read some pages is "Toggle Styles" to toggle CSS styling off or back on.
  • NoSquint allows color settings for each of text, background, unvisited links, and visited links (unlike Tools, Options which is as a group all or nothing). Main purpose is to allow you to adjust the text-only and full-page (both text and images) zoom levels as well as color settings both globally (for all sites) and per site.
  • Read Easily adds toolbar button to toggle page style on/off
  • toggleDocumentColors :: Firefox Add-ons toggles browser.display.use_document_colors (which is the same as Edit -> Preferences -> Colours -> Allow pages to choose their own colors). Shortcut key is Ctrl+E.

Auxiliary Extensions

Extensions to help change things but don't change the colors in themselves.

Themes

Changes to the chrome is a huge item with Firefox and Mozilla browsers that there is a whole category named Themes that are installed as Themes and not as an Extension. You can have a look at the Themes available at addons.mozilla.org

Color Blindness

Test Colors Changes

Test Color changes (CSS): black, fuchsia, green, grey, lime, magenta, maroon, navy, olive, orange, pink on blue, purple, red, teal, white on black, yellow on green

See also

  • Accessibility features of Firefox. Firefox includes many features to make the browser and web content accessible to all users, including those who have low vision, no vision, or limited ability to use a keyboard or mouse. 'At the bottom of MozillaZine KB articles, you will find additional related articles through category links.'

External Links