Subscribe to How-To Geek

Spice Up that Boring about:blank Page in Firefox

The blank tab page in Firefox is just a plain white boring nothing – until now. Using the Stylish extension for Firefox, we can set a custom style for the page, and even embed images into the style to make it really look great.

If you are feeling ambitious you can easily create your own style, or you can skip down further to take a look at some of the styles already created by the people at UserStyles, some of which are really sweet.

Creating Your Own Style

I’ll assume you have the Stylish extension for Firefox already installed, so click on the icon in the status bar, choose Write Style and then Blank Style.

image

Give your style a description, and then paste in the text I’ve provided below. This will make a blank white page with your image in the center…

image

@namespace url(http://www.w3.org/1999/xhtml);
@-moz-document url(”about:blank”) {

* {
   background:
      url(”data:image/png;base64,INSERT BASE64 ENCODED IMAGE HERE”);
      margin:0px;
      background-position:center;
      background-attachment:fixed;
      background-repeat:no-repeat;
   }
}

To insert images into the style, you have two choices:

  1. You can directly insert a link to an image hosted on a server by replacing the url() line in the CSS with this one:

    url(http://www.server.com/link_to_image.png);

  2. You can base64 encode an image into text instead so that it’s embedded into the stylesheet, which is the best option for most people. How do you do this? There’s any number of web-based converters that will handle this, including this one that I found: Binary File to Base64 Encoder / Translator – greywyvern.com

Just copy the converted text into your stylesheet where indicated, and it’ll work. If your image isn’t PNG format, you should change the image/png line to reflect the correct type. (most of the converters will give you the correct format).

Download User-Created Custom Styles

image

Keyboard Ninja -  HowToGeek.com

image

Light Firefox – http://blog.mzzt.net/2007/04/10/aboutblank/

image

Dark Firefox – http://userstyles.org/styles/2433

image

Brushed – http://userstyles.org/styles/1746

image

Blue Firefox – http://userstyles.org/styles/1761

You can find a ton of user styles over at userstyles.org.

| More
This article was originally written on 09/5/07 Tagged with: Firefox, Firefox & Web

Daily Email Updates

You can get our how-to articles in your inbox each day for free. Just enter your name and email below:


Name:
Email:

Comments (6)

  1. Nathalie

    i didn’t like the converter you proposed. this is one that actually works: http://www.motobit.com/util/ba.....ncoder.asp
    overall, great idea!

  2. Wulf

    Nathalie: Wow, great link. I’d been using the “data: URI kitchenâ€? at http://software.hixie.ch/utilities/cgi/data/data

  3. Jayson

    For the record, this hack borks the new Gmail’s reply box.

  4. Daniel Ritchie

    This has never been a great idea, if you take a look at how about:blank is used. http://www.honestlyillustrated.....bout:blank

  5. Jeremy

    Hi. This is an awesome tutorial. Keep it up!

    However, whenever I reload(close and open) my FireFox browser, the stylish disappears and all I get is a blank page when I open a new tab.

    I am wondering if any of you encounter this.

    Nonetheless, great tutorial. Step by step. Awesome!

  6. JHubbard92

    Brilliant Geek :-)


Leave a Comment




Leave your friendly comment here.

If you have a computer help question, click here to leave it on the forums instead.

Note: Your comment may not show up immediately on the site.

Our Friends
Getting Started


About How-To Geek
What Is That Process?
svchost.exe
jusched.exe
dwm.exe
ctfmon.exe
wmpnetwk.exe
wmpnscfg.exe
rundll32.exe
wfcrun32.exe
Ipoint.exe
Itype.exe
Wfica32.exe
Mobsync.exe
conhost.exe
Dpupdchk.exe Adobe_Updater.exe

Copyright © 2006-2009 HowToGeek.com. All Rights Reserved.