Use my colors

From MozillaZine Knowledge Base
Revision as of 16:01, 16 January 2011 by Dmcritchie (talk | contribs) (Extensions - NoSquint can change link colors)
Jump to navigationJump to search

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

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.
  • 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