Firefox Skinning Guide

[danilux]

Does anybody know how to change this bookmark text to another color like white in themes that are dark and the text is unreadable

Check the pic:

[kinsemon]

go to Special characters (windows/system32/charmap.exe)... Lucida grande font even has an apple character in it ""....

[jakub.karasek]

Hi all,

i´ve got a tip for perfect safari look of Firefox. Download vFox skin for firefox from this site http://www.vsdigital.windowsedge.com/# and then iFox metal skin https://addons.mozilla.org/cs/firefox/addon/3137

Open (not unpack) the *.jar or *xpi file of both in Winrar and move browser.css file from iFoxbrowser to vFoxbrowser folder... winrar will update the new file in archiv and then you can close it. Now you´ve got a Safari buttons in vfox theme. Instal it and add other addons like fission, compact menu, tabmix plus, stop or reload button and others... finally it looks like on the picture

[nausiashredsyrhead]

I'm trying to find a way of retaining the font I normally use in my firefox address bar. The theme I use is called 'Spectrum'. Below are some images to illustrate the problem I'm having. When I install fission it uses an absolutely gross font. I am using firefox 2, and really don't want to change the theme I'm using as I've not seen any that come even close to my current one. Any help would be greatly appreciated! The first image is what the address bar is like when fission is being used.

[storm119]

Hi nausiashredsyrhead,

Try this ... put this in your "userChrome.css" under the FF profile folder (chrome)...

/* ...( Change the text color/style when the progress meter displays (fission Exts) )... */

#urlbar[fission="fusion"][progress]:not([progress="0"]):not([progress="100"]) { 

   font-family: Apple Garamond !important;

   color: #828282 !important; /* grey */

   font-weight: bold !important;

}

note: you need to change the font-family,colour,font-weight, to suit you...

HTH

[nausiashredsyrhead]

Thanks for the response, I played around with this but couldn't really achieve anything satisfying.

The font still stays a horrible one even when a page is fully loaded. I've included some images of what the address bar looks like when I use your code.

[storm119]

aaahhh! I see...sorry my mistake misread your first post above .... try this

/* ...( Change text - URLBar ) ... */

#urlbar-container .textbox-input-box {

   font-family: LucidaMAC !important;

   color: #000000 !important;

}

note: This will effect (globally) to any theme you apply. As always play around the font-family ( ie: Lucida Grande etc).

HTH

[nausiashredsyrhead]

THANK YOU! Works like a dream.

Edit...

Actually it doesn't show behind the orange address bar drop down button, but I think I can live with that.

Now it's just the embossed font used on safari's bookmarks that's left to conquer..

[gMac]

how can i make my menubar go to objectbar instead of being in the window of my firefox???

pls help me.. thanks!!

[kinsemon]

how can i make my menubar go to objectbar instead of being in the window of my firefox???

pls help me.. thanks!!

with objectbar? i don't think it is possible. use Compact Menu add-in instead.

[tommy kaira]

hii!! im wondering where can i repace the .gif images for google cz in ff 1.5 it was in the searchplugins but i cant find it in ff 2.0

[sz770]

Thanks!

[Bebi_Bulma]

I'm trying to modify the default firefox skin to change the bookmark toolbar folder icons, and I've managed to change the icon...but I can't figure out how to move the drop arrow I've used to the right side of the folder name like in so many of the Mac-style themes. I've been looking in the browser.css for some of the skins and it's going right over my head.

This is what I have:

#personal-bookmarks toolbarbutton {
	list-style-image: url(file:///D:/Steph/Icons/DownArrow.ico) !important; -moz-image-region: auto !important;
	margin: 0px 0px 0px 0px !important;
}

And looks like this:

Right now it's on the left side with way too much space around it. :confused:

[kinsemon]

^^ i'm not an expert, but as you said, you just replaced the default folder icon with arrows, but still as icons.

As i understand the concept, you should HIDE these icons, then create a .png image and have it displayed on the right side of the bookmark item.

[Bebi_Bulma]

^^ i'm not an expert, but as you said, you just replaced the default folder icon with arrows, but still as icons.

As i understand the concept, you should HIDE these icons, then create a .png image and have it displayed on the right side of the bookmark item.

Ah, I suppose you're right.

Ideas on how to properly achieve this?

[kinsemon]

^^

you can try this: -create a 14x19px .png image first (name it dropmarker.png)...btw, No guarantees!, i might be missing something...

/* folder icons in the Bookmarks Toolbar */

.bookmark-item > .toolbarbutton-icon {

margin: 0px;

display: none;

}

.bookmark-image-left {

-moz-appearance: none !important;

}

.bookmark-image-left, .bookmark-image-right {

width: 8px !important;

height: 17px;

}

toolbarbutton.bookmark-item[type=menu] > .toolbarbutton-menu-dropmarker {

background: url("chrome://browser/skin/dropmarker.png") no-repeat;

height: 19px !important;

padding-top: 0px;

padding-left: 0px;

padding-bottom: 0px;

}

toolbarbutton.bookmark-item[type=menu] {

padding-left: 8px;

}

toolbarbutton.bookmark-item[type=menu] > .toolbarbutton-menu-dropmarker {

padding-right: 2px;

}

toolbarbutton.bookmark-item {

margin-right: -2px !important;

margin-left: -2px !important;

min-width: 0;

max-width: 13em;

padding: 0px 3px 0px 0px;

border: none !important;

}

#prefbar toolbarbutton {

max-height: none !important;

}

[Bebi_Bulma]

Heh, yeah something seems to have gotten borked somewhere.

[kinsemon]

LOL! sorry about that.

did you create a .png file in the /browser folder?

Edit:

You probably have other strings/scripts in conflict with what i posted. am just guessing anyway...

[Bebi_Bulma]

I put it in the chrome folder and made sure the path was correct, not sure why it stuffed up like that.

Another question...this theme I'm using (macfoxII) has rather large toolbar icons, and I'm trying to make them display smaller, but they look all crappy. Seems I need to resize the images themselves, but since I installed this skin from the Firefox addons site, I don't have a jar file for it to mess with. Is there anyway to get to the skin contents?

[kinsemon]

huh? i assumed that you extracted the default FF theme before messing around with it.

anyway this will probably set you in the right direction (excuse the pun!)

.bookmark-item:hover > .bookmark-image-right {

background: url("chrome://browser/skin/dropmarker.png") no-repeat center right;

}

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

Regarding macfoxII, you tried View>Toolbar>Customize> "use small icons"?

To extract theme resources, go to x:Documents and SettingsApplication DataMozillaFirefoxProfilesxxxxxxxxx.defaultextensions Chromemacfox.jar

[Bebi_Bulma]

With the mods regarding the bookmarks toolbar, yes I'm editing the default userChrome.css.

In the meantime, I've been using the macfoxII theme, but when I go to the containing folder, there doesn't appear to be a jar file anywhere. In the chrome folder I only see tmp.xpi. The ones I've installed from the Firefox site only have that, whereas the ones I've installed from a jar file on my harddrive have the jar file in the chrome folder.

I've tried switching to small icons, but then they're too small. I was hoping to just resize them down a bit (although I doubt that would work, from looking at some other themes .

[kinsemon]

did you follow the path i posted? make sure to unhide all files and folders first.

last resort would be to find/search the entire drive using the string '*.jar', or macfox.

you can also try re-downloading macfox, but with the option to 'save to disk"...

[Bebi_Bulma]

Yeah I had to do "save link as" in order to get the jar file.

What I'd really like to do is modify the default theme to have the bookmarks toolbar elements from the macfoxII theme, and leave the rest as the default (the tabs, menu toolbar icons, etc). Proving to be rather difficult and confusing. :confused:

[kinsemon]

Yeah I had to do "save link as" in order to get the jar file.

What I'd really like to do is modify the default theme to have the bookmarks toolbar elements from the macfoxII theme, and leave the rest as the default (the tabs, menu toolbar icons, etc). Proving to be rather difficult and confusing. :confused:

well, the best i can suggest is to compare browser.css files of both macfox II (you can actually open the .xpi file with winzip, jeez!) and the default (in c:program filesmozilla firefoxchromeclassic.jar). your main concern would be under the heading 'bookmark buttons'. then just copy the requisite .pngs. really confusing initially, but after a while, you'll get the hang of it... cheers!

[Bebi_Bulma]

I spent the most of last night trying to do that, was sure I copied everything needed, but for some reason it just wasn't showing the images. It displayed the toolbar background, and some elements of hover/pressed (the middle image) but not the rest, blah.

Think I'll just have to stick with using macfoxII for now.