Customize Firefox’s about:blank page

Every time I open a new tab in Firefox, I’m greeted with about:blank.  As far as creative names go, the name of this page is not very creative because it is just that – blank:

Default state of about:blank

For most of us this isn’t a big deal because we don’t really spend much time staring at a new, open tab. However others may want to customize it. This article will teach you how to do just that.

To customize your about:blank page, you’ll need a user-content.css file.  To make one, press the Windows key and R simultaneously.  A box titled “Run” will pop up.  In it, type %APPDATA%.  Then go to Mozilla\Firefox\Profiles. In that folder you should see a folder named something like [randomtext].[profilename]:

For most of us there should only be one folder like this. For others (who created multiple profiles) there will be multiple folders. If there are multiple folders, select the folder corresponding to the profile that you want to customize about:blank for.

Once you are in the [randomtext].[profilename]: folder, look for the chrome folder. In that folder, find userContent-example.css and rename it to userContent.css.

Next, open userContent.css in Notepad or any other text editor (Notepad is preferred over something like Word because it is more simple) add the following code to the end of the file:

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

* {
background: url(‘[INSERT IMAGE URL HERE]‘);
background-color: #000000;
background-position:bottom right;
background-attachment:fixed;
background-repeat:no-repeat;
}
}

Where it says [INSERT IMAGE URL HERE], put the URL of either an image from the web (Ex: http://www.google.com/logos/giroux1.gif) or the URL of an image on your computer (Ex: file://C:/Users/Public/Pictures/Sample Pictures/desert.jpg).

In addition to changing the background image, you can

  • Change the background color via the background-color field. Change the #000000 code to whatever color you want (be sure to leave the # for whatever new code you enter). The code is in hex for colors is RGB. To find a list of colors and their corresponding codes, visit Wikipedia.
  • Change the position of the background image (assuming you have it set to no-repeat otherwise the position is pointless) via the background-position field. Here is a list of what you can enter:

top left
top center
top right
center left
center center
center right
bottom left
bottom center
bottom right
x% y%
xpos ypos
inherit

After you have edited the settings as you please, save the file and restart Firefox (if you had it open). You should then see something like this every time you open a new tab:

Enjoy the extra eye candy!

[via MozillaLinks]

UPDATE:  I added clarification on how to open %APPDATA%.

Share this post

Comments

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code> <del datetime=""> <em> <i> <q cite=""> <strike> <strong>

38 comments

  1. Ziggy

    @Serviceman:

    To avoid the “mess” – you need to add a few lines to the code, check out this example:

    /* about:blank – LavaFox & BlackFox */

    @namespace url(http://www.w3.org/1999/xhtml);

    @-moz-document url(“about:blank”) {

    *:empty:not([style]):not([text]):not([class]):not([onresize]) {

    background: #000000 url(“chrome://browser/skin/Extra/LavaOrb.jpg”);
    margin:0px;

    background-position:center;

    background-attachment:fixed;

    background-repeat:no-repeat;

    }

    .editable, .editable * {

    background:none !important;

    }

    }

  2. Ziggy

    The easy & safe way to do this is by installing “Stylish” add-on for Firefox & choosing from the various styles or making one. The advantage is having the ability to switch between the styles & to get updates from their author.

  3. ebony

    I really enjoy reading your articles. Even though I have no “CLUE” what you are talking about. Every time I think I have gained a bit of knowledge, I read one of your articles and realize I have a loooottttt to learn.

    Thanks for sharing.

  4. Conall

    I can’t seem to get this to work properly, my code won’t even change the background colour! can anyone help me with this? here’s my code:/* * Edit this file and copy it as userContent.css into your * profile-directory/chrome/ *//* * This file can be used to apply a style to all web pages you view * Rules without !important are overruled by author rules if the * author sets any.  Rules with !important overrule author rules. *//* * example: turn off “blink” element blinking * * blink { text-decoration: none ! important; } * *//* * example: give all tables a 2px border * * table { border: 2px solid; } *//* * example: turn off “marquee” element * * marquee { -moz-binding: none; } * */ /*  * For more examples see http://www.mozilla.org/unix/customizing.html */ @namespace url(http://www.w3.org/1999/xhtml);@-moz-document url(“about:blank”){*{background: url(‘Ex: file//C:/Users/Conall Ó Chórrain/My Pictures/My Pictures/Gears of War.jpg’);background-color: #FF033E;background-position:center center;background-attachment:fixed;background-repeat:no-repeat;}}

  5. Conall

    I can’t seem to get this to work properly, my code won’t even change the background colour! can anyone help me with this? here’s my code:
    /*
    * Edit this file and copy it as userContent.css into your
    * profile-directory/chrome/

    */

    /*
    * This file can be used to apply a style to all web pages you view
    * Rules without !important are overruled by author rules if the
    * author sets any. 
    Rules with !important overrule author rules.
    */

    /*
    * example: turn off “blink” element blinking
    *
    * blink { text-decoration: none ! important; }

    *
    */

    /*
    * example: give all tables a 2px border
    *
    * table { border: 2px solid; }
    */

    /*
    * example: turn off “marquee” element
    *
    * marquee { -moz-binding: none; }
    *
    */

    /*

    * For more examples see http://www.mozilla.org/unix/customizing.html
    */
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url(“about:blank”){

    *{
    background: url(‘Ex: file//C:/Users/Conall Ó Chórrain/My Pictures/My Pictures/Gears of War.jpg’);
    background-color: #FF033E;
    background-position:center center;
    background-attachment:fixed;
    background-repeat:no-repeat;
    }
    }

  6. Ryan

    @ira

    I know where you have gone wrong. At the url, do not put the [ and ] quotes. Save the file. Run firefox again. You will see your picture.

    Cheers!!!

    @Jim Anderson

    It is very simple.

    1. Copy %APPDATA%\Mozilla\Firefox\Profiles and paste it at the run command. Hit enter. Then follow Locutus instructions. For color, change 00000 which is black to another color code. Go to Wikepedia to find the colors codes you want. For url, do not put the quotes [ and ]. Hope this helps. Happy playing.

    Cheers.

  7. RobCr

    @Clodmore:
    The combination of TabMixPlus and Speed Dial, is as close to perfection as we will find.
    When I open a new Tab, I have my local(Aust) Google in the number 1 ‘Dial’ box.
    The focus is in the URL box, so I can type or paste a web address immediately.
    Or, if I was wanting Google instead, I can use Ctrl 1 to open the Google page (or mouse click that ‘Dial’ box).
    My other most visited site (weather) is in another ‘Dial’ box.

  8. Jon

    TabMixPlus here also. Can easily change new tab to one of 5 choices; blank, user location, home, current page or duplicate page (not sure what the difference between last 2 are). Using the ‘user location’ you can easily set any page you want. Not to mention you can do about a million other things with tabs with this addon/extension. :)

  9. Alan

    @Bruce Fraser:

    %APPDATA% is VERY SIMPLE.

    Just launch Windows Exlorer and type into the Address bar (just above Folders and Files columns)
    %APPDATA%

    Windows knows exactly what you mean and will take you there.

    There are many “Application Data”, but only one of them is your %APPDATA%, and Windows knows which one it is.

    Alan

  10. Bruce Fraser

    @Ozzie:

    Jim is looking for a plain and simple answer, and he can’t even get that. I’m going to try, but I’m sorry it’s not as plain as it should be (Do I hear a Mac calling to me in the future?)

    I think when Locutus says “%APPDATA%” he is using geek shorthand to refer to this location on your hard drive:
    C:\Documents and Settings\USERNAME\Application Data\Mozilla\Firefox\Profiles.

    For “USERNAME” substitute whatever name the computer has for itself. On mine, for instance, it’s “All Users.Study” — where “Study” is the name given to this particular computer since it is located in my study.

    This gets weird because there’s another similar folder named C:\Documents and Settings\All users\Application Data. Note how it’s called just “All users”, and leaves out the “Study.” But you won’t find a “Mozilla” folder in that location.
    And to make it even more complicated, there are several folders scattered around called “Application Data” — I count 12 altogether — What a maze Microsoft has created! Anyway, the one which Locutus is referring to is the first one I mentioned.

    All I can say is “Good luck”!

  11. Ozzie

    @Jim Anderson: Hi Jim. To access that folder I believe you have to go to your control panel and choose folder options and then make sure the hidden folders box is unchecked. That will allow you to see all the folders on your comp. Can I reiterate the suggestion that I made previously in relation to the Firefox Stylish add-on – it is as simple as it gets, and you can choose from some nice blank-page designs. This eliminates all the steps that Locutus has kindly described in such detail. I repeat, it is definitely worth a look. And not just for Firefox, but for customising many web elements on many web sites.

  12. Jim Anderson

    Well…newbie here. Or, after reading the first few of these posts…I should probably say village idiot.

    Frankly, in reading the first part, you lost me at the following:

    To customize your about:blank page, you’ll need a user-content.css file. To make one, go to %APPDATA%\Mozilla\Firefox\Profiles. In that folder you should see a folder named something like [randomtext].[profilename]:

    For most of us there should only be one folder like this. For others (who created multiple profiles) there will be multiple folders. If there are multiple folders, select the folder corresponding to the profile that you want to customize about:blank for.

    1. I don’t know HOW to go to: %APPDATA%\Mozilla\Firefox\Profiles.

    I’ve even tried a search and cannot FIND that file.

    No real sense in even bothering with the rest of it since for me, it’s way above my head.

    If you can explain this in really, really simple terms, then I might attempt it, but if not…just forget it. I’ll be okay with just the blank screen, as I just thought it would be fun to change it, but didn’t know it was so darned complicated.

    Jeeem
    jeeeminthailand@yahoo.com

  13. Ira

    @sean:
    Thanks Sean. But I tried changing the color to turquoise and leaving the same webpage link, and then I tried replacing the webpage link with a photo on my own hard disk (leaving the changed color as turquoise). In both cases the result was a turquoise screen with no picture. Where have I gone wrong?

    And has anyone else noticed that aqua and cyan have precisely the same codes at http://www.mathsisfun.com/numbers/hexadecimal-color-names.html?

  14. RobCr

    @Locutus:
    Thanks, that gives me my local Google page (which has option button for Australia, if I need it), where the one I described above (without your g keyword) was giving me the plain Google page that did not have an AU option button).
    So things are getting better.
    I have just one wee problem –
    I don’t think I can get a blank page when I do Ctrl T
    I went to FF Options and I think the only way I can specify to open with a blank page, is to choose it in the top combobox drop down –
    The one called when FF starts.
    However I have chosen one of the other choices instead –
    Show my Windows and Tabs from last time.
    And a cocked double barrel shotgun in one of my orifices, would not make me change that selection.

    Is there another way to tell FF to open with a blank page (no shotgun being used) ?

  15. RobCr

    @Locutus:
    When you say –
    set a keyword search
    Is that a setting you have setup somehow ?
    If I type g logical channel number and press Enter, it does bring up a Google search, but with the g also.
    If I just type logical channel number then it does do a Google search for me on ‘logical channel number’

    I will switch over to a blank page, and give the above a try.
    Thanks,
    Rob

  16. Locutus
    Author/

    @sean: For a while, I was a moderator on the competing addon Fast Dial’s help site. I still sometimes post there. I still do recommend Fast Dial- it allows custom logos, backgrounds, downloadable “themes”, several awesome customizable options, etc… but then remember I was a mod at UserLogos. Still, take a look! It’s a cool addon.

  17. sean

    @Ira, the problem is this:

    background-color: #000000;

    What that is is the hex-decimal code for the colour black. What’s happening is that the code:

    background: url(‘http://www.b144.co.il/search.aspx?txtNamePrivate=%D7%99%D7%94%D7%95%D7%93%D7%99%D7%AA+%D7%A0%D7%99%D7%A1%D7%A0%D7%91%D7%95%D7%99%D7%9D&txtCityPrivate=&txtStreetPrivate=&txtStreetNPrivate=&_private=0&_p=&_lang=HE’);

    is not being recognised, and the page is defaulting to the black fill because it can’t find the image. I’d suggest downloading the image, and linking to it on your hard-drive, and changing the hex code to a colour you’d like: http://www.mathsisfun.com/numbers/hexadecimal-color-names.html

    yes, it’s a kids site, but it gets the message across.

    Hope that helps!

    @RobCr: Also rob, if you’re using firefox (obviously) try downloading an add-on called speed dial. I have it, and hate using computers without it!

  18. Locutus
    Author/

    @RobCr: Alt+D or Ctrl+L work for getting to the URL box. I too only use the URL bar or the Google search bar- but in Firefox, I actually hid my Google search box and set a keyword search, so when I type g dfjlkdsa into the URL bar, it searches Google for dfjlkdsa. I would recommend using that, eliminating the need for a search bar. Unless, of course, you are fine with the current setup :D

  19. RobCr

    When I open a new Tab directly with Ctrl T, I am going to do one of three things –
    Paste a url
    Type a url
    Do a Google search
    Presently I have Google set as my Home Page, so Ctrl T always gives me the Google page.
    If I intended to search the web, I can just type my string to search on and hit enter.
    (No complaints so far).
    However if I wish to do either of the other things, I have to get the focus up into the URL box, which requires me to click into the box.
    And I also have to remember to click into the URL box, as I have mistakenly typed a few url’s into Google’s search box (I am old).

    So a functional page to open with, would have these features –
    It opens with the focus in the URL box.
    But allows a one key (or Ctrl plus a key), command to bring up the Google page.
    Or, opens up with Google as the home page (like I have now), but allows a keystroke to get the focus up into the URL box (thus avoiding the need to use the mouse).

    Does anyone have any suggestions ?

  20. Ira

    I don’t know; maybe I did something wrong. But all I got was a solid black page.

    Here is the userContent.css file:

    /*
    * Edit this file and copy it as userContent.css into your
    * profile-directory/chrome/
    */

    /*
    * This file can be used to apply a style to all web pages you view
    * Rules without !important are overruled by author rules if the
    * author sets any. Rules with !important overrule author rules.
    */

    /*
    * example: turn off “blink” element blinking
    *
    * blink { text-decoration: none ! important; }
    *
    */

    /*
    * example: give all tables a 2px border
    *
    * table { border: 2px solid; }
    */

    /*
    * example: turn off “marquee” element
    *
    * marquee { -moz-binding: none; }
    *
    */

    /*
    * For more examples see http://www.mozilla.org/unix/customizing.html
    */
    @namespace url(http://www.w3.org/1999/xhtml);
    @-moz-document url(“about:blank”) {

    * {
    background: url(‘http://www.b144.co.il/search.aspx?txtNamePrivate=%D7%99%D7%94%D7%95%D7%93%D7%99%D7%AA+%D7%A0%D7%99%D7%A1%D7%A0%D7%91%D7%95%D7%99%D7%9D&txtCityPrivate=&txtStreetPrivate=&txtStreetNPrivate=&_private=0&_p=&_lang=HE’);
    background-color: #000000;
    background-position:bottom right;
    background-attachment:fixed;
    background-repeat:no-repeat;
    }
    }

  21. Ozzie

    Or alternatively, Firefox users can install the Stylish add-on (https://addons.mozilla.org/en-US/firefox/addon/2108) and choose from a whole range of FF blank page customisations (http://userstyles.org/styles/browse/all/firefox%20blank), as well as customisations for a host of other sites. Personally, I love Stylish and have been using it for a number of years now, for everything from cleaning up ads on Yahoo to revamping Gmail. If you haven’t checked it out, it’s definitely worth a look.