Introducing the ThemeRoller Firefox Developer Bookmarklet

Posted by Scott on 02/12/2009

We’ve been hinting at it for a while… and it’s finally ready: the ThemeRoller Firefox Developer Bookmarklet! The bookmarklet lets you pull ThemeRoller into any page on the web and roll a custom theme for any markup that uses the jQuery UI CSS Framework.

So how does it work?

Just go to the ThemeRoller Firefox Developer Bookmarklet page and drag the bookmarklet link into your Firefox toolbar. Then you can open the bookmarklet on any page you’d like and style away! The entire feature set of ThemeRoller is included, meaning you can view and download themes from the gallery or design your own, and download the Theme once you’re done.

ThemeRoller DeveloperBookmarklet

Usage Details

A number of features were built into this bookmarklet to make it behave like a desktop application panel.

Fixed Positioning

The bookmarklet uses fixed positioning within your window, so it will actually stick to your browser chrome rather than a location on your page. This is particularly useful when working with long scrolling pages and allows the tool to feel a lot like a native panel in a design application like Photoshop.

Dragging and Resizing

Just like a panel within a desktop application, the bookmarklet allows for dragging and resizing to your needs. It will retain its positioning information when you close it as well.

Full History Support Built-in!

Just like the full ThemeRoller application, the bookmarklet tracks all of your design changes in your browser history, letting you use your back and forward buttons to undo and redo design edits as you work! If you back up to a change and decide you’d like to continue editing from there, simply refresh the page and relaunch the bookmarklet - it will load the design into the ThemeRoller and you can continue designing.

Download Themes Instantly

Unlike ThemeRoller, the bookmarklet’s download button will direct you straight to a zip file containing your theme. We did this assuming that if you’re using the bookmarklet, you’re probably already styling existing markup and likely just need a theme.

Note Due to security restrictions in Firefox, the bookmarklet will not work on local “file://” URLs. Your files will need to direct your browser to a page on a webserver in order for it to work. If you’re on a mac and trying to work locally, we’d highly recommend using MAMP to set up a quick web server, it’s free and easy.

Try it out!

The best way to demo this bookmarklet is to open it on a page that uses the jQuery UI CSS Framework. Here are a couple of pages to try:

jQuery Finder (fantastic use of the framework by Nicolas Rudas):

ThemeRoller DeveloperBookmarklet

Demo for Styling Buttons and Toolbars with the jQuery UI CSS Framework

Enjoy!

We’ve been working hard to make ThemeRoller and the jQuery UI CSS Framework a useful tool for all. We’d love to hear what you think!

Comments

<div id="commentNumber1" class="commentEntry">

<p>Fantastic work guys!! This really brings the convenience of themeroller and jquery-ui to a whole new level.&nbsp; I can only imagine where all this will be in another 12 months.&nbsp; Keep up the great work!


</div>
	<p class="posted"><a href="#commentNumber1">Comment</a> by

Rob Monie on 02/13  at  04:52 AM

<div id="commentNumber2" class="commentEntry">

<p>This sounds like something I’ll use.&nbsp; Typically I edit all of my own CSS, but it’s worth trading control/convenience for jQuery’s coolness.&nbsp; Hopefully this solves the problem of having to download/upload a dozen or so themes to get the look you want.


</div>
	<p class="posted"><a href="#commentNumber2">Comment</a> by

Ferodynamics on 02/13  at  12:54 PM

<div id="commentNumber3" class="commentEntry">

<p>I’m writing a post about this on our blog! May I?

Awsome! 

</div>
	<p class="posted"><a href="#commentNumber3">Comment</a> by

Gergely Marton on 02/13  at  12:56 PM

<div id="commentNumber4" class="commentEntry fg">

<p>Thanks for the nice feedback - enjoy!

@Gergely: of course, post away :) 

</div>
	<p class="posted"><a href="#commentNumber4">Comment</a> by

Scott (Filament) on 02/13  at  01:08 PM

<div id="commentNumber5" class="commentEntry">

<p>Great work guys on the css framework, themeroller, and everything. I was amazed by how easy it was to include the css framework on the Finder plugin. At first I thought that I would have to do extra coding for getting it to work, but at the end it saved me lots of time (and lines).

Thanks for everything, and thanks for the link as well 

</div>
	<p class="posted"><a href="#commentNumber5">Comment</a> by

Nicolas Rudas on 02/14  at  07:29 AM

<div id="commentNumber6" class="commentEntry fg">

<p>@Nicolas Rudas: That’s great to hear that it was so easy to implement the framework in an existing codebase! We’d love to hear any feedback on how it can be improved as well, so definitely let us know if you have ideas. The Google jquery-ui-dev group would be a good place to discuss them.

You’re welcome for the link - I assume you saw the contest too? Nice entry ;-)
http://www.filamentgroup.com/lab/contest_for_coolest_use_of_the_jquery_css_framework_win_a_free_pass_to_sxsw/ 

</div>
	<p class="posted"><a href="#commentNumber6">Comment</a> by

Scott (Filament) on 02/16  at  12:27 PM

<div id="commentNumber7" class="commentEntry">

<p>@Scott: I’ve been meaning to reply to the discussion you opened at the google group but I’m a bit short of time these days. Perhaps over the weekend I’ll post something about the whole process.

Yeah I saw the contest but as I don’t live in the US I found it unnecessary to participate - on the other hand I could join in and in case of winning you could ‘donate’ the prize to a jQuery UI contributor :)
Loved your entries tho, pretty cool stuff you did there.

Cheers 

</div>
	<p class="posted"><a href="#commentNumber7">Comment</a> by

Nicolas Rudas on 02/18  at  05:17 AM

<div id="commentNumber8" class="commentEntry">

<p>Wow, this bookmarklet looks pretty cool.


</div>
	<p class="posted"><a href="#commentNumber8">Comment</a> by

cheat your way thin on 05/04  at  03:06 PM

<div id="commentNumber9" class="commentEntry">

<p>Yes, seems to be so cool ! But I can’t make it work : impossible to drag it to the firefox toolbar. If I click on the link, it’s ok on the jquery page, but does not work on my own page (which uses jquery UI of course). An idea about what can be wrong ?


</div>
	<p class="posted"><a href="#commentNumber9">Comment</a> by

Etoila Matelas on 07/23  at  10:32 AM

<div id="commentNumber10" class="commentEntry fg">

<p>@Etoila: If you can’t drag the bookmark, did you try right-clicking it to bookmark it?


</div>
	<p class="posted"><a href="#commentNumber10">Comment</a> by

Scott (Filament) on 07/23  at  10:34 AM

<div id="commentNumber11" class="commentEntry">

<p>Wow, this bookmarklet looks pretty cool :)


</div>
	<p class="posted"><a href="#commentNumber11">Comment</a> by

مسلسلات on 08/15  at  07:02 PM

<div id="commentNumber12" class="commentEntry">

<p>It´s a good tool but I´m having problems with the extension of this complement in my Firefox.

Thanks. 

</div>
	<p class="posted"><a href="#commentNumber12">Comment</a> by

Clinica de Estetica on 08/26  at  08:26 AM

<div id="commentNumber13" class="commentEntry">

<p>weird, I have no problems in FF 3.5.2 or in IE8.


</div>
	<p class="posted"><a href="#commentNumber13">Comment</a> by

Cazare on 09/09  at  07:02 AM

<div id="commentNumber14" class="commentEntry">

<p>This jQuery finder is much fine because previous version had much bugs then this ..

Good approach 

</div>
	<p class="posted"><a href="#commentNumber14">Comment</a> by

Konferens Arlanda on 11/25  at  01:51 AM

<div id="commentNumber15" class="commentEntry">

<p>JQuery finder Themeroller amazing because the coding behind this totally java based , every time we will have to remove bugs and need to use new SW .


</div>
	<p class="posted"><a href="#commentNumber15">Comment</a> by

design your own clothes online on 11/25  at  07:47 AM

<div id="commentNumber16" class="commentEntry">

<p>Great information i was searching out , i want to bookmark it .

Thanks 

</div>
	<p class="posted"><a href="#commentNumber16">Comment</a> by

new hidden object games on 12/06  at  04:41 PM

<div id="commentNumber17" class="commentEntry">

<p>Any tutorial for JQuery CSS Framework . I need alot .


</div>
	<p class="posted"><a href="#commentNumber17">Comment</a> by

Moscow hotels on 12/07  at  05:48 PM

<div id="commentNumber18" class="commentEntry">

<p>Massive approach JQuery Framework available in Dreamweaver ? any platform


</div>
	<p class="posted"><a href="#commentNumber18">Comment</a> by

drip irrigation for greenhouses on 12/25  at  03:24 PM

<div id="commentNumber19" class="commentEntry">

<p>Great site thanks alot <a href="http://www.planningjobsboard.co.uk" rel="nofollow">planning jobs</a>


</div>
	<p class="posted"><a href="#commentNumber19">Comment</a> by

planning jobs on 07/12  at  03:10 PM

<div id="commentNumber20" class="commentEntry">

<p>Hopefully this solves the problem of having to download/upload a dozen or so themes to get the look you want.


</div>
	<p class="posted"><a href="#commentNumber20">Comment</a> by

save fuel on 08/16  at  10:53 AM

<div id="commentNumber21" class="commentEntry">

<p>Superbe article, vraiment simple et utile. Bravo pour sa mise en ligne. C’est ce genre d’information que le public (et moi en particulier) recherche.


</div>
	<p class="posted"><a href="#commentNumber21">Comment</a> by

Pariuri Sportive on 08/21  at  11:20 AM

<div id="commentNumber22" class="commentEntry">

<p>At first I thought that I would have to do extra coding for getting it to work, but at the end it saved me lots of time


</div>
	<p class="posted"><a href="#commentNumber22">Comment</a> by

basur on 11/02  at  04:07 AM

<div id="commentNumber23" class="commentEntry">

<p>thank you At first I thought that I would have to do extra coding for getting it to work, but at the end it saved me lots of time


</div>
	<p class="posted"><a href="#commentNumber23">Comment</a> by

porn on 11/20  at  07:41 PM

<div id="commentNumber24" class="commentEntry">

<p>i like these site. i was looking for someting like these

interesting job keep on the good job 

</div>
	<p class="posted"><a href="#commentNumber24">Comment</a> by

pariuri sportive on 03/31  at  03:34 AM

<div id="commentNumber25" class="commentEntry">

<p>I’m not able to make themeroller dev tool to work on any jquery website. I added it inside bookmarks (FF4) but when i try to use it, it appears correctly but it doesn’t change the sytle on the fly. Does it require a particular configuration of jquery sites in order to work?


</div>
	<p class="posted"><a href="#commentNumber25">Comment</a> by

Andrea on 04/09  at  02:34 PM

<div id="commentNumber26" class="commentEntry">

<p>I’m having the same problem Andrea is. I can get the tool to show up, but selecting a style will not make that style apply to the page I’m on. It doesn’t even work on the Tool’s page where it says “click to give it a try”. Firefox 3.6.16


</div>
	<p class="posted"><a href="#commentNumber26">Comment</a> by

Misty Fowler on 04/28  at  03:28 PM

<div id="commentNumber27" class="commentEntry">

<p>Good job on the site..it looks good now.


</div>
	<p class="posted"><a href="#commentNumber27">Comment</a> by

backlinks on 05/06  at  01:23 PM

<div id="commentNumber28" class="commentEntry">

<p>good points made here


</div>
	<p class="posted"><a href="#commentNumber28">Comment</a> by

handmade beaded jewelry on 05/14  at  05:07 PM

<div id="commentNumber29" class="commentEntry">

<p>The current JS breaks in Firefox.&nbsp;

To fix it:

1. Download the developertools.js file mentioned in the bookmarklet

2. Wrap the values of all href attribute selectors in single quotes, e.g. [href=foo] becomes [href=’foo’]

3. Host the modified developertools.js somewhere.

4. Update your bookmarklet to point to your modified developertools.js

5. Dance!!!

Good luck!

e. 

</div>
	<p class="posted"><a href="#commentNumber29">Comment</a> by

encoded on 05/18  at  04:42 PM

<div id="commentNumber30" class="commentEntry">

<p>Looks good though I must admit jsQuery framework can be tough for me to get to grips with at times.


</div>
	<p class="posted"><a href="#commentNumber30">Comment</a> by

Jon on 05/31  at  11:20 AM

<div id="commentNumber31" class="commentEntry">

<p>Can this be used with Dreamweaver too?


</div>
	<p class="posted"><a href="#commentNumber31">Comment</a> by

darwin smith on 06/02  at  04:22 PM

<div id="commentNumber32" class="commentEntry">

<p>Broke for me too. Is there any place to report the bug other than this thread. I can’t seem to find a suitable place so started here.


</div>
	<p class="posted"><a href="#commentNumber32">Comment</a> by

dugsohn on 06/07  at  07:44 AM

<div id="commentNumber33" class="commentEntry">

<p>I can’t get this to work in Firefox 3.6 either


</div>
	<p class="posted"><a href="#commentNumber33">Comment</a> by

Kyle Leon on 07/01  at  04:46 AM