[Tutorial] No more extensions, a userChrome tutorial

This is a tutorial I wrote allowing the user to use Safarifox themes, without also having to use the extensions Compact Menu and Tab Browser Extension. This tutorial will have a perminant home on my website, but I'll also post the entire thing here.

----------------------------------------------------------------------

No More Extensions - A Firefox userChrome Tutorial

The purpose of this tutorial is to enable the user to use Firefox themes to emulate the look of the Apple Macintosh browser Safari (so called Safarifox), without having to resort to also using troublesome and sometimes buggy extensions, that are largely unsupported as Firefox continues to get upgrades. This will be done by simply modifying the userChrome.css file.

This tutorial is written for the average user. If you are familiar with one or more of the beginning steps, feel free to skip them. I only take partial credit for this tutorial. The individual mods are available from Firefox Tips, I just made the mental connection that these can be used to supplement the effects of the extensions Compact Menu and Tab Browser Extension.

Additional credit goes to my testers Sketching (who made additional suggestions), and Ppoppe. Thanks a bunch guys!

It is worth noting that the userChrome.css file is non-essential to the operation of Firefox. In fact it doesn't even exist before you start this tutorial. If you don't like any of the changes you can simply delete it and return to your original appereance.

1. In order to see the folder you need to access, you need to make it visible. By default Windows Explorer makes certain critical application files and folders invisible. To make them visible, in Windows Explorer go to: Tools > Folder Options > View tab > scroll down to "Show hidden files and folders" and select that. Hit OK.

2. Navigate to "C:Documents and Settings(your user name)Application DataMozillaFirefoxProfiles(random profile number).defaultchrome". There you will see a number of files including "userChrome-example.css". Make a copy of this file and rename it to "userChrome.css". Making a copy isn't really necessary, but it might come in handy in case you want to delete your working file, or you mess up later on.

3. Open up the file in a text editor, like Windows Notepad.

I've noticed that two of the biggest problems with Safarifox themes are A) The Tabs text often appears as either white or light gray, making them hard to see, and B) Having the menu (File, Edit, View, etc...) visible often detracts from the whole Safari emulation. The following code snips will take care of those two problems.

4. Add these two snips of code into your userChrome file below the @namespace line:

/* Remove the menus*/

menu[label="File"], menu[label="Edit"], menu[label="View"], menu[label="Bookmarks"], menu[label="Tools"], menu[label="Go"], menu[label="Help"] {

display: none !important;

}



/* Change color of the tabs*/

.tab-text {

color: rgb(0,0,0) !important;

}

You can make the text color anything you want, but black ( rgb(0,0,0) ) is most likely what is needed.

5. Save this file and the restart Firefox. Your changes should have taken place.

Helpful Tips: Because the modification to the Firefox menu takes away your access to it, you should only probably use this if you don't use the menu often.

If you do use this menu "hack", and need to regain access to the menu for one reason or another, here is a suggestion:

Make 2 copies of your modified userChrome file. One with the menu code (userChrome.css), and one without (userChrome_Menu.css). You can rename the first one "userChrome_noMenus.css" then rename the second one to "userChrome.css". Once the chore is done, you can rename the files again and go back to not having menus.

#329831

Nice tutorial. Thanks for sharing. :)

One could also just get rid of parts of the menu (like bookmarks, which bloats it and help, which is unecessary IMHO). Also, if the safire author could maybe make the compact menu button (for those of us who use it) hidden (1px width), it would make removing the menu unecessary. I did that with mine and it's so nice to just click on the left side of the menubar to access the menu and not have an icon.

And lastly, wouldn't someone be able to make a BAT file to swap userchrome's automatically? I haven't made a batch file in forever, but they aren't hard to construct, right? :P

#329847

Nice tutorial sakurakira!

Yeah, but there would be little point in a batch file, unless you want to switch userchrome's after every startup automatically. Otherwise, it's not too tough to rename...do you want me to make one anyway?

-NC

#329892

is it possible to get rid of these things :(

http://img91.imageshack.us/img91/2554/untitled16pd.png

:)

i love it, this really does make it easier to customize, but those lines really annoy the piss outta me :(

#329899

Nice tutorial sakurakira!

Yeah, but there would be little point in a batch file, unless you want to switch userchrome's after every startup automatically. Otherwise, it's not too tough to rename...do you want me to make one anyway?

-NC

Naw, I just meant it would be easier to switch between the two by double-clicking a shortcut should the need to use menus arise. ;)

#329912

is it possible to get rid of these things :(

http://img91.imageshack.us/img91/2554/untitled16pd.png

Derek asked the exact same question in this thread. Find the link given by shmengie, read that thread, then go back and read the rest of Derek's thread. He and a familiar forum member(;)) will then tell you why it is not possible to completely get rid of the lines in a VS like Inspirat SE.

#329961

Hi,

great info sakurakira

Nice tutorial. Thanks for sharing. :)

And lastly, wouldn't someone be able to make a BAT file to swap userchrome's automatically? I haven't made a batch file in forever, but they aren't hard to construct, right? :P

Nice tutorial sakurakira!

Yeah, but there would be little point in a batch file, unless you want to switch userchrome's after every startup automatically. Otherwise, it's not too tough to rename...do you want me to make one anyway?

-NC

There would actually be a point in doing that

if you make a keyboard shortcut it can be very handy

(to make a keyboard shortcut, you just need to make a regular shortcut to your batch/script, then by right clicking and going in the property window of it you are able to assign a keyboard shortcut)

I made a small vbScript that will switch it : menu / no menu

(the zip file is attached to my post)

read the "read me.txt" for more info

I hope it will be useful for some people

(btw Win SP2 will give a alert window when you first run the script, select "Authorize this script")

FireFox_userChrome_switch.zip

Attachment: FireFox_userChrome_switch.zip

#329966

is it possible to get rid of these things :(

http://img91.imageshack.us/img91/2554/untitled16pd.png

:)

i love it, this really does make it easier to customize, but those lines really annoy the piss outta me :(

here is a code for getting rid of the horizontal separators. i don't know if it will get rid of all of those lines you have, but it's worth a try.

/* remove horizontal separators at the toolbars */

#toolbar-menubar {

min-height: 12px !important;

padding: 0px !important;

margin: 0px !important;

border: none !important;

}

#nav-bar {

border: none !important;

padding: 0px !important;

}

#PersonalToolbar {

border: none !important;

}

btw i found this wonderful code in a gfxOasis thread about Royal Inspirat SE.

#330000

thanks for the code sakurakira!!! that's what I've been looking for! I didn't know that such thing could be done, gonna check gfxOasis forum more often

"Never interrupt your enemy when he is making a mistake."

- Napoleon Bonaparte (1769-1821)

#330251

hello people , well i cant change my tab color to black :(:(:(

i have tried all these diferent options one by one:

*|tab[selected=true] .tab-text {

color: #000 !important;

}

------------------------------------------

.tab-text { color: rgb(0,0,0) !important;

}

------------------------------------------

tab[selected=true] {

color: #fff !important;

font-weight: normal !important;

}

-------------------------------------

tab { color: #000 !important; }

---------------------------------

.tab-text {

color: rgb(90, 90, 90) !important;

}

----------------------------------

#content tab {

color: rgb(90, 90, 90) !important;

}

some of them set my tab text color to grey... i just want it black !$%"/&$"/

im using enigma blue safari ,neither can change my tab's font color in:

soft aqua 1.0/SAfire 0.2 /soft aqua plastic safari 1.0 a other ....

please give a hand here...

(by the way i checked 1717262873 that im editing the right file.

thanks for any help

#330447