Extending the user interface

phillipadsmith edited this page Jul 26, 2011 · 6 revisions
Clone this wiki locally


Grease Monkey Scripts

A collection of Greasemonkey scripts to enhance the Bricolage UI.

delete-all.user.js: Add a “Select All” link to the Delete column of the Story Profile

briccatsearch.user.js: Search-as-you-type interface for “New Story” or “New Media” category lists.

Skinning Bricolage

Skin Bricolage using CSS stylesheets.

User Stylesheets

How to skin Bricolage with user stylesheets

All modern browsers support “user stylesheets,” stylesheets written by the browser user, in addition to “author stylesheets,” which are written by the site developer. Since these user stylesheets apply to every page a user visits, there needs to be a way to limit their scope.

Bricolage 1.10.2 now includes an ID on the BODY tag, which you can use when writing these custom stylesheets to override parts of the UI. This ID is in the form “bricolage_VHOST_SERVER_NAME”, where VHOST_SERVER_NAME is the value defined in bricolage.conf.

Unless VHOST_SERVER_NAME has been changed, it defaults to “bricolage__default_”.

To use this to write a user stylesheet, prepend all style rules with “#bricolage__default_”, e.g.

#bricolage__default_ td.workflowTab { background-color: #ff0000 ! important; }

— Marshall Roch

Skin Firefox

How to use the Firefox extension “Stylish” to skin Bricolage

A problem we have here is making test servers look different than prod. This isn’t really a full solution, but, if you use Firefox…
…there’s an extension called Stylish https://addons.mozilla.org/firefox/2108/ that lets you add per-site user stylesheets, like a CSS version of Greasemonkey if you know that. This means that you can override the CSS for any particular sites you want.

After you’ve installed the extension and restarted Firefox, login to Bricolage. In the lower-right corner will be a new icon with a paintbrush, click on that. Select ‘Create style for miles…’ and you’ll be at a dialog to add a style. You can fiddle with the Sites button or whatever, or simply try pasting this into the text box:

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document domain(test.example.com), domain(stage.example.com) {

  td.workflowTab { background-color: #ff0000 ! important; }


I added two sites to show how you can apply your styles to multiple sites.

The part you’ll want to change is the style itself. td.workflowTab just happens to be the class for the “tab” at the top of each page, and #ff0000 sets it to bright red. The ‘! important’ part tells Firefox to use your “user” style, since otherwise the “author” stylesheet takes precedence. You can look at the stylesheets (for example with the ‘Web Developer’ extension) to figure out how to “skin” Bricolage how you want it.

— Scott Lanning