Skip to content

Instantly share code, notes, and snippets.

Created February 1, 2012 08:17
What would you like to do?
Working bugfix for "ThemeRoller Bookmarklet not working"

This is a bugfix for #7195 (ThemeRoller Bookmarklet not working) – jQuery UI

To use it, put the contents of the patched bookmarklet in the bookmarklet instead of what you got from the original bookmarklet. To do this, right-click on the bookmarklet, select Properties, and replace the "Location" field with the contents of the patched bookmarklet link above.

Look at the git history of the gist history (not available in githubs user interface it seems) to see the diffs for the bookmarklet and developertool.js(.php?)

But basically I just implemented the patch referenced by the bug report and made it easy for others to use.

Beware, though, that apparently the source for ThemeRoller is currently not available. So a real upstream bugfix may not be easy.

if (!window.jquitr) {
var jquitr = {};
jquitr.trString = '';
jquitr.s1 = document.createElement('script');
jquitr.s2 = document.createElement('script');
jquitr.s1.setAttribute('src', '');
jquitr.s2.setAttribute('src', '');
//once jq and ui are loaded...
jquitr.s1.onload = function () {
jquitr.s2.onload = function () {
(function ($) {
//add dev tool to page
jquitr.addThemeRoller = function(){
if($('#inline_themeroller').size() > 0){
else {
$('<div id="inline_themeroller" style="display: none; position: fixed; background: #111; top: 25px; right: 25px; padding: 22px 0 15px 4px;width: 245px;height:400px; -webkit-border-radius: 6px; -moz-border-radius: 6px; z-index: 9999999;">'+
'<a href="#" class="closeTR" style="font-family: Verdana, sans-serif; font-size: 10px; display: block; position: absolute; right: 0; top: 2px; text-align: right; background: url( 0 2px no-repeat; width: 16px;height: 16px; color: #fff; text-decoration: none;" title="Close ThemeRoller"></a>'+
'<iframe name="trApp" src="" style="background: transparent; overflow: auto; width: 240px;height:100%;border: 0;" frameborder="0" ></iframe>'+
start: function(){
$('<div id="div_cover" />').appendTo('#inline_themeroller').css({width: $(this).width(), height: $(this).height(), position: 'absolute', top: 0, left:0});
stop: function(){
opacity: 0.6,
cursor: 'move'
start: function(){
stop: function(){
handles: 's'
background: 'url( 50% 50% no-repeat',
border: 'none',
height: '14px',
dipslay: 'block',
cursor: 'resize-s',
bottom: '-3px'
.css('cursor', 'move')
//close dev tool
jquitr.closeThemeRoller = function () {
//get current url hash
jquitr.getHash = function () {
var currSrc = window.location.hash;
if (currSrc.indexOf('#') > -1) {
currSrc = currSrc.split('#')[1];
return currSrc;
//recursive reload call
jquitr.reloadCSS = function(){
var currSrc = jquitr.getHash(), cssLink;
if(jquitr.trString !== currSrc && currSrc !== ''){
jquitr.trString = currSrc;
cssLink = '<link href="'+ currSrc +'" type="text/css" rel="Stylesheet" />';
//works for both 1.6 final and early rc's
if( $("link[href*='parseTheme.css.php'], link[href='ui.theme.css']").size() > 0){
$("link[href*='parseTheme.css.php']:last, link[href='ui.theme.css']:last").eq(0).after(cssLink);
} else {
if( $("link[href*='parseTheme.css.php']").size() > 3){
window.setTimeout(jquitr.reloadCSS, 1000);
// Actually add the roller
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment