Jump to content
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble
Strawberry Orange Banana Lime Leaf Slate Sky Blueberry Grape Watermelon Chocolate Marble

MSFN is made available via donations, subscriptions and advertising revenue. The use of ad-blocking software hurts the site. Please disable ad-blocking software or set an exception for MSFN. Alternatively, register and become a site sponsor/subscriber and ads will be disabled automatically. 


Recommended Posts

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 by maicol07
Added working solution

Share this post


Link to post
Share on other sites

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;
}

 

Share this post


Link to post
Share on other sites

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.

 

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites

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 by bigmuscle
  • Like 1

Share this post


Link to post
Share on other sites
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

Share this post


Link to post
Share on other sites

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 by UCyborg

Share this post


Link to post
Share on other sites

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?

Share this post


Link to post
Share on other sites
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 by ZiyaadMuhammad

Share this post


Link to post
Share on other sites
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...

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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.

Share this post


Link to post
Share on other sites
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/

  • Like 1

Share this post


Link to post
Share on other sites

Join the conversation

You can post now and register later. If you have an account, sign in now to post with your account.

Guest
Reply to this topic...

×   Pasted as rich text.   Restore formatting

  Only 75 emoji are allowed.

×   Your link has been automatically embedded.   Display as a link instead

×   Your previous content has been restored.   Clear editor

×   You cannot paste images directly. Upload or insert images from URL.


  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...