Jump to content

Firefox 3 Skins


Recommended Posts

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.

o7ZWYXjL85.png

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.

Link to comment
  • Replies 187
  • Created
  • Last Reply

Top Posters In This Topic

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

Link to comment

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.

rLxczeNLPg.png

2) the icon and text highlights not accurate

cUfHFYhT1Y.png

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

Link to comment

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...

Link to comment
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.

Link to comment

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.

Link to comment

kinsemon

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

20080621113406dr8.png

but ...

20080621113259ir7.png

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;

}

Link to comment

^^@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"?

Link to comment

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.

Link to comment
kinsemon

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

20080621113406dr8.png

but ...

20080621113259ir7.png

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 ?

Link to comment

^^@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

Link to comment
@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.

Link to comment
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!

Link to comment

Nice topic!!!

My FF is much better now!!!

But i have the same problem of bSAYZ

Do someone know how to fix it??

And what about making one full script to make it easier..

Like, releasing a Full Working Chrome.css...

Thx!!

_____________________________________________________________________________

EDIT:

Ive managed to configure it to look like Safari...

And its quite nice...

But i have some questions:

1) Is there a way to change navigation font and "google" font?

2) How can i fix the arrow position??? Because i had to change font place and now the arrow is too low...

3) Besides the problem that already been posted, ive noticed that when you click it, the left side gets darker...

Take a look at attachment for more details...

post-78021-1214268328_thumb.png

Link to comment

Please sign in to comment

You will be able to leave a comment after signing in



Sign In Now

×
×
  • Create New...