Firefox 3 Skins

Ok. I will try to sum up the main things.

Obviously there are two main threads in FF3 skinning now.

1) FF3 Mac style skin - the PC alternative already made - https://addons.mozilla.org/en-US/firefox/addon/7172

2) Safari skins for FF3.

For now the best one is GrApple

http://www.takebacktheweb.org/

Using this one I have faced a number of problems. Here they are:

1) problem with context menu background. It can be solved in two ways.

a. Install Stylish extension - maake new entry - copy this (thanks Kinsemon):

/* Make menus XP style */

menupopup, popup {

border: 1px solid ThreeDShadow !important;

-moz-border-left-colors: ThreeDLightShadow !important;

-moz-border-top-colors: ThreeDLightShadow !important;

-moz-border-right-colors: ThreeDDarkShadow !important;

-moz-border-bottom-colors: ThreeDDarkShadow !important;

padding: 2px !important;

background-color: rgb(230, 230, 230) !important;

}

menubar > menu {

border: 1px solid transparent !important;

padding: 2px 5px 2px 7px !important;

margin: 0 !important;

}

menubar > menu[_moz-menuactive=true] {

background-color : Highlight !important;

color: HighlightText !important;

}

b. If you don't want to use Stylish - copy this into your UserChrome file:

menupopup, popup {

border: 1px solid ThreeDShadow !important;

-moz-border-left-colors: ThreeDShadow !important;

-moz-border-top-colors: ThreeDShadow !important;

-moz-border-right-colors: ThreeDShadow !important;

-moz-border-bottom-colors: ThreeDShadow !important;

padding: 1px !important;

background-color: rgb(230, 230, 230) !important;

}

2) problem with fonts.

the same with menus. so if you know how to change font in FF3 menus - please.

3) bookmarks small icon on favorites bar. I can't find it.

this is it by now.

#503121

Hi,
Is there a way to get the icons away (just text) in the links-bar (don´t know how it´s called)?
Oh it´s Windows XP SP2:

via chromedit or Stylish add-on:

/* hide bookmark toolbar icon images */

#personal-bookmarks .toolbarbutton-icon {

display: none !important;

}

#503145

Re: Alabanco's post

- to change menu background color, just replace the line 'rgb(xxx, xxx, xxx)' with any number from 0 to 255 (e.g. black 0, 0, 0), or use hex codes instead.

- to add opacity to menus, replace the line with rgba( xxx, xxx, xxx, 0.0)... <0.0 being fully transparent)

-problem with fonts.

via chrome edit or Stylish:

/*bookmark fontsize*/

toolbarbutton.bookmark-item .toolbarbutton-text {

font-size: 11px !important;

font-weight: normal !important;

margin: 0px !important;

padding-left: 3px;

}

toolbarbutton.bookmark-item > .toolbarbutton-text-stack > .toolbarbutton-text-shadow {

font-size: 11px !important;

padding-top: 2px;

padding-left: 3px;

}

/*menu fonts*/

menu,menuitem {

font-family: Lucida Grande !important;

font-size: 11px !important;

}

Just play around with the fontsize and weight (bold/normal), you can also change the fonts...

Other customization issues, check this out:

http://www.linnhe2.free-online.co.uk/firef...oolbar%20Folder

#503150

kinsemon

Thank you. I tried to play with stylish. here is what I got.

/*bookmark fontsize*/

toolbarbutton.bookmark-item .toolbarbutton-text {

font-size: 11px !important;

font-weight: bold !important;

margin: 0px !important;

padding-left: 1px;

}

toolbarbutton.bookmark-item > .toolbarbutton-text-stack > .toolbarbutton-text-shadow {

font-size: 11px !important;

padding-top: 1px;

padding-left: 0px;

}

/*menu fonts*/

menu,menuitem {

font-family: Lucida Grande !important;

font-size: 11px !important;

}

This is the closer to the original but still have some problems.

1) shadow color is different. don't know how to change that.

the right one is the original.

2) the icon and text highlights not accurate

3) What will be the code in stylish for tabs font

#503157

Hmm...

(the following are all in in Stylish...)

1. Shadow color.

Insert this line under "toolbarbutton.bookmark-item > .toolbarbutton-text-stack > .toolbarbutton-text-shadow" >>

opacity: 0.9 !important;

just play around with any number between 0.0 and 1.0...

2. Icon and text mouseover. (am assuming this is GrApple Yummy...)

/*Bookmarks toolbar highlight fix*/

toolbarbutton.bookmark-item[container]:hover > .toolbarbutton-text-stack,

toolbarbutton.bookmark-item[container][open=true] > .toolbarbutton-text-stack {

background: url("chrome://global/skin/toolbar/toolbarbutton-customhover-mid.png") repeat-x right center !important;

color: #fff;

}

toolbarbutton.bookmark-item:hover > .toolbarbutton-text-stack {

background: url("chrome://global/skin/toolbar/toolbarbutton-customhover-mid.png") repeat-x right center !important;

color: #fff;

}

toolbarbutton.bookmark-item[container]:hover:active > .toolbarbutton-text-stack,

toolbarbutton.bookmark-item[container][open=true] > .toolbarbutton-text-stack {

background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x right center !important;

}

3. Tab Font

/*change Tab fonts*/

.tab-text,

.tab-text-shadow {

font-family: Lucida Grande !important;

font-size: 11px !important;

font-weight: bold !important;

margin: 0px !important;

}

.tab-text-shadow {

color: #cdcccc;

padding-top: 1px;

opacity: 0.6 !important;

}

window:not([active=true]) .tab-text-shadow {

opacity: 0.7 !important;

}

NOTE: consider putting "!important;" after every item to force the command...

#503164

Worked.

Looks this way now:

This is the userChrome.css

Thanks, Björn

userChrome.zip

Attachment: userChrome.zip

#503165

I'm wondering if the 3 stands for 300 Mb?

The portable version runs good but, don't know where this darn spike is coming from.

#503182

I'm wondering if the 3 stands for 300 Mb?
The portable version runs good but, don't know where this darn spike is coming from.

What extensions are you running?

I know I've dumped a good few since using FF3, 4 infact. I couldn't see the benefit of Tab Mix plus any more.

#503183

These were all running in FF3 Portable.

I'll give the standard big ones as the simple one's shouldn't be the problem.

- Adblock Plus w/Filterset.g

- MR Tech Toolkit

- Greasemonkey and Stylish (Can't decide on one) but, each only have about 3 items enabled

- AIOS

- Tab Sidebar

- Scrapbook

- Zotero

- Web Search Pro

- Leechblock (This may be the issue?)

- MultiSidebar

- Profile Switcher

- Personal Menu

Edit: For some reason the trim on minimize feature in the about:config got reset to false. That corrected the issue.

#503184

Trim on minimise probably isn't a good idea

Also, the little ones all add up. My FF is using 180MB or RAM, but I have a boatload of extensions (And won't be dropping any!)

#503216

kinsemon

After follow your code below seem ok for folder/container hover

but ...

what's happen ;(

2. Icon and text mouseover. (am assuming this is GrApple Yummy...)
/*Bookmarks toolbar highlight fix*/

toolbarbutton.bookmark-item[container]:hover > .toolbarbutton-text-stack,

toolbarbutton.bookmark-item[container][open=true] > .toolbarbutton-text-stack {

background: url("chrome://global/skin/toolbar/toolbarbutton-customhover-mid.png") repeat-x right center !important;

color: #fff;

}

toolbarbutton.bookmark-item:hover > .toolbarbutton-text-stack {

background: url("chrome://global/skin/toolbar/toolbarbutton-customhover-mid.png") repeat-x right center !important;

color: #fff;

}

toolbarbutton.bookmark-item[container]:hover:active > .toolbarbutton-text-stack,

toolbarbutton.bookmark-item[container][open=true] > .toolbarbutton-text-stack {

background: url("chrome://browser/skin/bookmark-open-mid.png") repeat-x right center !important;

}

#503242

^^@B

are we referring to the same theme/skin?, or you are trying to customize another? because i just extracted the above scripts from the theme's browser.css file. Tested it with Stylish and everything seemed fine... the only fix from the original script is adding the line "...right center" after 'repeat-x.'

maybe change it "left center"?

#503251

I have made 3 sketches for FF3 skins mods: Flock mod and Safari mod.

These are just concepts: I use some parts from my Flock skin for FF2 and GrApple skin.

Some parts are not perfectly accurate - but these are just sketches on the run.

#503348

nice skins alabanco, keep going.....

@kinsemon

^^@B
are we referring to the same theme/skin?, or you are trying to customize another? because i just extracted the above scripts from the theme's browser.css file. Tested it with Stylish and everything seemed fine... the only fix from the original script is adding the line "...right center" after 'repeat-x.'
maybe change it "left center"?

I used GrApple Yummy skin. change to "left center" also not work.

#503357

nice skins alabanco, keep going.....
@kinsemon
I used GrApple Yummy skin. change to "left center" also not work.

hmm. alabanco does not seem to have your kind of problem (at least he didn't say). how does it look without the "fix"?

#503358

@kinsemon

without the "fix"

with "fix"

#503361

kinsemon

After follow your code below seem ok for folder/container hover

but ...

what's happen ;(

Yes. I have that too. haven't figured out why that happens.

I also have some issues.

1. Progress bar problem

Is it me or everyone has the problem with download progress bar - I just can't see that progress blue line in downloads section.

2. Bookmarks icon

Do you know hot to make it like in Safari on bookmarks panel with hover effect ?

3. Highlighted active form on a page

Is it possible to make stylish to highlight any active form field like in Safari. like on Aqua-soft search filed.

4. Sidebar on the right problem

I like sidebar on the right but I have faced a problem in FF3 if I copy to the Chrome.css:

/* Display the sidebar in opposite side */

#browser {

-moz-box-direction: reverse;

}

5. ScrubFire doesn't look accurate with that GrApple skins

I like that extension but it looks really unaccurate. So what would you suggest - wait and hope that GrApple will help to make it accurate or try smth else ?

#503377

^^@bsayz, alabanco

i wonder why yours behave differently from mine. i downloaded directly from the theme's site. aved the file to disk> extracted the contents of the .jar file > deleted the "Mac_os_x" folder and all DS_store files in other folders> re-zipped back into .jar> drag and drop in the Add-on window to install. Then started the fixmanipulations.

we have to remember that GrApple is supposed to be for Mac OS X only. it is expected that there would be things to be fixed. On the whole though, am quite satisfied with it.

Also Compact Menu just got updated...

http://www.kwikpiks.com/files/32/grapple%20shot5.png

#503399

@kinsemon

I try to follow your method above, step by step but still same problem

#503412

@kinsemon: If I was meant, the userchrome is for the default Firefox3 Mac theme ported to Windows, as you can see in my screenshot.

#503420

@kinsemon: If I was meant, the userchrome is for the default Firefox3 Mac theme ported to Windows, as you can see in my screenshot.

Nice. you deleted the folders... and the codes should work for any theme...

@bsayz,

there must some over-riding code from other extensions/add-ons you have running maybe? coz' i really don't understand why other bookmark folders are ok and others are not.

#503423

kinsemon

About bookmarks highlighted text:

This thing happens only for links folders are okay.

What about other problems I mentioned. Do you have any clue ?

#503424

kinsemon
About bookmarks highlighted text:
This thing happens only for links folders are okay.
What about other problems I mentioned. Do you have any clue ?

Well, even the links ARE OK for me.

Regarding other issues:

like yours, i don't see any progress bar, jsut the background. globalprogressmeter.css refers to a default image:

progressmeter {

-moz-appearance: progressbar;

margin: 2px 4px;

min-width: 128px;

height: 12px;

}

.progress-remainder[flex=100], .progress-remainder[flex=0] {

background-image: none !important;

-moz-appearance: none;

}

about the others, i have absolutely no idea, but am quite sure those things are possible with FF3. am also still trying to learn/study these as i go around mucking around with a FF3 theme not intended for Windows LOL!

#503425

Thanks for the theme, I was looking for this a long time.

But now I have another trouble. When I try to use GDI++ with Firefox 3, happened this: