Hi.
I'm a Fox 2 the Moon user.
But I have a lot of customization done for the theme in userChrome.css.
Today the theme has been updated and I'm seeing #TabsToolbar with the default Fox 2 the Moon look instead of my regular custom image in userChrome.css.
Looking at the theme file itself, I've seen that there are some new version27 and version28 folders and I guess I should dig into them to find what happened, but it would be nice to have a change log of the theme so I can quickly figure out where to look.
It there such a thing?
Changelog for Fox 2 the Moon
Moderators: FranklinDM, Lootyhoof
Re: Changelog for Fox 2 the Moon
This would be here:
https://github.com/Lootyhoof/fox2themoo ... ANGELOG.md
There weren't any changes to the #TabsToolbar for the 4.1.0 release, though...were you on a much earlier version before?
https://github.com/Lootyhoof/fox2themoo ... ANGELOG.md
There weren't any changes to the #TabsToolbar for the 4.1.0 release, though...were you on a much earlier version before?
Re: Changelog for Fox 2 the Moon
Nice. Thanks.Lootyhoof wrote:This would be here:
https://github.com/Lootyhoof/fox2themoo ... ANGELOG.md
There weren't any changes to the #TabsToolbar for the 4.1.0 release, though...were you on a much earlier version before?
I was on 4.0.5.
This is 4.0.5:
And this 4.1.0:
Culprit is indeed #TabsToolbar. I had this code commented out in userChrome.css:
Code: Select all
#TabsToolbar {
-moz-appearance: none !important;
background: url("tabbrowser-tabs-bkgnd.png") repeat-x !important;
border-top: none !important;
}
"tabbrowser-tabs-bkgnd.png" is 1x75 px image which stretches out. Top pixel is white to give a border effect and the rest is transparent. This transparency seems to be the issue. Before it showed the regular ThreeDFace color. Now it's blue.
Regards.
EDIT:
Added this to the above code:
Code: Select all
background-color: ThreeDFace !important;
It seems that now default background color is blue. Probably the line "-moz-appearance: none !important;" has something to do with it.
Last edited by Ernst on 2018-06-09, 08:27, edited 2 times in total.
Re: Changelog for Fox 2 the Moon
The toolbar turns blue there because you're likely referencing a file that doesn't exist - if you want to use that background image from the theme you should instead be using:Ernst wrote:It seems that now default background color is blue.
Code: Select all
background: url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
If you want a cleaner implementation, I might recommend using this styling instead:
Code: Select all
#TabsToolbar {
background: var(--toolbar-custom-color) !important;
}
Code: Select all
:root {
--toolbar-custom-color: yellow !important;
}
I may add a few more of those in future to make things even more customisable.
Re: Changelog for Fox 2 the Moon
Nope. I have tabbrowser-tabs-bkgnd.png in my chrome folder. It turns blue because that file is transparent (except for the top 1 px I use to make the border). I have loads of other files there to change icons and stuff.Lootyhoof wrote:The toolbar turns blue there because you're likely referencing a file that doesn't exist - if you want to use that background image from the theme you should instead be using:Ernst wrote:It seems that now default background color is blue.
Code: Select all
background: url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;
What probably happened is that my 4.0.5 skin was edited. Looking at your skin change log dates, this might have happened when I made the whole Firefox-Pale Moon transition. Back then I was still editing the skin instead of doing everything in userChrome.css.
That's why I had the code in my userChrome.css commented. It explains also that the background appeared only when the skin was updated.
I am indeed on Windows 10. That variable is a nice trick. This is a much cleaner solution and makes possible to get rid of the file. My tabbrowser-tabs-bkgnd.png adds a 1 px white border to the toolbar as well, but I'm sure I can add that through css.Lootyhoof wrote:As such, it turns transparent. I take it you're on Windows 10? If so, the entire #main-window has a background-color to it, to correctly style the titlebar, so it inherits that styling.
If you want a cleaner implementation, I might recommend using this styling instead:
This variable controls the toolbar colour for all the toolbars in the main UI, so if you ever wanted to change that to something else (for example, yellow), you could (in addition to the above) do:Code: Select all
#TabsToolbar { background: var(--toolbar-custom-color) !important; }
This would produce something like the following (on the default styling at least):Code: Select all
:root { --toolbar-custom-color: yellow !important; }
I may add a few more of those in future to make things even more customisable.
Last edited by Ernst on 2018-06-09, 15:08, edited 2 times in total.