Sign in to follow this  
Followers 0

Firefox 3 Skins

188 posts in this topic

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.

0

Share this post


Link to post
Share on other sites
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;

}

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

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.

0

Share this post


Link to post
Share on other sites
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.

0

Share this post


Link to post
Share on other sites

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.

0

Share this post


Link to post
Share on other sites

Trim on minimise probably isn't a good idea :P

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!)

0

Share this post


Link to post
Share on other sites

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;

}

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

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.

iVR65tTdeW.png

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

0

Share this post


Link to post
Share on other sites

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.

0

Share this post


Link to post
Share on other sites
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"?

0

Share this post


Link to post
Share on other sites
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 ?

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

@kinsemon

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

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites
@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.

0

Share this post


Link to post
Share on other sites

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 ?

0

Share this post


Link to post
Share on other sites
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!

0

Share this post


Link to post
Share on other sites

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:

2qsnd4z.jpg

0

Share this post


Link to post
Share on other sites

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

0

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!


Register a new account

Sign in

Already have an account? Sign in here.


Sign In Now
Sign in to follow this  
Followers 0