Email article
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%.
![More Firefox love [Wallpaper]](http://cdn.dottech.org/media/2013/05/firefox_wallpaper_2560_1440-134x90.jpg)
![Firefox vs Chrome vs Internet Explorer [Wallpaper]](http://cdn.dottech.org/media/2013/05/chrome_vs_firefox_internetexplorer_wallpaper-134x90.jpg)
![This is for Firefox fans [Wallpaper]](http://cdn.dottech.org/media/2013/04/firefox_eye_wallpaper-134x90.jpg)
@ ira could you post the code you’ve used and where you’ve posted the picture?
and yea, it’s a kids site >.<
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. :)
@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.
@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.
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;
}
}
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;}}
Works fine, but unfortunately the “blank” page appears as background on some Comment discusion window like this one (but fortunately not here) and it creates mess.
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.
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.
@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;
}
}
Thanks for the good information, It helps me to create a new blank page with motivational quotes, that’s really awesome to make me more focused when exploring sites.
Let Me Tees You
A noteworthy article, thanks from a fellow games lover.