Chrome Skin

About: Chrome Skin


  • edited May 2009
    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).
  • can you upload here a code with old version(tabs on top)? Thans a lot
  • Yes i'll do ;)
  • edited May 2009
    Oh ok, it's a beta version, i was asking myself about a missed update.

    Ok, New tab button is skinned now.
  • KyoKyo
    edited May 2009
    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.
  • hm, Download Statusbar was skinned oO I'll see that.

    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.
  • Hmm I didn't notice it was skinned at first, I just joined that it is. XD
    and thanks. :)
  • 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
  • edited May 2009
    Thank you Xren for your comment :)

    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, 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.
  • Somewhere in your code you change the width of Font's name and size. It looks strange :)
    Image Hosted by
  • edited May 2009
    That's right.

    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.
  • edited May 2009
    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 ?
  • Unfortunately, it is still transparent.... oh! all the popups are transparent now!
  • 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 (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.
  • I put the white bg. As in the other topic, thx for the ask to increase the limit ;)
  • There is a problem with "alltabs" button in Linux: Image Hosted by
  • 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:
    Image and video hosting by TinyPic
    Like in Google Chrome when you mouse over to the x button it turns red like in the screenshot.
  • As 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 is against red circle.
  • 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. :]
  • edited June 2009
    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.
  • Lol seems like I was the only one who liked it. >_> XD and ok I'll be waiting thanks for all your hard work.
  • 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.
  • Do you mean "tabs" instead of popups menu items ? (so, to make the tabs icons effect to the menu items icons ?)

    (i can see that)
  • edited June 2009
    Here is an explanation:
    Image Hosted by
    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.
  • Okay, I understand (live the screenshots ;)

    I added the effect.
  • Hmmm.... but there is no "hover" effect! :)
Sign In or Register to comment.