Cool XUL tricks with Firefox using Stylish

Firefox is an excellent browser that runs on an open, extendable platform by Mozilla which many users have improved through the creation of extensions, themes and add-ons. As a web developer / design and code hobbyist, I’m always looking for ways to give myself more power out of my browser and communicate ideas visually in the most efficient way. Using Stylish (a program that runs css on top of userStyles.css), I’ve found I can not only edit the looks of webpages with CSS but XUL, the building language of Firefox. This allows for some nice little enhancements.

Align Bookmarks to the Top Right

Here’s one I brewed up myself spawning from an discussion on IRC where someone pointed out the clutter I had going on in my bookmarks toolbar, I set out to condense my collection.

The plan was to align a few folders to the top right of my browser at the same level as my file menu and remove the bookmarks toolbar. Sounds easy enough right? Well.. perhaps it’s my ignorance in the XUL / CSS relationship that doesn’t allow me to float boxes but I actually ended up doing a strange little trick to make this successful.

To figure out how to get it to align to the right, I had to first figure out some class and id names. That I started trying different atrributes with….

Until I came up with the code below.

/* Align Bookmarks to the top right of Firefox
   Tyler Mulligans www.doknowevil.net

-- Right click the your file menu and click customize to drag around your bookmarks.
*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

#toolbar-menubar { direction:rtl !important; }
#toolbar-menubar #menubar-items, #toolbar-menubar .bookmarks-toolbar-items { direction:ltr !important; }

Using that code in stylish, I right clicked my file menu, click customize and dragged my file menu, bookmarks and loader to their appropriate places.

Fixing webpages that don’t explicitly define the background and foreground as white and black

I changed my default background color so that I’m not blinded by white when I open a new blank tab. Unfortunately many web developers assume that users have a white background with black text and don’t bother to explicitly define them. I use the script below to fix 95% of these pages… some just use inheritently bad design techniques like defining their background color in the html tag (something w3c recommended you DON’T do in HTML. While technically okay in XHTML, I think it’s better to use the first VISUAL tag on the page. After the HTML tag you have a head… and title.. etc, which technically inherit the HTML tag settings.

@-moz-document url-prefix(http://), url-prefix(https://) { body { background-color:#fff; color:#000; } }

Theme specific enhancements

I use an unusual brown theme and I’ve do what I can to match and extend my applications. I borrowed and enhanced the scripts below

Tabs / Tab Bar

A darker background and more prominent selected tab (pictured above)

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

[class="close-button tabs-closebutton"], .tabbrowser-tabs tab[selected="true"] {
  -moz-appearance: none !important;
  background-color: #654C30 !important;
}

.tabbrowser-tab[selected="true"] .tab-text {
  color: white !important;
  -moz-opacity: .85 !important;
}

.tabbrowser-tab[selected="true"]:hover {
  -moz-opacity: 1 !important;
  background-color: #755533 !important;
}

.tabbrowser-tabs {
  border-top:1px solid #5F4A2A;
  border-bottom:2px solid #503C1E;
  background-color:#120F0B !important;
  padding:5px 1px 0 1px;
}

Awesome Bar

Added colors to match my theme.

/*
 _________________________________________________________________________
|                  |                                                      |
|          Title:  |  Awesome Bar Background Color Based on Type (WOW)    |
|    Description:  |  Different Colors based on Bookmark, tag, or regular |
|         Author:  |  -=Ben=-                                             |
|   Date Created:  |  July 3, 2008                                        |
|   Last Updated:  |  October 7, 2008                                     |
|        Version:  |  1.0.0.3                                             |
|__________________|______________________________________________________|

*/

@namespace url(http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul);

.autocomplete-richlistitem[type="bookmark"] /*Blue*/
{
  background-color: #45586A;  /*#E3FCFE;*/
  color: #fff;
}

.autocomplete-richlistitem[type="favicon"] /*Green*/
{
  background-color: #556A45;  /*#E3FEE5;*/
  color: #fff;
}

.autocomplete-richlistitem[type="tag"] /*Yellow*/
{
  background-color: #6A5745;
  color: #fff;
}

.autocomplete-richlistitem:focus
{
  background-color: #0A246A;
  color: #FFFFFF;
}

If you enjoy my theme, you can download a beta I’ve been working on here: http://z.nexuizninjaz.com/linux/themes/