User-Styling the foofAid Interface

Why would I—and what is this “user-styling” anyway?

Well, let’s say you really like some of foofAid’s neat features, for example the coloured text or the error-checking. But you don’t particularly like some of the choices that have been made for the default look of the interface. Perhaps you don’t quite like the default colours for the highlighted text; or you like the colouring of text, but don’t want it to be bold or italic; or you think the formatting buttons would be easier to hit if they were a little bigger (and your screen is large enough for that, so why aren’t they?); etc.

That’s where your “user style sheet” comes in! A user style sheet is a way of telling your browser to override, just for yourself, some of the choices that were made by a web-page designer. Firefox’s user-styling capabilities, in particular, give you very fine-grained control over what you want to change, and where.

Finding the Firefox profile

So, if you want to try out what you can do with this, first you’ll have to find the correct place to put your instructions. Unfortunately, the location varies widely for different operating systems. Fortunately, however, there’s an easy way of locating the correct folder from within Firefox.

When you’re in Firefox, choose “Help” on the menu, and then “Troubleshooting Information”. This will open a new tab with some information. It has a section “Application Basics” at the top; in there, there’s an entry “Profile Directory”. If you click the button next to that (which should read something like “Show in Finder” or “Open Containing Folder”), it should open your profile folder in your file manager.

Inside your profile folder (which should be called something like “cn53rbix.default” (that’s one of mine)—some random letters and digits and then “.default”), there might already be a folder called “chrome”; if there isn’t, create it. This is the place for your user style sheet.

If you already have a file called (exactly) “userContent.css” inside the “chrome” folder, open it in your favourite text editor; if you don’t, create a new file with exactly that name (the case matters!) and place it in the “chrome” folder.

How to write user style sheets

Now that we know where to put our user styles, let’s go ahead and actually write some!

User styles are just CSS (Cascading Style Sheets), so if you already know some CSS, that will help. If you don’t, however, it should be safe to copy what you like or don’t like (either from here or from other sources, e.g., the tutorials and references at W3Schools), and just try it out. Even if you really don’t like what you see, you can just delete your experiments from the user style sheet and everything will be back to how it looked before.

Note: Firefox only reloads user style sheets when you close and re-open it. So whenever you’ve edited and saved your file, you will have to quit Firefox and re-start it for your changes to take effect.

One very helpful feature in Firefox’s user style sheets is the ability to restrict them to just some specific sites. So if you decide that you really want to change one site’s background colour to bright red, you can make sure that that change will only apply to the one site and not all other sites as well! To restrict your experiments to just the foofAid domain, copy the following lines to your file:

@-moz-document domain(www.foofaid.com)
{
}

Everything you place between this pair of curly braces will only apply to foofAid and will not mess up the rest of the web for you. (If you want more information on the different ways of restricting styles so they only apply to some pages, see this blog post.)

Okay, we’re finally ready to change foofAid’s appearance!

Example 1: Changing the default inline markup colours

Let’s say you love foofAid’s coloured and/or shaded text for inline markup, but you really don’t fancy the default colours much. Well, no worries! They can all be changed really easily.

The colours foofAid uses for the text depend upon the “Tag shading” drop-down box to the right of the page text. If you choose “Color text”, the text will only have a colour, but no background colour. If you choose “Shade text”, it will be the other way around. If you choose “Both”, you will get both a colour and a background colour, and with “None” you will get neither. foofAid does this by setting a different class on the text box, depending on the setting in the drop-down: tag_text for the text colours and tag_shading for the background colours (both if you’ve chosen both).

The styles I use are for the “Color text” option and just change the colours to different ones:

.tag_text b
{
  color: #1181b7 !important;
}

.tag_text i
{
  color: #0000cc !important;
}

.tag_text .small-caps
{
  color: #9900c5 !important;
}

.tag_text .font-change
{
  color: #f17700 !important;
}

.tag_text .gesperrt
{
  color: #78b500 !important;
}

Note that all of the rules end in !important. If you leave that out, overriding the site’s original style sheet won’t work; only by adding the !important marker, you tell Firefox that your user style sheet should not just add to the original styles, it should override what’s already there—that is, you change the priorities so that your own styles are more important than the original ones.

You might like my colour choices even less than the defaults, of course; if so, you can choose your very own colours and put their values into your user style sheet! You can get those cryptic HTML colour values (which are three sets of two hexadecimal digits each, for the red, green and blue parts of the colour—but if this doesn’t make any sense to you, don’t worry!) from most graphic programs’ colour pickers, or from various web sites (e.g., this one).

If you want to change the background colours for the “Shade text” (or “Both”) option, just replace .tag_text with .tag_shading and color with background-color; here’s an example for changing the background colour for small-capped text to match the text colour set above:

.tag_shading .small-caps
{
  background-color: #f3d7ff !important;
}

Example 2: Changing some more colours

Okay, so we’ve changed all the inline markup colours—but what if we’ve picked colours that really don’t go very well with the default colour for out-of-line markup (poetry, block quotes, footnotes, illustrations), or with the yellow punctuation highlights? Or what if we liked foofAid’s default colours for all of the markup after all, but we really didn’t like the default colours for foofAid’s “probable” and “possible” error highlights? Well, we can change all those as well, of course!

Here are, again, my personal choices, with comments (in /* */, which is CSS’s way of writing comments, not poetry) so that the style sheet example should be self-explanatory:

/* block markup, including footnotes, illustrations, etc. */
.outoflinetag
{
  background-color: #dcff98 !important;
}

/* punctuation next to markup */
.punctuation-issue
{
  background-color: #dddddd !important;
}

/* probable error */
.probable-issue
{
  background-color: #ea0000 !important;
  color: white;
}

/* possible error */
.possible-issue
{
  background-color: #aa0000 !important;
  color: white;
}

Example 3: Removing styles from inline markup

What if you like foofAid’s coloured text, but you are distracted by the inline markup actually showing up in italics, bold, small-caps, or gesperrt? If so, you can easily remove those styles (all or just some of them):

#finalText b
{
  font-weight: normal !important;
}

#finalText i
{
  font-style: normal !important;
}

#finalText .small-caps
{
  font-variant: normal !important;
}

#finalText .gesperrt
{
  letter-spacing: 0 !important;
  margin-right: 0 !important;
}

You can of course just choose some of the above rules and leave out others; if you like bold and italic text to look bold/italic, but really don’t like the look of gesperrt DPCustomMono2, just copy the last of the above little snippets to your user style sheet.

Example 4: Making the buttons bigger

The contents of the text box are not the only thing you can style differently in foofAid. If, for example, you thought that all the buttons are really too small and it would help you if they were a little bigger, that can be accomplished as well:

input[type='button'],
input[type='submit']
{
  font-size: 14px !important;
}

If you want the larger size for just the formatting buttons above the page text and not all the other buttons as well, you can do that like this:

#formatting-controls input[type='button'],
#formatting-controls input[type='submit']
{
  font-size: 14px !important;
}

And what if I want to change something else?

Well, I’m sure there are lots more things that it might be neat to change and that just weren’t particularly important to me or that I just haven’t thought of yet. If you come up with anything else you want to change, it would probably help if you knew at least some HTML and CSS, in order to find the parts of the original HTML and CSS files that you want to override. The W3Schools web site has a lot of information and good references for HTML and CSS and might be able to help you find your way.

If you need help with figuring out whether some specific thing in foofAid can be changed—and if so, how—, always feel free to send a PM to Frau Sma describing what you’d like to achieve, and I’ll be happy to look into it and see whether I can help you get what you want!

Helpful links