alabanco Posted June 19, 2008 Report Share Posted June 19, 2008 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. Link to comment
kinsemon Posted June 20, 2008 Report Share Posted June 20, 2008 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;} Link to comment
kinsemon Posted June 20, 2008 Report Share Posted June 20, 2008 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
alabanco Posted June 20, 2008 Report Share Posted June 20, 2008 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 Link to comment
kinsemon Posted June 20, 2008 Report Share Posted June 20, 2008 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
Björn Posted June 20, 2008 Report Share Posted June 20, 2008 Worked. Looks this way now: This is the userChrome.css Thanks, Björn userChrome.zip Link to comment
SirSmiley Posted June 20, 2008 Report Share Posted June 20, 2008 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. Link to comment
mps69 Posted June 20, 2008 Report Share Posted June 20, 2008 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
SirSmiley Posted June 20, 2008 Report Share Posted June 20, 2008 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 MenuEdit: For some reason the trim on minimize feature in the about:config got reset to false. That corrected the issue. Link to comment
Phoshi Posted June 20, 2008 Report Share Posted June 20, 2008 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!) Link to comment
bSAYZ Posted June 21, 2008 Report Share Posted June 21, 2008 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; } Link to comment
kinsemon Posted June 21, 2008 Report Share Posted June 21, 2008 ^^@Bare 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
alabanco Posted June 22, 2008 Report Share Posted June 22, 2008 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. Link to comment
bSAYZ Posted June 22, 2008 Report Share Posted June 22, 2008 nice skins alabanco, keep going.....@kinsemon^^@Bare 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 Posted June 22, 2008 Report Share Posted June 22, 2008 nice skins alabanco, keep going.....@kinsemonI 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"? Link to comment
bSAYZ Posted June 22, 2008 Report Share Posted June 22, 2008 @kinsemon without the "fix" with "fix" Link to comment
alabanco Posted June 22, 2008 Report Share Posted June 22, 2008 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 ? Link to comment
kinsemon Posted June 23, 2008 Report Share Posted June 23, 2008 ^^@bsayz, alabancoi 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
bSAYZ Posted June 23, 2008 Report Share Posted June 23, 2008 @kinsemon I try to follow your method above, step by step but still same problem Link to comment
Björn Posted June 23, 2008 Report Share Posted June 23, 2008 @kinsemon: If I was meant, the userchrome is for the default Firefox3 Mac theme ported to Windows, as you can see in my screenshot. Link to comment
kinsemon Posted June 23, 2008 Report Share Posted June 23, 2008 @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
alabanco Posted June 23, 2008 Report Share Posted June 23, 2008 kinsemonAbout bookmarks highlighted text:This thing happens only for links folders are okay.What about other problems I mentioned. Do you have any clue ? Link to comment
kinsemon Posted June 23, 2008 Report Share Posted June 23, 2008 kinsemonAbout 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
gabboparra Posted June 23, 2008 Report Share Posted June 23, 2008 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: Link to comment
DarkFire Posted June 24, 2008 Report Share Posted June 24, 2008 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... Link to comment
Recommended Posts
Please sign in to comment
You will be able to leave a comment after signing in
Sign In Now