***text-here****
Revisiting Readability Problems in Firefox / Iceweasel
A couple years ago I posted to one of my other blogs with some solutions regarding readability problems I had encountered at that time using Mozilla Firefox. I looked into this again recently because the problems were recurring with Iceweasel 2.0.0.17 running under Debian "Etch" using the Sapphire window manager.
Overview
This solution uses the chrome files found in the user's default profile directory (~/.mozilla/default/[PROFILE_NAME]/chrome). The two files of interest reside in this directory. Their filenames are
-
`
- userChrome.css
- userContent.css
Mozilla Unix Help Files
The Mozilla help page entitled Customizing Mozilla details the settings used here, as well as a large number of similar or related user interface setting changes that can be made from these two files.
Another file provided by the Mozilla project site is Mozilla DPI-related Font Size Issues on Unix.
Note that both these help documents are Unix-centric. I don't have the instructions for doing this under MS Windows.
Annotated File Listings
/*
* userChrome.css – taken from userChrome–example.css found in
* ~/.mozilla/default/profile–directory/chrome/
* for Iceweasel 2.0.0.17
*/
/*
* This file can be used to customize the look of Mozilla's user interface
* You should consider using !important on rules which you want to
* override default settings.
*/
/*
* Do not remove the @namespace line –– it's required for correct functioning
*/
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */
/*
* Some possible accessibility enhancements:
*/
/*
* Make all the default font sizes 20 pt:
*/
* {
font–size: 14pt !important
}
/*
* Make menu items in particular 15 pt instead of the default size:
*/
menupopup > * {
font–size: 12pt !important
}
/*
* Give the Location (URL) Bar a fixed–width font
*/
#urlbar {
font–family: monospace !important;
}
/*
* Eliminate the throbber and its annoying movement:
*
* #throbber–box {
* display: none !important;
* }
*/
/*
* For more examples see http://www.mozilla.org/unix/customizing.html
*/
/*
** Examples added from mozilla.org site examples
*/
/* Set font size and family for dialogs
* and other miscellaneous text
*/
window {
font–size: 3.5mm !important;
font–family: helvetica !important;
}
/* Single line text fields */
input {
/* Set font size and family of text fields */
font–family: clean !important;
font–size: 13px !important;
/* Set background color to something a little prettier */
background–color: rgb(200, 255, 220) !important;
/* Add some key bindings.
* For an explanation of how to do this,
* see below under "Custom key bindings".
*/
–moz–binding: url("resource:///res/builtin/myHTMLBindings.xml#myInputFields") !important;
}
/* Multi–line textareas */
textarea {
background–color: rgb(200, 255, 220) !important;
}
/* The dropdown address and autocomplete windows are grey.
* To make them match better with the URL field and look more like 4.x:
*/
/* URL dropdown box */
#ubhist–popup
{
background : white !important;
border : 1px solid black !important;
padding : 0px !important;
}
/* autocomplete text field */
.textfield–popup
{
background : white !important;
border : 1px solid black !important;
}
#ubhist–popup > .popup–internal–box, .textfield–popup > .popup–internal–box
{
border–left : 1px solid white !important;
border–top : 1px solid white !important;
border–right : 1px solid white !important;
border–bottom : 1px solid white !important;
}
/* 3. Add a border (line of 1px) to the tooltips. */
.tooltip–label
{
border : 1px solid !important;
}
/*
** userContent.css – taken from examples at
** http://www.mozilla.org/unix/customizing.html
** for Iceweasel 2.0.0.17
*/
/* Obviate need to zoom on many sites. */
html>body {
font–size: 100% !important;
line–height: normal !important;
}
/*
* Disable the deprecated HTML <font> tag. (Like above,
* reduces need to zoom.)
*/
font {
font–family: inherit !important;
font–size: inherit !important;
color: inherit !important;
}
/* Put a thin black border around all dropdown forms like NS4.x */
:–moz–dropdown–list {
border: 1px solid black !important;
border–top–style: solid !important;
}
/* Disable marquee display */
marquee {
–moz–binding: none; display: block; height: auto !important;
/* This is better than just display:none !important;
* because you can still see the text in the marquee,
* but without scrolling.
*/
}
/*
* Until bug 105547 is fixed, a helpful workaround to
* highlight some links which would pop up a new window:
*/
:link:hover[target="_blank"],:visited:hover[target="_blank"] {
color: white !important; background: red !important;
}
:link:hover[target="_new"],:visited:hover[target="_new"] {
color: white !important; background: red !important;
}
/*
* Many input forms have typing areas so small it's hard to use
* them. On many of them, this sets a minimum width of about 50
* characters, and a miniumum height of about 12 characters.
*/
textarea {
min–width: 50ex !important;
min–height: 12em !important;
}
/* Improve scroll performance on slow machines on some sites. */
* {
background–attachment: scroll !important;
}
/*
* Ignore user–specified style in mail messages.
* See http://bugzilla.mozilla.org/show_bug.cgi?id=18427 for details.
*/
.moz–text–html font, .moz–text–html div, .moz–text–html body {
font–size: inherit !important;
font–family: inherit !important;
color: inherit !important;
background–color: inherit !important;
background–image: inherit !important;
text–align: inherit !important;
text–indent: inherit !important;
}
