Help - Search - Members - Calendar
Full Version: All-Glass Firefox
Neowin Forums > Customizing Windows > Customization & Skinning Section
Pages: 1, 2, 3, 4, 5
Ambroos
Sep 25 2008, 15:38
All-Glass Firefox v2

LINKY LINK!
please use this version from now on!

All-Glass Firefox v1 for FF3.0.x (discontinued)
It makes all Firefox' frame glass, and looks really neat in Vista! It is getting close to completion, with a lot of help from g4rb4g3 who fixed all the status and search bar issues!

The Modified glasser JS and the original idea both come from Jordoex. Click here to see his original post.

You only need to update your Stylish theme. The glasser JS remains the same!

Changelog:
25/09/08
Fixes ugly inactive tabs in maximized mode.

07/10/08
g4rb4g3 gave a fix for the disappearing status bar text. I added it! Thanks g4rb4g3!

08/10/08
Search bar text is back, status bar dividers are gone, one bugfix (credits to g4rb4g3)

12/10/08
Padding change: The back button is now completely inside the window.

13/10/08
Padding change: fixes some cut off text
Color and opacity change to inactive tabs
File menu text has gone white now! Let me know what you think!

11/11/08
Bookmarks bar title fixed. Thanks schnupi for reporting.

24/11/08
Latest version of v1 with some minor bugfixes

Modified dwm-overlay.js (for Glasser)

Stylish Userstyle


Only for Vista (with Aero), requires Glasser, Stylish and the Default Firefox Theme (Strata)
  1. Install Glasser and Stylish (and Compact Menubar is highly recommended)
  2. %AppData% * Mozilla Firefox Profiles * ** YOUR PROFILE NAME ** * extensions glasser@sixxgate.com * chrome * content
    Rename your old dwm-overlay.js to dwm-overlay.js.backup to back it up.
    Copy my modified dwm-overlay.js over to the folder.
  3. Install my Stylish Userstyle.
Click to view attachment

Known bugs:
  • Doesn't look really amazing with file menu bar enabled
  • GMail Notifier Bugs the style!
  • Text isn't that readable on very light backgrounds.
Soldiers33
Sep 25 2008, 15:40
looks nice, but unfortunatly i dnt use firefox. ie8 ftw smile.gif
DARKFiB3R
Sep 25 2008, 15:43
What changes did you stylish userstyle make?

Edit: I use Tab Mix Plus to change the text colour on tabs, if that is any good to you for now.
Ambroos
Sep 25 2008, 15:48
Quote - (DARKFiB3R @ Sep 25 2008, 17:43) *
What changes did you stylish userstyle make?

Edit: I use Tab Mix Plus to change the text colour on tabs, if that is any good to you for now.


Without the Userstyle it looks like this
Click to view attachment

The modified glasser script makes transparant Interface elements glass, the stylish makes all interface elements transparant.
Andrew Lyle
Sep 25 2008, 15:52
actually... it's not bad at all. I kind of like it now that I actually see it.
Ambroos
Sep 25 2008, 16:07
Update
Fixes ugly inactive tabs in maximized mode.

Update from userstyles.com
NienorGT
Sep 25 2008, 16:32
Awesome thanks. I hope I will be able to fixate this with my own style smile.gif
yurithedragonhalf
Sep 25 2008, 16:47
mmmm glassy
DARKFiB3R
Sep 25 2008, 18:49
Quote - (Ambroos @ Sep 25 2008, 16:48) *
Without the Userstyle it looks like this
Click to view attachment

The modified glasser script makes transparant Interface elements glass, the stylish makes all interface elements transparant.

That's not the same page, so I cant really compare the two!
Ambroos
Sep 25 2008, 19:12
Quote - (DARKFiB3R @ Sep 25 2008, 20:49) *
That's not the same page, so I cant really compare the two!


I think you don't get it. Userstyles can also edit the Firefox User Interface, it doesn't only do websites...

Just look at the difference between my Firefox frames...
vette
Sep 25 2008, 19:26
Heh, I've been messing around with this for about an hour. My question to you though; is there a way to just have the tab background transparent? That's what I've been trying to get today, just the tab background to have the glasser effect.
Pseudonym
Sep 25 2008, 19:42
I like it, it does fit perfectly with aero etc.
Ambroos
Sep 25 2008, 20:18
Quote - (Lelu @ Sep 25 2008, 21:26) *
Heh, I've been messing around with this for about an hour. My question to you though; is there a way to just have the tab background transparent? That's what I've been trying to get today, just the tab background to have the glasser effect.


There is a way, but that's got to be changed in your theme. Just change your regular tab background with some transparant PNG, or use the inactive one. You can then change the text on the tabs to white/leave it black...
SMELTN
Sep 25 2008, 20:48
when clicking on the user style to try to install it, it says: Style with ID 10771 not found.

Hidr0
Sep 25 2008, 21:04
nice work... keep it up
Ambroos
Sep 25 2008, 22:00
Quote - (smeltn @ Sep 25 2008, 22:48) *
when clicking on the user style to try to install it, it says: Style with ID 10771 not found.

Works perfectly fine for me
SMELTN
Sep 25 2008, 22:20
whats the name of the style.. maybe I can search for it and find it that way?


hmm when I go to userstyles.org I get this message up top:

Quote -
This site has changed hosts. This is the old host. We're having problems with our DNS and hope to get it resolved soon. Until then, you can use the old host all you like, just don't bother posting comments or styles, because they won't make it to the new host. You'll know you're on the new host when you no longer see this ugly message smile.gif


Pretty sure that's why I can't see your style. How do I get it to refresh to the new host?
Kudo
Sep 25 2008, 22:26
Quote - (smeltn @ Sep 26 2008, 00:20) *
whats the name of the style.. maybe I can search for it and find it that way?


hmm when I go to userstyles.org I get this message up top:



Pretty sure that's why I can't see your style. How do I get it to refresh to the new host?


This is the style http://userstyles.org/styles/10771 the name is Glass your Firefox - By Ambroos.
Shadrack
Sep 25 2008, 22:29
Looks great! Definitely installing this on my Vista box at home.
SMELTN
Sep 25 2008, 22:32
well WTF.. I can not see it by going to that link.. and if I go to userstyles.org and search for the style it comes up nothing found...............
DARKFiB3R
Sep 25 2008, 23:08
Quote - (Ambroos @ Sep 25 2008, 20:12) *
I think you don't get it. Userstyles can also edit the Firefox User Interface, it doesn't only do websites...

Just look at the difference between my Firefox frames...


Ah! I did not know that, and I've been using Userstyles for ages lol

This link works fine for me

http://userstyles.org/styles/10771
SMELTN
Sep 26 2008, 00:48
grrrr what am I doing wrong?

Kudo
Sep 26 2008, 09:45
Quote - (smeltn @ Sep 26 2008, 02:48) *
grrrr what am I doing wrong?


Disable any other style you have for FF3 Interface. It works for me.
Stingray
Sep 26 2008, 10:52
Quote - (alex1990 @ Sep 25 2008, 16:40) *
looks nice, but unfortunatly i dnt use firefox. ie8 ftl smile.gif


Ambroos
Sep 26 2008, 15:15
Quote - (smeltn @ Sep 26 2008, 02:48) *
grrrr what am I doing wrong?



or you don't have the default FF theme, or you don't modify the Glasser JS correctly
Pseudonym
Sep 26 2008, 15:19
OK, now I've used it for a while, I've noticed a few things. I apologise if others ahve pointed these out, just thought I'd add my thoughts.

The colour of the text on the bookmark toolbar doesn't really fit with aero or Fx and is my one major (ok, so its not really huge) gripe.

Some of the favicons on the bookmark toolbar have a white border around them (i appreciate this isn't the fault of the the theme, but it is exacerbated and there might be ways to limit the impact, idk)

Otherwise, as i said before, I love it, really good work.
Ambroos
Sep 26 2008, 15:25
Quote - (Pseudonym @ Sep 26 2008, 17:19) *
OK, now I've used it for a while, I've noticed a few things. I apologise if others ahve pointed these out, just thought I'd add my thoughts.

The colour of the text on the bookmark toolbar doesn't really fit with aero or Fx and is my one major (ok, so its not really huge) gripe.

Some of the favicons on the bookmark toolbar have a white border around them (i appreciate this isn't the fault of the the theme, but it is exacerbated and there might be ways to limit the impact, idk)

Otherwise, as i said before, I love it, really good work.


The favicons having a white border, can't do a thing about it... You can edit the favicons manually (some way, i think), but there's no way to do that...

The text colour: at the 4th # in the userstyle you can edit it. Example:
CODE
#main-window #navigator-toolbox #PersonalToolbar toolbarbutton > label
{
     color: red !important;
     opacity: .90 !important;
}
SMELTN
Sep 26 2008, 20:51
WOOT!! Thanks to the awesome help of Ambroos, mine is now working great. Looks awesome thanks again smile.gif
Skulltrail
Sep 26 2008, 20:58
Just what I was looking for. I prefer Firefox over all other browsers, but enjoy Chrome's transparency. This allows me to have a little of both! laugh.gif
Sevan
Sep 26 2008, 22:08
Quote - (smeltn @ Sep 25 2008, 20:48) *
grrrr what am I doing wrong?

~snip~

Wow, that looks bad.

Yeah, make sure you edited the files correctly, and have all other themes off except for the default one.
Ambroos
Sep 26 2008, 22:25
Quote - (Sevan @ Sep 27 2008, 00:08) *
Wow, that looks bad.

Yeah, make sure you edited the files correctly, and have all other themes off except for the default one.


It was his GMail notifier that did it. Helped him trying to fix it. (It's fixed now)
Medfordite
Sep 26 2008, 22:35
Too bad they didn't have Vista at work. I would be running that on the XP box here. Looks cool though! I have always like semi-transparent apps and windows. smile.gif

BTW, interesting effect if you run it in XP. (Mac as well, tried it a few days ago there for kicks)
Ambroos
Sep 26 2008, 22:50
Quote - (Ironman2003 @ Sep 27 2008, 00:35) *
Too bad they didn't have Vista at work. I would be running that on the XP box here. Looks cool though! I have always like semi-transparent apps and windows. smile.gif

BTW, interesting effect if you run it in XP. (Mac as well, tried it a few days ago there for kicks)


Mind posting the interesting effect? Would love to see
Medfordite
Sep 26 2008, 23:15
This is what I have and the extensions I have going.




As for firefox plugins - Better Gmail2, Forecast fox (See that at bottom), IE TAB, Google Gears, and Stylish.


I can't do the Mac as I am at work, but pretty much does the same.
vette
Sep 26 2008, 23:35
Quote - (Ironman2003 @ Sep 26 2008, 19:15) *
This is what I have and the extensions I have going.
As for firefox plugins - Better Gmail2, Forecast fox (See that at bottom), IE TAB, Google Gears, and Stylish.
I can't do the Mac as I am at work, but pretty much does the same.


You need to have Windows Vista for this to work. XP won't work.
jordoex
Sep 27 2008, 03:32
I did that 2 weeks ago, although with night launch instead of strata:
http://forums.mozillazine.org/viewtopic.ph...450205#p4450205
Ambroos
Sep 27 2008, 16:06
Jordoex, that's where I got the idea!
Malskazz
Sep 30 2008, 21:28
Nice work Ambroos, i didn't see this topic before now biggrin.gif..

See you on msn ect
Darksoft
Oct 1 2008, 23:35
can somebody give me the stylish theme?

the website in the OP doesn't work. sad.gif
mimol
Oct 6 2008, 16:59
How Can I turn on status bar?
Pseudonym
Oct 6 2008, 18:39
Quote - (mimol @ Oct 6 2008, 17:59) *
How Can I turn on status bar?

Read the bug report in the OP and realise that this is a known problem...
mimol
Oct 7 2008, 14:24
Quote -
Read the bug report in the OP and realise that this is a known problem...

What mean OP?
If u add this script, status bar will be show but text doesnt looks nice.
CODE
/* Vista Transparency theme


/* Get rid of fat border */

#navigator-toolbox,

#nav-bar,

#PersonalToolbar {

  margin-bottom: -1px !important }



#browser {

  border: 0 !important }



/* Tabbar and toolbar looks */



#PersonalToolbar,

#FindToolbar,

sidebarheader,

statusbarpanel,


.tabs-bottom {

  -moz-appearance: none !important;

  background: url("data:image/png;base64,

   iVBORw0KGgoAAAANSUhEUgAAAAEAAAAYCAIAAAC0rgCNAAAACXBIWXMAAA7EAAAOxAGVKw4bAAAAB3R

    JTUUH2AIDBAEFNLSlfgAAAAd0RVh0QXV0aG9yAKmuzEgAAAAMdEVYdERlc2NyaXB0aW9uABMJISMAAA

    AKdEVYdENvcHlyaWdodACsD8w6AAAADnRFWHRDcmVhdGlvbiB0aW1lADX3DwkAAAAJdEVYdFNvZnR3Y

    XJlAF1w/zoAAAALdEVYdERpc2NsYWltZXIAt8C0jwAAAAh0RVh0V2FybmluZwDAG+aHAAAAB3RFWHRT

    b3VyY2UA9f+D6wAAAAh0RVh0Q29tbWVudAD2zJa/AAAABnRFWHRUaXRsZQCo7tInAAAAW0lEQVR4nCX

    DPQqDQBCA0fHT9Ydd8Qg2KXN/RK9jI9qFODOuhBQ+eDLNC9t+cOUbyxk15zTna85HHfWL056af+WqJS

    KCFBVCQAhUoaWuO5o2EmNPSgMpDYzv1x/uYCVPmghWvQAAAABJRU5ErkJggg==") bottom !important }




#FindToolbar > *,

.findbar-container > *,

statusbarpanel,

sidebarheader,



#PersonalToolbar toolbarbutton > label {

  color: -moz-win-mediatext !important }



#FindToolbar > *,

.findbar-container > * {

  display: -moz-box !important }



statusbarpanel {

  -moz-appearance: statusbar;

  border: 0px !important }



#FindToolbar,

sidebarheader {

  border: 0px !important }



/* Keep menus readable */

menulist > menupopup {

  -moz-appearance: menupopup !important }



menulist > menupopup > menuitem[_moz-menuactive="true"] {

  -moz-appearance: menuitem !important }



/* Toolbar Buttons Closer */

#toolbar-menubar > toolbarbutton,

#nav-bar > toolbarbutton,

#nav-bar > .toolbarbutton-icon,

#FindToolbar toolbarbutton,

#FindToolbar toolbarbutton *,

.bookmark-item .toolbarbutton-text {

  -moz-appearance:none !important;

  border: 0px !important;

  margin: 0px 0px 0px 1px !important;

  padding: 0px 0px 0px 0px !important }



#nav-bar > toolbarbutton * {

  border: 0px !important;

  margin: 0px 0px 0px 1px !important;

  padding: 0px  !important }



.chevron {

  -moz-appearance:none !important;

  margin: 0px 0px 0px 0px !important;

  padding: 0px 0px 0px 0px !important }



.bookmark-item {

  -moz-appearance:none !important;

  margin: 0px 0px 0px 0px !important;

  padding: 0px 0px 0px 0px !important }



.bookmark-item .toolbarbutton-icon {

  -moz-appearance:none !important;

  border: 0px !important;

  margin: 0px 0px 0px 2px !important;

  padding: 0px 0px 0px 0px !important }



/* Hide bookmarkmenubar, unhide by hovering Navigator Toolbox */

#PersonalToolbar {

  visibility: collapse !important }




/* Transparent tooltip */

tooltip {

  -moz-appearance: none !important;

  background-color: transparent !important;

  color: -moz-win-mediatext !important;

  font-family: Calibri, Tahoma, sans-serif !important;

  background-image: url("data:image/png;base64,

    iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABh0RVh0U29

    mdHdhcmUAUGFpbnQuTkVUIHYzLjA4ZXKc4QAAAC9JREFUOE9j5LcMWsxATQAykJqYgZqGgX07aiDFET

    QahpQn8tEwHA1DMsrKwZ9sADuo19oANiVcAAAAAElFTkSuQmCC") !important }



/* Translucent dialogs (too dark for vistaglazz toolbars) */

@-moz-document url(chrome://global/content/commonDialog.xul) {

  dialog {

    background: url("data:image/png;base64,

      iVBORw0KGgoAAAANSUhEUgAAABQAAAAUCAYAAACNiR0NAAAABGdBTUEAAK/INwWK6QAAABh0RVh0U29

      mdHdhcmUAUGFpbnQuTkVUIHYzLjA4ZXKc4QAAAC9JREFUOE9j5LcMWsxATQAykJqYgZqGgX07aiDFET

      QahpQn8tEwHA1DMsrKwZ9sADuo19oANiVcAAAAAElFTkSuQmCC") !important }



  description, checkbox {

    color: -moz-win-mediatext !important;

    font-family: Calibri, Tahoma, sans-serif !important;

    font-size: 11pt !important }



  vbox > description {

    font-weight: bold !important }

}



/* TabMix: Tab Progressbar with system appearance */

tab .progress-bar {

  -moz-appearance: progresschunk !important }



#statusbar-progresspanel {

  display: none !important }



.searchbar-textbox{

   margin-right:0

}





#identity-box,

.autocomplete-history-dropmarker,

.textbox-input-box,

.search-go-container {

   margin-top: -1px !important;

   margin-bottom: -1px !important }



#identity-box > hbox,

#identity-box,

#page-proxy-stack,

.searchbar-engine-button {

   background: none;

   border-right: none!important }



#identity-box > hbox,

.searchbar-engine-button {

   padding-right: 1px !important }



#identity-box:hover > hbox,

.searchbar-engine-button:hover {

   padding-right: 0 !important;

   background-image: url(chrome://browser/skin/navbar-textbox-buttons.png);

   border-right: 1px solid ThreeDShadow!important }



#page-proxy-stack:hover {

   background-image: url(chrome://browser/skin/urlbar-favicon-glow.png) }



#page-proxy-stack {

   margin-left: -4px }
darren89
Oct 7 2008, 14:47
thank you for sharing with us ambroos! smile.gif

i'll try it out and see how's it.

hopefully its good! wink.gif
darren89
Oct 7 2008, 15:24
haiz....... sadly it doesn't work properly at my firefox. i'm using vista home basic by the way.

is it a must to use vista with transparency (glass) effects? confused.gif

Click to view attachment

can you possibly make this work for vista home basic as well?

i doubt that.. sad.gif
Ambroos
Oct 7 2008, 16:21
Quote - (darren89 @ Oct 7 2008, 17:24) *
haiz....... sadly it doesn't work properly at my firefox. i'm using vista home basic by the way.

is it a must to use vista with transparency (glass) effects? confused.gif

Click to view attachment

can you possibly make this work for vista home basic as well?

i doubt that.. sad.gif


I have no idea about making it work in Vista Home Basic, but I highly doubt it, as I don't think it's rendered the same way...
darren89
Oct 7 2008, 17:13
Quote - (Ambroos @ Oct 8 2008, 00:21) *
I have no idea about making it work in Vista Home Basic, but I highly doubt it, as I don't think it's rendered the same way...


hmm...do you have anyway to solve this? just curious.

anyway, i'll try that on my vista business and ultimate. it should work fine. smile.gif
g4rb4g3
Oct 7 2008, 19:14
Quote - (mimol @ Oct 6 2008, 16:59) *
How Can I turn on status bar?


Add this to the stylish script:

CODE
/* Fixes a problem with ugly statusbar text*/

.statusbarpanel-text{ color: gray !important; opacity: 1 !important; }


edit:

this is for the findbar:
CODE
.findbar-find-fast{ color: white !important; opacity: 1 !important; }
.checkbox-label-box{ color: white !important; opacity: 1 !important; }


Does anybody know how to remove the separator between the statusbar icons?

g4rb4g3
g4rb4g3
Oct 7 2008, 19:19
Quote - (darren89 @ Oct 7 2008, 15:24) *
haiz....... sadly it doesn't work properly at my firefox. i'm using vista home basic by the way.

is it a must to use vista with transparency (glass) effects? confused.gif

Click to view attachment

can you possibly make this work for vista home basic as well?

i doubt that.. sad.gif


You need a Vista with glass support. It will never work on Vista Home Basic because it just extends the area for glass to the navigation and tab bar. But your system doesn't support glass at all.
Ambroos
Oct 7 2008, 19:35
Hi there!

Thanks for all the good reply's! I'm glad you're all enjoying it!

I've updated the style today with some new bits I got, it's all in the original post, and done some cleaning!

I've also rewritten the original post, and it is now a lot clearer how to do everything.

Thank you all, and keep the downloads coming!

Ambroos

(PS: if anyone knows how to remove the status bar divider lines, please let me know!)

Latest update:
Click to view attachment
SMELTN
Oct 7 2008, 21:21
so do we need to redownload the Modified dwm-overlay.js (for Glasser) or just the stylish userstyle to update?
This is a "lo-fi" version of our main content. To view the full version with more information, formatting and images, please click here.
Invision Power Board © 2001-2009 Invision Power Services, Inc.