Open Quicksaver opened 11 years ago
Updated border colors
CSS was severely outdated.
updated background color of the add-on bar when placed in the corner
Updated for a few changes to the add-on bar in the corner.
Updated for Puzzle Toolbars 2, if you need to test before that version is released, you can use the latest beta available at https://addons.mozilla.org/firefox/addon/the-puzzle-piece/versions/.
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: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:#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:#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":#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:#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-
):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: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 correspondinglist-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.