Firefox - Enable Aero Glass Transparency

How to Have Firefox with Glass Transparency in Windows 7​

   Information

In this tutorial I will show you how to make your Firefox have the Aero Glass Transparency look.

   Note

•I do not take credit for any of the scripts uploaded within this tutorial, apparently I don't even have any knowledge about CSS scripts before but learning it bit by bit was fun. I am not that good with CSS so I borrowed the scripts used in this tutorial. The scripts were made by YupYup and 12eason from this thread, you can view the thread for reference and questions. What I did in this tutorial is I merged their methods to achieve a much more flexible solution in glassing Mozilla Firefox. Slight modifications were made by me from their script for my own personal liking but you can tweak the style to your own liking as well .

• Okay then, let's begin....

   Warning

•Remember to always backup your files before proceeding
•This method only works for the latest version of Firefox (Mozilla Firefox 3.5.1)

•This method only works with Glasser and NOT with All-Glass

Here's How:

Step 1: Install Nightly Tester Tools to get Glasser Extension to work (in case you don't have it yet), if you already have Nightly Tester Tools then proceed to Step 2.

Step 2: Download Glasser 1.1.1 here - Glasser 1.1.1 and use force install to make it work with Firefox.

Step 3: On your windows explorer type %appdata%\Mozilla and browse inside your Firefox Profile then go through the following folders: extensions > [email protected] > chrome > content

Replace the 'dwm-overlay.js' in your Firefox Profile with this one -View attachment dwm-overlay.js.txt

   Tip

» Copy the content of the text document and save it as "dwm-overlay.js" without quotations.

   Information

You could add more websites onto the whitelist if you would like to apply your own 'Glass Style' on that certain website..

Step 4: On your windows explorer type %appdata%\Mozilla and browse inside your Firefox Profile then go through the following folders: extensions > [email protected] > chrome > skin > classic

Replace the 'overlay.css' in your Firefox Profile with this one - View attachment overlay.css.txt

   Tip

» Copy the content of the text document and save it as "overlay.css" without quotations.

Step 5: Install Stylish (in case you don't have it yet- then restart firefox if needed), if you already have Stylish then proceed to Step 6.

Step 6: Choose and download the appropriate updated style for you from the files I attached below:

View attachment Aero Fox 7 - Glassed for Default Sidebar.txt

View attachment Aero Fox 7 - Glassed for All-in-One Sidebar.txt

   Information

I managed to somehow make the styles work with other themes but I'm not sure if it works on all themes

Step 7:

• Open the style you just downloaded with notepad or word pad or whichever you prefer, and copy the entire contents.

• Now in Firefox click on Tools > Add-ons > User styles and click the write new style button at the top right corner.

• At the top of new style window give it a name and paste what you just copied in step into the main area and click save. The style will automatically be enabled.

Step 8: Restart Firefox.

   Information

There are still bugs and some fixes that needs to be done.. like the scroll bars appearing black on websites and some tooltips

   Tip

Just switch tabs to gain normal view when the page seems illegible, this usually happens after switching from a Glassed tab to a non-Glassed tab

   Information

Here's the glass theme for "Windows 7 v2 b" for sevenforums made by 12eason
-View attachment Seven Forums - Aero Effect Win v2 b theme.css.txt

For the Google and about:blank page you could use YupYup's code here in this thread.

The Google and about:blank page on the screenshots below are what I'm currently using, if you like them I'll upload them for you

Screenshots:

   Information

The Screenshots above show that "google.com" and "sevenforums.com" are glassed. Those webpages were glassed because i have a Stylish code for those websites to make them look glass, but in order to achieve the full glass effect, you would still have to put the domain of those websites on your whitelist. On the other hand "yahoo.com" is not glassed since i don't have a Stylish code for that website and it looks normal because I did not put its domain on my white list. Even though the webpage looks normal as it should, I still have the transparency on my browser.

Related Tutorials

---

• How to Enable or Disable Windows 7 Transparency
• How to Enable Full Clear Glass Transparency in Windows 7

 

[skunksmash]

nice work lads.....


i need a little guidance with getting a clear glassed homepage..



as you can see i have two huge white bars where the text runs across the screen..... ive missed something but not sure what

 

[xxrazor]

nice work lads.....


i need a little guidance with getting a clear glassed homepage..

View attachment 51258

as you can see i have two huge white bars where the text runs across the screen..... ive missed something but not sure what

Please note the changes i have made to fix this issue, i have not copied the whole text file just the changes i made.

@namespace url([url=http://www.w3.org/1999/xhtml]XHTML namespace[/url]);



@-moz-document url-prefix([URL="http://www.google/"]http://www.google[/URL]),

               url-prefix([URL="https://www.google/"]https://www.google[/URL]),

               url-prefix([URL="http://maps.google.com/"]http://maps.google.com[/URL]),

               url-prefix([URL="http://images.google.com/"]http://images.google.com[/URL]),

               url-prefix([URL="http://blogsearch.google.com/"]http://blogsearch.google.com[/URL]),

               url-prefix([URL="http://video.google.com/"]http://video.google.com[/URL]),

               url-prefix([URL="http://news.google.com/"]http://news.google.com[/URL]),

               url-prefix([URL="http://books.google.com/"]http://books.google.com[/URL]),

               url-prefix([URL="http://scholar.google.com/"]http://scholar.google.com[/URL]),

               url-prefix([URL="http://picasaweb.google.com/"]http://picasaweb.google.com[/URL]),

               url-prefix([URL="http://sites.google.com/"]http://sites.google.com[/URL]),

               url-prefix([URL="http://code.google.com/"]http://code.google.com[/URL]),
               
               url-prefix([URL="http://groups.google.com/"]http://groups.google.com[/URL]),

               url-prefix([URL="http://reader.google.com/"]http://reader.google.com[/URL])

                

                   
{


FORM*:not([name="q"]):not([type="submit"]):not([type="button"]):not([class="gac_m"]):not(img) 
{ 
 background: transparent !important; 
}

.gac_m, #fade, #sbl, #fctr, #ghead 

{

padding-top: 20px!important;

background-color: rgba(0,0,0,0.0) !important;

opacity: 0.99 !important;

Also note i had to make a change to the color code just under new command from 0,0,0,0.5 to 0,0,0,0.0

Hope this helps

cheers
xxrazor

 

[Grimmjow]

nice work lads.....


i need a little guidance with getting a clear glassed homepage..

View attachment 51258

as you can see i have two huge white bars where the text runs across the screen..... ive missed something but not sure what

About that lines, try google minimalist
https://addons.mozilla.org/en-US/firefox/addon/54458

 

[skunksmash]

cheers.......

but TBH after 24hrs of running the glass Google screens i had to remove it again, its very pretty but just too much for general everyday use....

 

[alienfear]

what character is that 1st page?

 

[ispurkaloyg]

Hi,

What are the requirements? I using firefox 3.6.8 and already have a glasser 2.2.0.3.7 installed on it. Should I downgrade to firefox 3.5 and glasser 1.1 or are there any other codes working for my current setup? Thanks in advance.

 

[Aero]

How to get Full Aero Mozilla Firefox (Win 7/Vista)

   Tip

This Tutorial might not work if you do not have the latest Firefox (Version 3.6.8).
To get the latest version, in FireFox, click Help, and then in the context menu select About Mozilla Firefox. The version of your Firefox will be displayed there.

   Note

Here are screenshots displaying Firefox before and after the Aero interface was applied.

Before:
After:

STEP 1: First, open Firefox. After that, click this Download Link:
Download

<--- This will download an Addon which will enable Aero in Firefox.

STEP 2:Click allow on the top when Firefox says it blocked the download. Then, Click install when the option comes. After that it will ask you to restart FireFox, accept it or manually close and open FireFox.

STEP 3: Look at your new Aero Firefox and stare at its new found beauty .

Thanks for reading this short tutorial!

 

[deepakumar]

Nightly Tester Tools

Hey

i tried downloading Nightly Tester Tools with 3.5.11, 4.0 beat 2 but didn't worked so should i downgrade to 3.5.1???
is there a way to get a aero effect on 4.0 version thats what i'm using??? let me know....
thanks...!!!

 

[CanUplzHelpMe]

Hi, Im using Vista, "glass every single part of firefox", however, my firefox isnt completely see through, it's opaque. and has faint diagonal white lines running all over it. my question is, is there any way to make my FF see through? so i can get a view of a clear background, and how do you get rid of the lines? thanks. View attachment 51318
link is glassed with no lines? how do i get this? mine is opaque with annoying stripes
also attached is my situation, been at this for the past 8 hours, any thoughts?

 

[gigabyte]

dosent work with firefox 4 beta

 

[CanUplzHelpMe]

even with mr tech toolkit?

 

[gigabyte]

Nightly Tester Tools is not compatibal with firefox 4 beta

 

[severedsolo]

Nightly Tester Tools is not compatibal with firefox 4 beta

It doesn't need to be... Firefox 4.0 Beta already has Aero effects built into it!

 

[luar]

try this....with stylish

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("about:blank") {

body{ background-color:#000000 !important }
}
@-moz-document url-prefix(http://), url-prefix(ftp://), url-prefix(file://), url-prefix(https://) {

* {
background-color: #000000 !important;
background-image: none !important;
border-color: #222222 !important;
color: #bbbbbb !important;
/*font-family: Segoe UI !important;*/
}
a:link {
color: #FFD700 !important;
}
a:visited {
color: #228b22 !important;
font-weight: bold;
}
a:hover,
a:active {
color: #db6c4c !important;
}

select,
textarea,
input[name=q],
input[type=text],
input[type=password],
input[type=file] {
background-color: #000000 !important;
-moz-appearance: none !important;
color: #eeeeee !important;
border: 1px dotted #606060 !important;
}
input[type=button],
input[type=submit],
input[type=reset] {
background-color: #252525 !important;
color: #aaaaaa !important;
-moz-appearance: none !important;
border-color: #202020 !important;
}
img {
opacity: 0.75 !important;
-moz-opacity: 0.75 !important;
}

}

 

[luar]

try this....using stylish

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url("about:blank") {

body{ background-color:#000000 !important }
}
@-moz-document url-prefix(http://), url-prefix(ftp://), url-prefix(file://), url-prefix(https://) {

* {
background-color: #000000 !important;
background-image: none !important;
border-color: #222222 !important;
color: #bbbbbb !important;
/*font-family: Segoe UI !important;*/
}
a:link {
color: #FFD700 !important;
}
a:visited {
color: #228b22 !important;
font-weight: bold;
}
a:hover,
a:active {
color: #db6c4c !important;
}

select,
textarea,
input[name=q],
input[type=text],
input[type=password],
input[type=file] {
background-color: #000000 !important;
-moz-appearance: none !important;
color: #eeeeee !important;
border: 1px dotted #606060 !important;
}
input[type=button],
input[type=submit],
input[type=reset] {
background-color: #252525 !important;
color: #aaaaaa !important;
-moz-appearance: none !important;
border-color: #202020 !important;
}
img {
opacity: 0.75 !important;
-moz-opacity: 0.75 !important;
}

}

 

[joe7dust]

Firefox 4.0 Beta already has Aero effects built into it!

It does? All I see is an Aero border. I want to remove excess white space everywhere. No hits on 'aero' or 'glass' in addon search and couldn't find anything about it in the options pages.

Did I just 'upgrade' to something that doesn't even support older addons like Stylish?

 

[Sunimar]

Ooops got this post posted twice..............

 

[Sunimar]

Hey Guyss, I've been trying to get a 100% or FULL-TRANSPARENCY effect on FF for quite sometime but no LUCK with that so far...
FF version i tried so far 3.5.11,3.5.15 (4.0 Beta1 was a disappointment for me so i didn't even tried on that)...now trying to get this on 3.6.13 & the older version 3.5.1
What add-ons & styles i have used:

Stylish 1.0.11, Glasser 3.5.2, New Glasser 2.2.0.3.7 (got this today but haven't tried yet)
Styles used:
Black Background
Every Webpage
Firefox Aero
Glass About Pages
Glass every single part of FF 3.5
Googles International Style
Google search Glass style
Sevenforums Black RC
Firefox-Glass

But to my disappointment after all the hardwork & brain racking all i get is Dialogs box or Menu Dropbox glassed but not the main FF or even Google webpage (as per this thread or other threads by Yup-Yup).........

So can some tell me what are the do's & don'ts as this seems to be still yet to be over for me!!! ..................