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

I used the program "Resource Hacker" to modify Firefox's manifest.  I essentially removed the line that says it will run on Windows 10, which is the only way I know of to make transparency work on the browser windows.  It worked, but the windows have this strange white tint to them.  The tint seems to be rendered as an actual layer [as seen in the last screenshot] so surely there is a way to remove it?  I'm not sure if it would be under "about:config" or if it's something I have to use Resource Hacker for again. [NOTE: The same white layer also applies to Thunderbird, which obviously is built on the same code.]

Any help is much appreciated.

image.png.9c3902af9e392a3de7af8d31124fe26d.png

 

image.png.3ccad6a92eee8421999d98f5df5a7bcc.png

Share this post


Link to post
Share on other sites

https://github.com/Aris-t2/CustomCSSforFx

If userchrome.css tweaking in Firefox is something that you already know how to do, then go ahead and download this pre made custom stylesheet and then go through it and enable the features that you want to use in there. 

But if you don't know anything about it, then this basically contains css instructions for Firefox what you want your user interface to look and feel. 

I admit that this is like taking out the nukes after mosquito bite you, and this white "curtain" could be removed with much lighter userchrome.css built just for this purpose alone. 

But sadly I don't know anything how to code these things, but I know that among the many things like moving tab bar under the bookmarks toolbar (where it belongs). There are many other things that you can change with the css file. 

You just need to open that file in notepad or similar app, and remove //** or something like that in front of the option that you want to enable. Then if you want to restore that option back, just add those /* things back and after restart it will be back to way it was. 

 

I'm 100% sure that this option to remove that "curtain" from the top part is in the code, as i have also done so. It is just that I don't remember what the option was called in that css file. So you need to do some digging. 

 

Now if you haven't used userchrome.css in Firefox yet, then you have to first go to about:config (type it into the address bar) and enable this one in there 

toolkit.legacyUserProfileCustomizations.stylesheets

Then type about:support in the address bar and open the profile folder from there. 

Inside the profile folder create folder called chrome and place the content from aris github inside there. 

 

Sorry for making this so long and rambling type thing, but let me assure you that this will unlock pretty much same functionality in the ui customization, as the old classic theme restorer add on in the pre Firefox 57 was able to give. 

Biggest annoyances in this thing is, that from time to time Mozilla changes some part of Firefox or change the internal names of the parts of the browser ui.

So from time to time you will need to get back to the that github page and download new zip and go through it again. 

However that part that you initially wanted to modify is such a small part of the ui, that it might work fine for years. 

For my needs, i usually need to get back there and download new version of that pack, after like 2-3 new "big" version number updates. But lately from version 78 or something, all the way to the current 82, i haven't needed to touch it at all. 

Maybe Mozilla finally has stopped breaking things that aren't broken, or there is going to be something bigger in the next few updates or something. 

Firefox-profile-path-in-about-support-page.png

Edited by atomi
Added picture of the right place to get in the profile folder

Share this post


Link to post
Share on other sites

Or just skip most of my rambling and read the much more clearly written how to from the github page, then the only thing to do is you to find the right option to enable in that css file. 

https://www.reddit.com/r/FirefoxCSS/

Also there is lots of people that can help you with Firefox customization too, and i can promise that they know much more about this than me. 

They surely would know that straight up css code that you would have to use, if you don't want to dig dee into this big css file. 

This however does not negatively affect the performance of Firefox, if you use this big file for singular purpose. Or if you only have small css file with that one change alone. 

Share this post


Link to post
Share on other sites

Thank you for the GitHub page, it was extremely useful in changing some other settings I was looking for.  I was unable to find the setting to remove the white layer, despite coming across two that looked relevant:

/css/toolbars/menubar_fog_hidden.css

/css/toolbars/general_toolbar_colors_aeroglass_windows10_glass8.css

I'm not really sure if there are other flags that need to be changed as well or if I am just missing something.

  • Like 1

Share this post


Link to post
Share on other sites

I could hop on the computer and see, if I can find anything relevant that I changed on there. 

One thing is for sure and that is that i did remove the fog effect from my Firefox, as that thing makes everything in my current theme basically unreadable. 

Share this post


Link to post
Share on other sites

in /* other tab settings ***************************************************************************/

@import "./css/tabs/tab_titles_remove_blur.css"; /**/

also in /* MENUBAR **** i have both @import "./css/toolbars/menubar_fog_hidden.css"; /**/ and @import "./css/toolbars/menubar_color.css"; /**/ enabled

 

in this quick glance over the file, i couldn't find more than those options that seemed to be relevant to your request.

Share this post


Link to post
Share on other sites

couldn't find the right setting in that sea of options, but i find this code that some people have used to remove that fog thing from their firefox ui.

#navigator-toolbox {
  background-color: black !important;
}

/* MAIN TOOLBAR AND BOOKMARKS TOOLBAR MODIFICATIONS */
/* Transparent toolbars */
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > #nav-bar, 
#main-window[lwthemetextcolor="bright"] #navigator-toolbox > #PersonalToolbar {
  background-color: transparent !important;
  background-image: none !important;
}
/* Remove top border of main toolbar */
#nav-bar {
  box-shadow: none !important;
  border-top: none !important;
}

copy that into my_userChrome.css file, that you have to create inside the chrome folder.

just remember to set windows to show file types too, so you don't accidentally end up with my_userChrome.css.txt or anything like that.

also go in the userchrome.css file and in the bottom there should be /* @import "./my_userChrome.css"; /**/ where you need to remove that /* part too.

or firefox will not know to check inside that my_userChrome.css file, and that fog remains.

Share this post


Link to post
Share on other sites

Unfortunately, the remove blur, fog hidden, and menubar color flags don't seem to make the fog go away.  I also tried loading in the css code you posted above, but the fog remained and this happened also:

image.thumb.png.287ab973455df01927211133b9cc4c82.png

Share this post


Link to post
Share on other sites

Sadly i really can't help much more, other than going to Google and try to find a solution. As i understand the actual css coding about the same amount as my left boot. 

But i strongly recommend that you give that r/Firefoxcss subreddit that i linked above, a try and ask them for a help. 

Just remember that if you have set the css pack from aris like you wanted to. Then do everything else inside the new my_userchrome.css, so that you don't accidentally lose anything you have done so far in the css file from aris. 

Share this post


Link to post
Share on other sites

Okay, thank you so much for all of the help.  I'll give this a shot soon and see if I can get things working.

  • Like 1

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

  • Recently Browsing   0 members

    No registered users viewing this page.

×
×
  • Create New...