Changelog for Fox 2 the Moon

Anything about browser themes, both Full Themes and Lightweight Themes (personas) should go here.

Moderators: satrow, Lootyhoof, Andrew Gilbertson

Ernst
Moongazer
Moongazer
Posts: 8
Joined: Sat, 07 Apr 2018, 14:13

Changelog for Fox 2 the Moon

Unread postby Ernst » Fri, 08 Jun 2018, 23:09

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?

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1059
Joined: Thu, 09 Feb 2012, 23:35
Location: United Kingdom

Re: Changelog for Fox 2 the Moon

Unread postby Lootyhoof » Fri, 08 Jun 2018, 23:41

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?

Ernst
Moongazer
Moongazer
Posts: 8
Joined: Sat, 07 Apr 2018, 14:13

Re: Changelog for Fox 2 the Moon

Unread postby Ernst » Sat, 09 Jun 2018, 08:16

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?


Nice. Thanks.

I was on 4.0.5.

This is 4.0.5:

Image

And this 4.1.0:

Image

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


And if it uncomment it, this is what happens:

Image

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


And it's back to the way it looked in 4.0.5.

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 Sat, 09 Jun 2018, 08:27, edited 2 times in total.

User avatar
Lootyhoof
Themeist
Themeist
Posts: 1059
Joined: Thu, 09 Feb 2012, 23:35
Location: United Kingdom

Re: Changelog for Fox 2 the Moon

Unread postby Lootyhoof » Sat, 09 Jun 2018, 13:13

Ernst wrote:It seems that now default background color is blue.


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:

Code: Select all

background: url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;

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:

Code: Select all

#TabsToolbar {
  background: var(--toolbar-custom-color) !important;
}

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

:root {
  --toolbar-custom-color: yellow !important;
}


This would produce something like the following (on the default styling at least):

Image

I may add a few more of those in future to make things even more customisable.

Ernst
Moongazer
Moongazer
Posts: 8
Joined: Sat, 07 Apr 2018, 14:13

Re: Changelog for Fox 2 the Moon

Unread postby Ernst » Sat, 09 Jun 2018, 15:03

Lootyhoof wrote:
Ernst wrote:It seems that now default background color is blue.


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:

Code: Select all

background: url("chrome://browser/skin/tabbrowser/tabbrowser-tabs-bkgnd.png") repeat-x;

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.

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.

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:

Code: Select all

#TabsToolbar {
  background: var(--toolbar-custom-color) !important;
}

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

:root {
  --toolbar-custom-color: yellow !important;
}


This would produce something like the following (on the default styling at least):

Image

I may add a few more of those in future to make things even more customisable.

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.
Last edited by Ernst on Sat, 09 Jun 2018, 15:08, edited 2 times in total.


Return to “Themes”

Who is online

Users browsing this forum: No registered users and 2 guests