Compatibility with (complete) Themes

[Quicksaver]

Background Themes

Background themes (formerly known as Personas) should be already fully supported, with the background image continuing in the background of the toolbars when they appear. If this isn't the case then please open a new issue about it.

Complete Themes Compatibility

For appearance issues, such as odd colors in the toolbars or in the small placeholder below the tabs while using some themes, please before anything, try to contact the developer of the theme and ask them to add support for these features. You can point them to the For Theme Developers section below in this thread.

You must understand that it's impossible for me to try out every single theme out there and change the add-on to support it, especially when I'm not familiar with these themes and don't know how they should actually look like. It's a much easier task to do on the theme's side.

If you can't contact the theme developer, or there's a more serious problem, please let me know by opening a new issue or posting a new comment in this thread and I'll see what I can do to ensure compatibility with any specific theme.

For Theme Developers

Adding compatibility for this add-on should be very straightforward. The toolbars themselves and everything in them should already be styled properly for the most part. Note that TheFOB adds a few special padding settings for these, because of the rounded margins, so make sure that, if you change any of these, no elements inside the toolbars become inaccessible.

The two most important elements that you'll probably want to tweak, both children of the #navigator-toolbox node, are the following:

#theFoxOnlyBetter-slimChrome-slimmer

This is the little "placeholder" below the tabs of where the toolbars used to be. Ideally, this would be the same color as the top of the nav-bar / bottom of the (active) tab, so they seem continuous.

#theFoxOnlyBetter-slimChrome-container

This is the hovering container where the toolbars are placed. If you style the toolbars directly then all you'll probably have to worry about in this are the borders, and maybe shadows if you use them.

You can customize each style individually if you need to, via the following selectors:

#navigator-toolbox[slimStyle="australis"] #theFoxOnlyBetter-slimChrome-container { /* australis style */ }
#navigator-toolbox[slimStyle="compact"] #theFoxOnlyBetter-slimChrome-container { /* compact style */ }
#navigator-toolbox[slimStyle="round"] #theFoxOnlyBetter-slimChrome-container { /* spacious style */ }
#navigator-toolbox[slimStyle="full"] #theFoxOnlyBetter-slimChrome-container { /* full width style */ }

The Australis style presents a special case in the borders. The container mentioned above will have transparent 1px borders, and these must be kept like this, otherwise you will run into a few visual issues during animations! You can use the selector #navigator-toolbox:not([slimStyle="australis"]) to make sure you don't override this anywhere in your code.

To change the color of the actual borders when the Australis style is applied, target the #theFoxOnlyBetter-slimChrome-toolbars-bottom node as described below, as well as the curved borders:

@namespace svg url(http://www.w3.org/2000/svg);

#navigator-toolbox[slimStyle="australis"] #theFoxOnlyBetter-slimChrome-container:-moz-any([hover],:not([onlyURLBar])) #theFoxOnlyBetter-slimChrome-toolbars-bottom {
  border-bottom: 1px solid ThreeDShadow;
}

svg|*#theFoxOnlyBetter-slimChrome-svg-before-path,
svg|*#theFoxOnlyBetter-slimChrome-svg-after-path {
   stroke: ThreeDShadow;
}

Note that the curved borders are SVG elements, so don't forget to declare its namespace at the top of your stylesheet!

The SVG borders are inside their own containers, separate from the toolbars. So the backgrounds of those also need to be set to the same backgrounds as the toolbars to make it seem like they're all the same element. Something like the following should do it:

#theFoxOnlyBetter-slimChrome-toolbars-before,
#theFoxOnlyBetter-slimChrome-toolbars-after {
  background: -moz-dialog;
}

Pay special care if you're using gradients, images or anything else other than a solid color for the toolbars background, to make sure that it is continuous with these borders; if you are, you're probably better off setting the background of the #theFoxOnlyBetter-slimChrome-toolbars element instead of styling the background of each toolbar node individually. For example, to apply personas I use an adapted piece of the following code (very simplified from the actual code!):

#theFoxOnlyBetter-slimChrome-toolbars,
#theFoxOnlyBetter-slimChrome-toolbars-before,
#theFoxOnlyBetter-slimChrome-toolbars-after {
  background-image: url(some-persona-image);
}

Common issues

• With some themes, the background of toolbars/mini bar won't extend to the lower border, as in the screenshot below. This is almost always because of a lack of top and bottom margins in either the location bar itself or the buttons next to it, which causes the navigation bar to unexpectedly "semi-collapse" a little to its minimum height. Usually this can be fixed by either increasing the minimum height of the navigation bar, or by applying bigger margins/min-heights to the buttons.

If you need any help with this please let me know and I'll do what I can to ensure the add-on remains compatible with your theme. I also encourage you to subscribe to notifications from this thread, so that you know of when I make significant changes to the add-on that would affect theme compatibility.

[Quicksaver]

Added reference to Australis style borders.

[Quicksaver]

Updated Australis style reference code.

[Quicksaver]

Added info about customizing the different styles individually.

[nam3less]

Can i change the border color at the sides of the bar in the australis skin? The change i made using a userstyle and stylish applies for the bottom of the bar, not for the sides (as shown in the picture). How do i address those?

[Quicksaver]

You need the separate svg sheet like I explained above. Also, make sure that when styling the Australis style, you set the bottom border in the same way that I also explained above, otherwise you will run into some issues with some of the animations.

[nam3less]

Now i created a second userstyle, like you explained and changed the border-color there. But it stays like in the screenshot i posted before, although i used the !important tag, which fixed the problems i had with the bottom border.

[Quicksaver]

What exactly are the contents of the sheet you created?

[nam3less]

Stylesheet for making then bottom border black:

#navigator-toolbox[slimStyle="australis"] #theFoxOnlyBetter-slimChrome-container:-moz-any([hover],:not([onlyURLBar])) #theFoxOnlyBetter-slimChrome-toolbars-bottom { border-bottom: 1px solid ThreeDShadow; border-color:black !important; }

Stylesheet for the side-borders:

@namespace svg url(http://www.w3.org/2000/svg);

#theFoxOnlyBetter-slimChrome-svg-before-path, #theFoxOnlyBetter-slimChrome-svg-after-path { stroke: ThreeDShadow; border-color: black !important; }

I wanted to make the TT DeepDark compatible to the Australis style of your addon myself to learn a bit more about CSS and styling with Stylish. I'm not the person who created/ maintained the theme, so i'm sorry that you have to help a newbie. ^^

[Quicksaver]

Hmm, if you mean FT DeepDark, then its developer is already working on it, so you should expect a compatible update soon. Try its latest beta, version 11beta16 I think.

Also, the svg style doesn't take a "border-color" declaration, you change its "stroke" property. Something like "stroke: black !important;" should be fine.

[Quicksaver]

Added info about styling the background of the rounded corners (version 1.1.4)

[Quicksaver]

Added common issue: background of toolbars not covering the toolbars all the way down.

[Quicksaver]

Changed information about how to style the Australis-style curved borders.