Get the Personas add-on for firefox from
HERE. From what I can tell, it does not cause anything to slow down and will not affect your web browsing experience. Doing this will put a little fox head at the bottom left of your browser, you can click him for options.
This is what I threw together in a few minutes after I figured out the size and whatnot.
http://img.photobucket.com/albums/v2...firefoxlul.jpg
The top part that is customized is called the 'header' and the bottom bar is called the 'footer'.
THESE ARE TWO SEPARATE FILES. So once you're done with the header, SAVE IT and move on to the footer section.
Start video one.
Open the program you wish to make your header with. Keep in mind when you're making the header, it will be automatically anchored to the top right of your browser no matter what the size. Personas suggest that you make your header 3000x200 pixels width x height. This was WAY to big for me. You're going to want your width to be the same as your screen width. My screen is 1024x768, so I make my header 1024x200.
Now, you can either start coloring all over it and skip the next template section, or if you want to be more detailed, read on.
Header template (optional)
Fast forward to video one, 1:15
If you want to actually write and draw pictures on yours, then you're going to want to write/draw around the address bar, search bar, and whatever else you have up there, because you can't see anything behind that.
I'm just going to explain how I did this, if you want to try it your own way, go for it.
Take a screenie of your firefox at full screen with tabs open. Doesn't matter how many, could just be one. Paste this somewhere you can crop it. I use paint. Crop it so it looks something like this:
http://img.photobucket.com/albums/v2...s/headerex.jpg
Now, assuming you're using a program with layers, you want to copy your crop as a new layer on top of your header screen that you should've already opened with the exact pixel width of your screen and 200 height. Paste your crop, and move it so that it is aligned to the very tip top.
Fast forward to video one, 3:30
Create a new transparent layer on top of your crop layer. Now, take the brush tool, or whatever you want to use to draw, and basically outline and mark everything that you cannot draw on. I would advise you don't draw anything in the tab area, maybe just make it something you can live without seeing. Cause if your tabs are over it, you won't be able to see whats there.
So, once you outline the areas you CANNOT draw in (The back/forward/refresh/stop/home buttons, any links your browser may have, the tabbed area, the ENTIRE address bar and search bar, anything else you can obviously not draw on because there is something there) you can now delete your crop layer and start working on your header. Make sure to click the first layer that should be empty. You don't want to draw on your outlines.
Start video two.
Now, basically draw/paint/color whatever you want. If you want some ideas, click the little fox head on the bottom left of your browser, chose one of the sections so that you can see a list of personas, and when you hover over a persona name it will show it to you on your browser so you know what it looks like.
Make sure to delete the outline layer when you are done designing your header. (I forgot to do this in the video)
Making the FooterFast forward to video two, 2:25
This, should be really simple. Your footer should not be that big. On average, it should probably be about 25 pixels tall. Keep in mind your footer will be anchored to the bottom left of your browser no matter what size. Personas suggests that you make your footer file 3000x100 pixels Width x height. I suggest, like the header, that you make it the width of your screen and a height of 100 pixels. Mine, for example, was 1024x100.
When you hit Ctrl+F, this will expand the size of your status bar. Do that now, see how big it is, and keep that in mind.
There really isn't much room for drawing down there, so basically do whatever you want however you want. Keep in mind that whatever you draw/write/color will be BEHIND text and pictures on your status bar, so whatever you put there, you might want to make sure that it allows the text to be readable. I just use solid color for mine so I know there won't be a problem.
Applying your custom header and footerFast forward to video two, 5:45
Make sure you save your work, and that it is below 300kb in file size, and it is best if saved as PNG or JPG.
Click the little fox head in the bottom left corner of your browser.
Click "Preferences" and make sure the "Show custom persona in menu" option is checked, and close it.
Click the fox head again.
Click "Customize" then "Edit".
This will open a new tab that will allow you to name your persona, and upload the header and the footer, as well as select the font color that you think work best with the persona you made.
Hit "ok". You can now select your persona when you click on the fox head.
Don't understand how to do something?
I got it all on video, as you might notice the green video references throughout the guide, you can easily fast forward to whichever section you need.
Video one
[youtube]3egYhWMimQc[/youtube]
Video two
[youtube]S-EIQZ18aDk[/youtube]
Have fun. ^_^
Here is the outcome of the one I made in the video. Click to view full size.
Heres one I made using a different site background thing. If you want to use it, just save this image somewhere and use it as both your header and footer. It looks neat. ^_^ (click to enlarge)
Reply With Quote
How to customize firefox with YOUR gfx! Make it however you want.
Every site I go on seems to have different youtube embed options.
Posting Permissions