Compatibility with (complete) Themes

Position of the Corner Puzzle Bar

Placement of the Add-on Bar on the bottom corners of the browser window should be accurate with most themes, if it is not please open a new issue about it.

Background Themes

Background themes (formerly known as Personas) should be already fully supported, with the background image continuing in the background of the Bottom, Corner and Top Puzzle Bars. If this isn't the case then please open a new issue about it.

The Lateral Puzzle Bar should keep its default style when using personas, as there isn't a vertical image to use for its background, and many of the personas set almost random colors as their "default background color", so those are not always reliable.

Complete Themes Compatibility

For appearance issues, such as odd colors in the Puzzle Bars while using some themes, or weird button alignments, or anything similar, 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 toolbars 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

Styling the Puzzle Toolbars should be very simple. You can access every puzzle bar at once through the selector .puzzleBars-bar. All the toolbars follow a common style found in /chrome/skin/(common or OS)/puzzleBars.css:

/* Windows */
.puzzleBars-bar {
    -moz-appearance: none;
    min-height: 21px;
    border-top-style: none;
    border-bottom-style: none;
    background-image: linear-gradient(rgba(0,0,0,.15) 1px, rgba(255,255,255,.15) 1px);
    background-size: 100% 2px;
    background-repeat: no-repeat;
}

/* Mac OS X */
.puzzleBars-bar { min-height: 18px; }

/* Linux */
.puzzleBars-bar { min-height: 20px; }

Each individual toolbar node has an id following the same pattern: #puzzleBars-PLACEMENT-bar. Current placements available are bottom, corner, lateral, top and urlbar. Their specific styles can be found at /chrome/skin/(common or OS)/PLACEMENT.css.

Please try not to touch any of the following properties anywhere in the puzzle toolbars, as they are used for the correct placement of the toolbars in UI, and many of them are dynamically set in javascript: position, overflow, padding, width, margin, top, left, right and bottom.

#puzzleBars-bottom-bar is almost a direct copy of the native add-on bar from previous versions of firefox. In Windows and Linux, it should already fit accordingly into the #browser-bottombox node, in addition to the following:

/* Windows */
#puzzleBars-bottom-bar { padding-top: 1px; }

/* Mac OS X */
#puzzleBars-bottom-bar { min-height: 25px; }
#puzzleBars-bottom-bar:not(:-moz-lwtheme) {
    -moz-appearance: none;
    background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%);
    border-top: 1px solid #888;
}

/* Linux */
#puzzleBars-bottom-bar {
    box-shadow: 0 1px 0 rgba(0,0,0,.15) inset;
    min-height: 28px;
}

#puzzleBars-top-bar is pretty much a normal toolbar in the top chrome, and so it should already be styled properly as any other toolbar in #navigator-toolbox, in addition to the following:

/* Windows */
#puzzleBars-top-bar {
    padding-top: 1px;
    background-image: none;
}

/* MAC OS X */
#puzzleBars-top-bar { min-height: 24px; }

/* Linux */
#puzzleBars-top-bar { min-height: 26px; }

#puzzleBars-lateral-bar is a bit special. By default, it doesn't follow the top or bottom chrome's typical colors, but rather it mimics the colors of the sidebars, which will open right next to it. It also tries to not show its border when the sidebar is open, so that it seems like both the toolbar and the sidebar are all part of the same "piece of UI":

/* Windows */
#puzzleBars-lateral-bar {
    min-width: 24px;
    background-color: -moz-dialog;
    background-size: 2px 100%;
    background-repeat: no-repeat;
}

#puzzleBars-lateral-bar:not([movetoright]) {
    box-shadow: inset -1px 0 0 ThreeDShadow, inset 0 1px 0 ThreeDHighlight;
}
#puzzleBars-lateral-bar[movetoright] {
    box-shadow: inset 1px 0 0 ThreeDShadow, inset 0 1px 0 ThreeDHighlight;
}

@media  (-moz-os-version: windows-vista),
    (-moz-os-version: windows-win7),
    (-moz-os-version: windows-win8) {

    @media (-moz-windows-default-theme) {
        #puzzleBars-lateral-bar { background-color: #EEF3FA; }

        #puzzleBars-lateral-bar:not([movetoright]):-moz-any(:not([sidebarOpen]),[autohide]),
        window[customizing="true"] #puzzleBars-lateral-bar:not([movetoright]) {
            box-shadow: inset -1px 0 0 #aabccf, inset 0 1px 0 ThreeDHighlight;
        }
        #puzzleBars-lateral-bar[movetoright]:-moz-any(:not([sidebarOpen]),[autohide]),
        window[customizing="true"] #puzzleBars-lateral-bar[movetoright] {
            box-shadow: inset 1px 0 0 #aabccf, inset 0 1px 0 ThreeDHighlight;
        }
        window:not([customizing="true"]) #puzzleBars-lateral-bar[sidebarOpen]:not([autohide]) {
            box-shadow: inset 0 1px 0 ThreeDHighlight;
        }
    }
}

/* Mac OS X */
#puzzleBars-lateral-bar {
    -moz-appearance: none;
    background-color: #e2e7ed;
    min-width: 28px;
}

#puzzleBars-lateral-bar {
    background-color: #e2e7ed;
}
#puzzleBars-lateral-bar:-moz-window-inactive {
    background-color: #e8e8e8;
}

#puzzleBars-lateral-bar:not([movetoright]):-moz-any(:not([sidebarOpen]),[autohide]),
window[customizing="true"] #puzzleBars-lateral-bar:not([movetoright]) {
    box-shadow: inset -1px 0 0 #ababab;
}
#puzzleBars-lateral-bar[movetoright]:-moz-any(:not([sidebarOpen]),[autohide]),
window[customizing="true"] #puzzleBars-lateral-bar[movetoright] {
    box-shadow: inset 1px 0 0 #ababab;
}

/* Linux */
#puzzleBars-lateral-bar {
    min-width: 26px;
    background-color: -moz-dialog;
}
#puzzleBars-lateral-bar:not([movetoright]):-moz-any(:not([sidebarOpen]),[autohide]),
window[customizing="true"] #puzzleBars-lateral-bar:not([movetoright]) {
    box-shadow: inset -1px 0 0 ThreeDShadow;
}
#puzzleBars-lateral-bar[movetoright]:-moz-any(:not([sidebarOpen]),[autohide]),
window[customizing="true"] #puzzleBars-lateral-bar[movetoright] {
    box-shadow: inset 1px 0 0 ThreeDShadow;
}

#puzzleBars-corner-bar is also a little special. You shouldn't style the toolbar directly, but rather its container #puzzleBars-corner-container. It is still a child of #browser-bottombox, so it will inherit most of its style already, in addition to the following:

/* Windows */
window:not([customizing="true"]) #puzzleBars-corner-container {
    border-radius: 8px 8px 2px 2px;
    border-top: 2px solid rgba(0,0,0,0.15);
    border-right: 2px solid rgba(0,0,0,0.15);
    border-left: 2px solid rgba(0,0,0,0.15);
    -moz-border-top-colors: rgba(0,0,0,0.15) rgba(255,255,255,0.15);
    -moz-border-right-colors: rgba(0,0,0,0.15) rgba(255,255,255,0.15);
    -moz-border-left-colors: rgba(0,0,0,0.15) rgba(255,255,255,0.15);
}

/* Mac OS X */
window:not([customizing="true"]) #puzzleBars-corner-container {
border-radius: 8px 8px 0 0;
    border-top: 1px solid #888;
    border-right: 1px solid #888;
    border-left: 1px solid #888;
    -moz-border-top-colors: #888;
    -moz-border-right-colors: #888;
    -moz-border-left-colors: #888;
    padding-top: 1px;
}
window:not([customizing="true"]) #puzzleBars-corner-container:not(:-moz-lwtheme) {
    background: url(chrome://browser/skin/Toolbar-background-noise.png) hsl(0,0%,83%);
}

/* Linux */
window:not([customizing="true"]) #puzzleBars-corner-container {
    border-radius: 8px 8px 2px 2px;
    border-top: 2px solid threedshadow;
    border-right: 2px solid threedshadow;
    border-left: 2px solid threedshadow;
    -moz-border-top-colors: threedshadow threedhighlight;
    -moz-border-right-colors: threedshadow threedhighlight;
    -moz-border-left-colors: threedshadow threedhighlight;
}

#puzzleBars-urlbar-bar is one you probably won't need to worry about. It shouldn't have the appearance of a toolbar, just show its icons as if they were part of the location bar itself, so for the most part you shouldn't really need to do anything to it.

All the puzzle bars padding is mostly to ensure their Puzzle Pieces look like they're a part of the toolbar itself. If you do change any paddings, make sure this is still true.

Also, verify your styles in customize mode, especially for the corner and urlbar toolbars as they are moved into special nodes to be customized, so they appear a little differently there (the following also applies for -urlbar-):

#puzzleBars-corner-customize-stack {
    border: 1px solid rgba(0,0,0,.3);
    box-shadow: 0 0 4px rgba(0,0,0,.3);
    background: rgba(250, 250, 250, 0.8);
}
#puzzleBars-corner-customize-stack > label {
    margin: 2px 15px;
    color: #777;
}

There are special effects for a hovered toolbar button in the puzzle bars. These are based on the original add-on bar effects. There are lighter variations for dark personas, marked with the [brighttext] selector, which you can probably use in your theme if you need as well. They are all set with !important tags, so if you need to change these in your theme, make sure the changes are actually applied:

.puzzleBars-bar toolbarbutton:not([disabled]):hover,
.puzzleBars-bar toolbarbutton[open],
.puzzleBars-bar toolbarbutton > .toolbarbutton-menubutton-button:not([disabled]):hover {
    background-position: left, left, right !important;
    background-size: auto, 1px 100%, 1px 100% !important;
    background-repeat: no-repeat !important;
    background-image:   linear-gradient(to top, transparent, rgba(0,0,0,.15)),
                linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%),
                    linear-gradient(to top, transparent, rgba(0,0,0,.15) 30%) !important;
}
.puzzleBars-bar toolbarbutton:not([disabled]):hover image,
.puzzleBars-bar toolbarbutton[open] image,
.puzzleBars-bar toolbarbutton > .toolbarbutton-menubutton-button:not([disabled]):hover image {
    border-color: transparent !important;
    box-shadow: none !important;
    background: none !important;
}
.puzzleBars-bar[brighttext="true"] toolbarbutton:not([disabled]):hover,
.puzzleBars-bar[brighttext="true"] toolbarbutton[open],
.puzzleBars-bar[brighttext="true"] toolbarbutton > .toolbarbutton-menubutton-button:not([disabled]):hover {
    background-image:   linear-gradient(to top, transparent, rgba(255,255,255,.45)),
                linear-gradient(to top, transparent, rgba(255,255,255,.45) 30%),
                    linear-gradient(to top, transparent, rgba(255,255,255,.45) 30%) !important;
}

There are also variations of these effects for the lateral and top toolbars, just search for "mouse over" in their CSS files for more details.

Each toolbar has an associated Puzzle Piece. For the most part you probably won't need to touch them. But if you do, you can access all of them through the .PuzzlePiece selector, they also follow a similar pattern for their ids as the toolbars above #puzzleBars-PLACEMENT-PP and they are styled in the same stylesheets as the toolbars. If for example you need to change their color, you will need to provide a new icon file and change the corresponding list-style-image and -moz-image-region properties.

The add-on also restores separators, spaces and flexible spaces as customizable items, even usable in the menu panel. If you need to modify them for your theme, there are a lot of special customizations made so they work correctly everywhere, which are too many to just post here but you can find them in /chrome/skin/(common or OS)/specialWidgets.css. They also need a few special tweaks for the lateral and the urlbar toolbars, which you can find by searching for the "special widgets" section in their stylesheets.

If you need any help or extra info, or if there's something that you need me to do on the add-on's side to make it work with your theme, please let me know and I'll see what I can do.

Quicksaver / Puzzle-Toolbars

Compatibility with (complete) Themes #2