- Glasser Guide - NOT a style, but a written guide.

(No screenshot available)
GlassMyFox obsoletes the following. Install that extension instead.

I created this "Style" as a novice's guide into the world of glasser. This is not a style, so do not install. In fact it would be better left in the forums (, but I am posting it here for all to see and find.

To use this style, install Firefox and Stylish. If you already have Stylish, make sure this site is allowed to run JavaScript.

Glasser Guide - NOT a style, but a written guide.
License ©
Created Jan 17, 2010
Updated Mar 13, 2010
Installs (this week) 0
Installs (total) 322
Show CSS


Before we continue, it is required you have Windows Vista Home Premium or higher on your machine. Why? Because that is all Glasser works with. Else you just get... black. And that's ewww in this case. :)

So what is Glasser? Simple. Glasser is an extension made by SixxGate for Firefox 2 and up (to my knowledge, leave a comment if I am off). It will help enable you to make a fully transparent browser to which then you can put animations behind like visualizers, or screensavers. Look in the code for that trick.

Persona users! Listen up! Glasser will NOT work with it. By default, anyway. I have created a style called Personas without Personas ( for everyone with Glasser reading this to add an image to the toolbars. Can be small, can be large, can be a Persona, just requires a little finger tweaking and potentially some face time with DOM Inspector

After you have installed Glasser, you will have noticed, only #nav-bar and #toolbar-menubar uses the Aero Glass effect. This is to match Explorer windows in Vista. There are a couple files in that will help you glass the rest of your browser. Find 'em here:

If the additional files are no longer there, have no fear; It's in the code! Make sure you click the install button, THEN copy the code. Else the code will be double-spaced, and you don't wanna be arsed to remove all that unnecessary whitespace.

The files you are looking for are dwm-overlay.js and overlay.css. Go into an explorer window and type this in: %appdata%/mozilla/firefox/profiles

At this point, it is up to you to find your profile. For most this will be xxxxxxxx.default. IF you have multiple profiles, look after the code in each folder for your profile's name. Click that, go into /extensions/

dwm-overlay.js goes into /content. overlay.css goes into /skin/classic. Again, if you cannot download these files, look in the code and copy all the text to the right files. Make sure you either save the code in the exact name the files need on your desktop or some other place and save the code in notepad or open the .js and .css files in notepad.

Before you go any farther, download and install VistaGlazz and use it on your machine.

After replacing the files is is time for you to reboot Firefox. And, LO AND BEHOLD, your entire browser should be glassed up. What to do at this point? *Lots*.

Before you restart I kinda hope you already have Stylish and DOM inspector. If not, you can grab them right in your add-ons console. Now depending on what you have at this point, not much more work will be done on your browser. But if you notice something thst doesn't quite fit, then it's time to spring into action.

Open DOM Inspector (++I) and type in the address bar chrome://browser/content/browser.xul. After that, just click the Find a node... button and find whatever element is off. A good hold on CSS is a requirement, but even if you don't have that, you can reference what you find on for help.

Some tips:
If an element is not transparent, the Glasser mask is black. Use color "black" or rgb(0,0,0) for elements to to have the Windows Aero effect
Sometimes text color needs to be changed. If you want black text, use color:rgba(0,0,0,0.99)!important;.
Sometimes you cannot even do that. In that case apply opacity:0.99!important to the element. Sometimes the entire toolbar, other times the element within the toolbar.
The color of the text shadow by default is 0px 0px 6px white,0px 0px 6px white,0px 0px 6px white. Yes it is necessary to do that three times as the text-shadow element is layered, with each comma denoting a new layer below.
(Sorry for not saying this for awhile) Inverted colors for links and other non-essential parts of the browser are also acceptable.
Remember this: #ID, .class, element > child, element[anonid/type/other="status"], {attribute:selector;!important}
Use Stylish to start, but hardcode everything in overlay.css when you've got something figured out. Or if you are going to use different colored font, then modify the overlay.css file to remove any color and text shadow elements so you can override them yourself.

Here is some code to start:
#status-bar *{
opacity: 0.99 !important;
color: black !important;
text-shadow: 0px 0px 6px white, 0px 0px 6px white, 0px 0px 6px white !important;



No discussions posted in the last year. See older discussions. Ask a new question or add a review for this style.