Yes, i did not change the screenshot, i'll do that.
(In fact, i decided to keep the tabs at bottom, because the toolbar is better here instead of leaving a sort of hole for the tabs between title bar and menu bar if you did not have "Hide Chrome")
Angel, if you arrived to put the tabs at top (25px height/padding), you just have to invert the the tabs pix, so to edit them : copy / paste the base64 code and paste it in yuour urlbar, it will show the pix in the page. Edit it, and re convert it in base64 code, and replace the current.
What do you mean Xren ? I have FF 3.0.10 and don't have the "New Tab" button (or just the toolbar button).
Hey, I got a new idea could you skin Download Statusbar with the Chrome Skin? :D Thanks oh and btw tabmixplus doesn't seem to work right with this skin on Firefox 3.5 could you fix that too if you can? thanks again.
Neiimad, you've done an excellent work! All the colors/gradients are perfect! Colors for hover and pressing the button effects are gorgeous! There is not much I can recommend to change/do. But I've got couple questions: 1. Did you try to move button's image down 1px and right 1px when user presses the button? I think it would improve 3D effect! 2. I think hover/press the button effect fot tabs inside "Addons", "Options", "View Page Source" windows would also be nice!
Hey, Neiimad!!!!!!!!!! :) Great news! I found a way to make your style work under Linux - and it is easy! All you have to do is to add -moz-appearance:none!important; to every entry which start with #browser, i.e. to all entries starting from #browser .tabbrowser-tabs to #browser .tabs-container .tabbrowser-arrowscrollbox toolbarbutton.tabs-newtab-button .toolbarbutton-icon
About a margin when clicked, that could be a good add, that's right, and i'll see that.
And i agree for tabs hover effect if as well for the browser tabs too, but the problem is that the style code is too long now. So, I must reduce all the image weight (using Smush.it, for example) to gain space with a more small base64code, and then i should add the hover effect (that can take a little time).
And your find about Linux compatibility and to solve the tabs problem, is a VERY GREAT NEW !! And assuredly easy ;) I avow to not have much time to install VirtualBox and Linux, so thanks you very very very very much to have tested on and found how to solve it. I set the -moz-appearance to all the #browser elements as you said, and hope it's ok now.
The problem was that i modified the (menu)popups text min-width to 150px. The size of the right element (font size select) is affected by that change... (now it is set to 20)
There is another problem in Linux - when I press any menu item ("File", "Edit", "Options"....) there is no background (or maybe it is transparent). If you need a screenshot to see it - let me know.
Your post doesn't necessitate a screenshot ;) I made some changes to refer to the exact path of the menus elements and for in the 3 cases (normal, hover, active/open), i suppose it will solve the problem. Can you check that ?
Hey, Neiimad! The solution to transparent / no background problem for your code is simple: Right now you have: menupopup,popup{-moz-appearance:none !important;margin:0px !important;margin-top:2px !important;border:1px solid !important;-moz-border-top-colors:#ccc !important;-moz-border-left-colors:#ccc !important;-moz-border-right-colors:#aaa !important;-moz-border-bottom-colors:#aaa !important} Just add background:#fff!important; and you are done! I've tested it on Fedora 10 and it works!
Also, Neiimad - I took a liberty to ask admin of userstyles.org (Jason Barnabe) to increase the size limit for your style and he generously did it. So, you may now format your code back to readable version.
Still working on something else? because tab mix plus still doesn't work right with this skin yet.
and I think it'll be cool for this to be an add on to this skin: Like in Google Chrome when you mouse over to the x button it turns red like in the screenshot.
Posted By: xrenAs for me - I don't like the Google Chrome's close button hover effect, but I do like the way Neiimad did it. So, my vote isagainstred circle.
Ah,ok I think it's cool though, he could always make a sub-style of it then. :]
Xren is right, the hover effect was not of my taste ^^'
Kyo, sorry for the time i take, but because of a linux problem i had to do a too extend the CSS code with full pathes (etc) and now i try to optimize it. That's a primary goal in my opinion, even if it means i can't add the TMP compatibility for the moment... Be sure i'll prevent you when it will ok.
Xren, i decided to install Linux in VirtualBox to check that. It will be more simple i think ;)
PS: It's strange that in linux the popups/menupopups were transparent because i had skin the menu/menuitems with a white bg, so they made the popup menupopup bg... now with the change, since i had added thewhite bg, when i middle click on the page to move it, the cursor indicator is white... I'll restore without putting a third called bg, and see later what's the problem on linux.
I've got an idea for possible "improvement" of Chrome Skin: In "Options" (or any other menu with "tabs") inactive tab's icon can be faded - opacity:0.85 (or something like that) and opacity: 1 on hover. Current tab should have icon's opacity=1. I got this idea after installing "PDF Download" addon which has such behavior and I liked it.
Here is an explanation: On the picture above the active "tab" is Security and it's icon has opacity = 1. This is OK. All other "tabs" - Main, Tabs, Content, Applications... are "inactive" but still their icons have opacity = 1. I suggest change their icon's opacity to ~ 0.85 and add hover effect, which would bring opacity to 1 on hover.
Comments
(In fact, i decided to keep the tabs at bottom, because the toolbar is better here instead of leaving a sort of hole for the tabs between title bar and menu bar if you did not have "Hide Chrome")
Angel, if you arrived to put the tabs at top (25px height/padding), you just have to invert the the tabs pix, so to edit them :
copy / paste the base64 code and paste it in yuour urlbar, it will show the pix in the page. Edit it, and re convert it in base64 code, and replace the current.
What do you mean Xren ? I have FF 3.0.10 and don't have the "New Tab" button (or just the toolbar button).
Ok, New tab button is skinned now.
Thanks oh and btw tabmixplus doesn't seem to work right with this skin on Firefox 3.5 could you fix that too if you can? thanks again.
For TMP, i don't have made the compatibility, i'm making some changes relative to the tabs before and then i'll do that.
and thanks. :)
1. Did you try to move button's image down 1px and right 1px when user presses the button? I think it would improve 3D effect!
2. I think hover/press the button effect fot tabs inside "Addons", "Options", "View Page Source" windows would also be nice!
Great news! I found a way to make your style work under Linux - and it is easy!
All you have to do is to add -moz-appearance:none!important; to every entry which start with #browser, i.e. to all entries starting from #browser .tabbrowser-tabs to #browser .tabs-container .tabbrowser-arrowscrollbox toolbarbutton.tabs-newtab-button .toolbarbutton-icon
About a margin when clicked, that could be a good add, that's right, and i'll see that.
And i agree for tabs hover effect if as well for the browser tabs too, but the problem is that the style code is too long now. So, I must reduce all the image weight (using Smush.it, for example) to gain space with a more small base64code, and then i should add the hover effect (that can take a little time).
And your find about Linux compatibility and to solve the tabs problem, is a VERY GREAT NEW !! And assuredly easy ;) I avow to not have much time to install VirtualBox and Linux, so thanks you very very very very much to have tested on and found how to solve it. I set the -moz-appearance to all the #browser elements as you said, and hope it's ok now.
The problem was that i modified the (menu)popups text min-width to 150px.
The size of the right element (font size select) is affected by that change...
(now it is set to 20)
The solution to transparent / no background problem for your code is simple:
Right now you have:
menupopup,popup{-moz-appearance:none !important;margin:0px !important;margin-top:2px !important;border:1px solid !important;-moz-border-top-colors:#ccc !important;-moz-border-left-colors:#ccc !important;-moz-border-right-colors:#aaa !important;-moz-border-bottom-colors:#aaa !important}Just add
background:#fff!important;and you are done!I've tested it on Fedora 10 and it works!
http://forum.userstyles.org/comments.php?DiscussionID=2841&page=1
and I think it'll be cool for this to be an add on to this skin:
Like in Google Chrome when you mouse over to the x button it turns red like in the screenshot.
Kyo, sorry for the time i take, but because of a linux problem i had to do a too extend the CSS code with full pathes (etc) and now i try to optimize it. That's a primary goal in my opinion, even if it means i can't add the TMP compatibility for the moment... Be sure i'll prevent you when it will ok.
Xren, i decided to install Linux in VirtualBox to check that. It will be more simple i think ;)
PS: It's strange that in linux the popups/menupopups were transparent because i had skin the menu/menuitems with a white bg, so they made the popup menupopup bg... now with the change, since i had added thewhite bg, when i middle click on the page to move it, the cursor indicator is white... I'll restore without putting a third called bg, and see later what's the problem on linux.
In "Options" (or any other menu with "tabs") inactive tab's icon can be faded - opacity:0.85 (or something like that) and opacity: 1 on hover. Current tab should have icon's opacity=1.
I got this idea after installing "PDF Download" addon which has such behavior and I liked it.
(i can see that)
On the picture above the active "tab" is Security and it's icon has opacity = 1. This is OK.
All other "tabs" - Main, Tabs, Content, Applications... are "inactive" but still their icons have opacity = 1. I suggest change their icon's opacity to ~ 0.85 and add hover effect, which would bring opacity to 1 on hover.
I added the effect.