Aeroglass and firefox

[maicol07]

Hi,

how can I set aeroglass transparency to Firefox 61 with userChrome?

I don't want all the browser transparent, but only the header (before URL bar).

Thanks

 

EDIT: WORKING SOLUTION!!

The only working solution for me is @UCyborg one! You need to follow this: (open it in a new tab)

And then compile the manifest file by pressing the play button in Resource Hacker and save the file.

Last step: Download BulkFileChanger, extract it in a folder and then open it. Add firefox.exe file and press the clock icon. Edit creation date to the firefox_original.exe one (that file will be created in Firefox folder when you edit the manifest) and the modfication date to a greater one (example if firefox_original.exe date is 2018-05-24 and the firefox.exe date is 2018-08-12 you can leave it as it is).

IMPORTANT NOTE: You need to do this everytime Firefox get updated as firefox_exe will be modified.

Edited August 12, 2018 by maicol07
Added working solution

[bigmuscle]

try this in "c:\Users\xxx\AppData\Roaming\Mozilla\Firefox\Profiles\yyy.default\chrome\userChrome.css"

 

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

#main-window { background-color: transparent !important; -moz-appearance: -moz-win-glass !important; }

#toolbar-menubar, #titlebar, #tabs-toolbar {
	-moz-appearance: none !important;
	background-color: transparent !important;
}

 

[Aethelflaed]

Alternatively, type about:config in the address bar, click 'I accept the risk', and then set the following value to 'false':

browser.tabs.drawInTitlebar

That should fix it.

 

[maicol07]

14 hours ago, bigmuscle said:

try this in "c:\Users\xxx\AppData\Roaming\Mozilla\Firefox\Profiles\yyy.default\chrome\userChrome.css"

 

/*
 * Do not remove the @namespace line -- it's required for correct functioning
 */
@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul"); /* set default namespace to XUL */

#main-window { background-color: transparent !important; -moz-appearance: -moz-win-glass !important; }

#toolbar-menubar, #titlebar, #tabs-toolbar {
	-moz-appearance: none !important;
	background-color: transparent !important;
}

 

The code don'y work...

12 hours ago, Aethelflaed said:

Alternatively, type about:config in the address bar, click 'I accept the risk', and then set the following value to 'false':

browser.tabs.drawInTitlebar

That should fix it.

 

This add the title bar that I don't want. I want only the menu bar and the tabs.

[bigmuscle]

maicol07: the code works but it seems that Firefox 61 is totally buggy. It sometimes does not load userChrome.css at all, sometimes works, sometimes does not show window at all. And the frame is corrupted (e.g. no borders, no resize...) even without any userChrome.css. Previous version has no problem. (you can also try it without that line @namespace ...)

Also you can try this code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

#main-window {
	background: none !important;
	-moz-appearance: -moz-win-glass !important;
}

.titlebar-button {
	background-color: transparent !important;
	transition: background-color 0.2s ease;
	height: 25px;
}
.titlebar-button > .toolbarbutton-icon {
	list-style-image: none;
}
.titlebar-button:hover {
	background-color: rgba(117, 167, 215, 0.6) !important;
}
#titlebar-close:hover {
	background-color: rgba(255, 220, 220, 0.4) !important;
}
#titlebar-close:hover > .toolbarbutton-icon {
	list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important;
}

 

Edited July 24, 2018 by bigmuscle

[ZiyaadMuhammad]

1 hour ago, maicol07 said:

The code don'y work...

This add the title bar that I don't want. I want only the menu bar and the tabs.

try this one again
https://gist.github.com/LionWrathz/0b0a8fc438522c53e2d32a94e556797a

[UCyborg]

None of the solutions here give the desired result, caption buttons remain broken when hovered over with the mouse. Removing Windows 10 GUID from the executable's manifest as described here works well.

Edited July 24, 2018 by UCyborg

[Aethelflaed]

Huh? I can't remember ever having had problems with the caption buttons after disabling the 'tabs in titlebar' feature. Do you have a screenshot?

[ZiyaadMuhammad]

11 hours ago, bigmuscle said:

maicol07: the code works but it seems that Firefox 61 is totally buggy. It sometimes does not load userChrome.css at all, sometimes works, sometimes does not show window at all. And the frame is corrupted (e.g. no borders, no resize...) even without any userChrome.css. Previous version has no problem. (you can also try it without that line @namespace ...)

 you said Firefox 61 is totally buggy. It sometimes does not load userChrome.css but i dont see anything wrong again maybe the css code you are running is old but for me everything is works perfect!

3 hours ago, UCyborg said:

None of the solutions here give the desired result, caption buttons remain broken when hovered over with the mouse. Removing Windows 10 GUID from the executable's manifest as described here works well.

there is nothing wrong about Userchome.css. by adding some css CODE  transparency,  all works perfectly. this guy maicol07  posted about transparency tab, not about the caption button, and  concerning the  caption button, there is nothing wrong about Firefox and aeroglas. the real problem only  comes from  theme atlas. if you enables the browser.tabs.drawInTitlebar, it will work perfectly fine. i think the creator of themes atlas needs to fix this, but only for the browser, only he can re position the caption button without the browser.tabs.drawInTitlebar . even if you use themes atlas, you will see some bugs in it but, if you enables browser.tabs.drawInTitlebar it will work. only he can solve it, otherwise, it doesn't matter for me personally. i don't like themes atlas. i like it normal default.

 

Edited July 24, 2018 by ZiyaadMuhammad

[UCyborg]

2 hours ago, Aethelflaed said:

I can't remember ever having had problems with the caption buttons after disabling the 'tabs in titlebar' feature.

Pardon, I was only referring to userChrome.css solutions, there's no problem with caption buttons when disabling tabs in title bar, but some of us don't want to disable that.

10 minutes ago, ZiyaadMuhammad said:

about the caption button there is nothing wrong about Firefox

Yes, it is. It forces its own image over the button for the hover-over effect.

13 minutes ago, ZiyaadMuhammad said:

the real problem come from by theme atlas by itself

No, it comes from Firefox. It's clearly visible even when using stock Windows 10 theme atlas. Anyone who doesn't see that needs to get their sight checked. In addition, if you change title bar height, when you hover over the buttons, the hover-over image will be misaligned, which shouldn't ever happen.

26 minutes ago, ZiyaadMuhammad said:

if you enabled the browser.tabs.drawInTitlebar it will work very well

Precisely because atlas image from the theme will be used without slapping anything else on top. But removing Windows 10 GUID so it thinks it runs on older Windows version will have the same effect of applying system theme settings without having to disable browser.tabs.drawInTitlebar. Keeping this enabled reclaims useful vertical space.

Maybe in-built style editor found among developer tools could be used to pinpoint the problem. If anyone is interested poking into that mess...

[SkyySX]

11 hours ago, UCyborg said:

Pardon, I was only referring to userChrome.css solutions, there's no problem with caption buttons when disabling tabs in title bar, but some of us don't want to disable that.

Yes, it is. It forces its own image over the button for the hover-over effect.

No, it comes from Firefox. It's clearly visible even when using stock Windows 10 theme atlas. Anyone who doesn't see that needs to get their sight checked. In addition, if you change title bar height, when you hover over the buttons, the hover-over image will be misaligned, which shouldn't ever happen.

Precisely because atlas image from the theme will be used without slapping anything else on top. But removing Windows 10 GUID so it thinks it runs on older Windows version will have the same effect of applying system theme settings without having to disable browser.tabs.drawInTitlebar. Keeping this enabled reclaims useful vertical space.

Maybe in-built style editor found among developer tools could be used to pinpoint the problem. If anyone is interested poking into that mess...

Yeah I think removing the Windows 10 GUID from the .exe is the cleanest method if slightly annoying to be redone every update but Firefox doesn't get updated that fast.

[Zod]

I use the whole userchrome script from https://github.com/Aris-t2/CustomCSSforFx

Then I go into and try to figure it out and tweak settings.

[maicol07]

I've tried all the codes but none worked...

[djmagnifique]

On 7/24/2018 at 9:57 AM, bigmuscle said:

maicol07: the code works but it seems that Firefox 61 is totally buggy. It sometimes does not load userChrome.css at all, sometimes works, sometimes does not show window at all. And the frame is corrupted (e.g. no borders, no resize...) even without any userChrome.css. Previous version has no problem. (you can also try it without that line @namespace ...)

Also you can try this code:

@namespace url("http://www.mozilla.org/keymaster/gatekeeper/there.is.only.xul");
@namespace html url("http://www.w3.org/1999/xhtml");

#main-window {
	background: none !important;
	-moz-appearance: -moz-win-glass !important;
}

.titlebar-button {
	background-color: transparent !important;
	transition: background-color 0.2s ease;
	height: 25px;
}
.titlebar-button > .toolbarbutton-icon {
	list-style-image: none;
}
.titlebar-button:hover {
	background-color: rgba(117, 167, 215, 0.6) !important;
}
#titlebar-close:hover {
	background-color: rgba(255, 220, 220, 0.4) !important;
}
#titlebar-close:hover > .toolbarbutton-icon {
	list-style-image: url("chrome://browser/skin/caption-buttons.svg#close-white") !important;
}

 

This code worked for me in Firefox 61, thankyou.  I do have one question though, is it possible to alter this so that inactives tabs are not transparent and if so what would I need to change?

Cheers.

[SkyySX]

21 hours ago, djmagnifique said:

This code worked for me in Firefox 61, thankyou.  I do have one question though, is it possible to alter this so that inactives tabs are not transparent and if so what would I need to change?

Cheers.

The best place to ask is here: https://www.reddit.com/r/FirefoxCSS/