Tag Archives: GreaseMonkey

Inpecting elements in the Web Devloper Plugin

Changing the sort order on a select dropdown

In a previous post how can i use my local css on a remote website I mentioned GreaseMonkey and it’s magical powers for doing things from your browser on remote websites. I’m going doing the same thing once again this time I want to change the sort order on a drop down within the new Control Panel for Blacknight that I use for my websites.

On the dashboard screen of the control panel you have a list of your websites in a dropdown letting you access them rather quickly. Why they aren’t sorted alphabetically I’m not entirely sure ( though I’ll possibly look into it a bit later on as we’ve a number of requests coming in for this change. It’s third party software  we’re using though so we’re limited ultimately as to what we can change. ) So lets get cracking and change the dropdown sort order with jquery.

For now though I’m going to create a small little grease monkey script to change the sort order on the drop down. You can see below the order is a bit random.

Random sort order on the domains list.

Creating the following little GreaseMonkey script that only fires when we’re on https://cp.blacknight.com. (Code below)

// ==UserScript==
// @name        CP Sort
// @namespace   https://cp.blacknight.com
// @include     https://cp.blacknight.com/*
// @version     1
// ==/UserScript==

var my_options = $("#sel_websites_select option");

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0
})

$("#sel_websites_select").empty().append( my_options );

Where did I get the ID for the dropdown?

The Firefox webmaster tools plugin has an element inspector … running it on the page and hovering over the dropdown we see the following:

Inpecting elements in the Web Devloper Plugin

Running GreaseMonkey now and we end up with our drop down looking like

Sorted drop downl list

That’s kinda shiny even if I do say so myself. I keep on thinking of new uses for GreaseMonkey everyday.

We’ll want to make another tweak to our script and grab the selected value or it’ll end up with the last item selected ( at least in Firefox not sure how other browsers handle it)

Our final greasemonkey script ends up as

// ==UserScript==
// @name        CP Sort
// @namespace   https://cp.blacknight.com
// @include     https://cp.blacknight.com/*
// @version     1
// ==/UserScript==

var selected = $("#sel_websites_select").val();
var my_options = $("#sel_websites_select option");

my_options.sort(function(a,b) {
    if (a.text > b.text) return 1;
    else if (a.text < b.text) return -1;
    else return 0
})

$("#sel_websites_select").empty().append( my_options );
var selected = $("#sel_websites_select").val(selected);

Just so you’re aware this is a completely unsupported thing and just me hacking about with things. Now to see if I can’t simply add these tweaks to the main Control Panel templates. So everyone has this option by default when they login.

Use Local CSS On A Live Site

How can I use my local css on a remote website? (without ftp)

Use Local CSS On A Live Site

Ever had a case of wanting to update CSS on a live site but don’t want to go making a local copy of the site for testing. You also don’t want to break anything on the live site that the boss will notice. So to make a local copy you’ll need to pull out the database .. move all the files .. update the config files .. maybe update various database records and so on and really you only want to tweak the CSS? Well we all know you can use the likes of Firebug (If you don’t have it already and you’re a web developer / designer then you really should) to do this and edit the live CSS and you’ll see the changes. You can do other shiny via the WebDeveloper tools and reload Linked Style sheets. You refresh the page however and you’ve lost your changes (unless I’m missing something). Also I’ve a lot of tweaking I want to do so it’s not just a case of wanting to edit one setting or two.

So that’s the situation now what can we do about it?

Well for one I’m going to assume you’re running some sort of local webserver. So we want to do two things.

  1. When we load the live website we want to nuke all the CSS in there.
  2. Two we want to load our own local CSS file.

On my real version I’ve gone and I’ve copied everything from the remote site’s CSS (multiple files) and put it into my local webserver in the document root as mylocalcopy.css

For testing purposes here I’ve just dumped the following into the file.

body { padding:40px; color:#FF0000; }

I can see this as http://localhost:8888/mylocalcopy.css

I can now go using some live edit stuff with Firebug and replace the remote CSS file with my local one if I want to. I don’t want to do this every time I load the page / pages of the site though.

Enter the GreaseMonkey.

GreaseMonkey lets you setup little snippets of Javascript and have them run when you want them to (for a certain domain or page). I want mine to run when I hit my website. I can disable it easily enough with GreaseMonkey with two clicks when I don’t want it running.

So download and install GreaseMonkey.

For me on the top right of my Firefox window I’ve got the little Monkey drop down icon.

Grease Monkey Icon

Go to your website of choice. In my case it’s this one.

Click on the drop down arrow of GreaseMonkey and you’ve got options.

Create a new GreaseMonkey script

Click on New User Script. Then go ahead and enter your details the main one you’ll be concerned here with is the name space. In my case it’s http://forbairt.com/ so that’s everything on forbairt.com.

Create A new GreaseMonkey script

Clicking on ok and you’ll be prompted to open a new script in an editor of your choice.

Your GreaseMonkey Script

It should be filled out with something similar to

// ==UserScript==
// @name        Use Local CSS - Forbairt
// @namespace   http://forbairt.com/
// @description Use my local CSS file for the remote forbairt.com website
// @include     http://forbairt.com/*
// @version     1
// ==/UserScript==

I’ve gone ahead and entered in the following and saved the file.

for (var i = document.styleSheets.length - 1; i >= 0; i--) {
    document.styleSheets[i].disabled = true;
}

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://localhost:8888/mylocalcopy.css';
document.getElementsByTagName("head")[0].appendChild(link);

The first part goes ahead and disables all style sheets

for (var i = document.styleSheets.length - 1; i >= 0; i--) {
    document.styleSheets[i].disabled = true;
}

The second part creates a link to your locally stored stylesheet. (replace the link.href = ” with the appropriate file / location for your CSS file)

var link = document.createElement('link');
link.rel = 'stylesheet';
link.type = 'text/css';
link.href = 'http://localhost:8888/mylocalcopy.css';
document.getElementsByTagName("head")[0].appendChild(link);

Save your file and in a new tab open up your website. You’ll hopefully see your website as normal.

Forbairt.com as normal

Click on the GreaseMonkey dropdown and click on your script name. Reload your website.

Enable your grease monkey script

If all has gone according to plan you should now be seeing a pretty much unstyled site with red text. (which is all that’s in my local css file at the moment) You’re good to go copy all the CSS from your remote site that you want (Remember any references to images will need to be fully qualified or just grab them and store them locally). Reload the page and it should keep on nuking the linked stylesheets and inline stylesheets. I’ve intentionally not removed any inline css from any of the pages. It really shouldn’t be there and if it is then you’ll have to go manually edit your pages anyways.

Unstyled website with red text as per local stylesheet

Now all that’s left is happy editing :)

If you’ve got the web developer tools installed on Firefox you can now live edit your local CSS file and see the live changes not to mention saving the file locally. Everytime you reload the page or jump between pages on your site you’ll be seeing your changes. You’re not touching any live data and hopefully no one will scream at you as next to nothing can go wrong.

Use web developer tools to live edit your CSS

Live edit your CSS with the web dev tools

For me I’m happy to use my code editor to hack away at my CSS. Once I’m happy I can replace the live CSS. No need to create a staging area for the site when all I want to do is tweak CSS and not impact on any end user.

Hope this mini tutorial is of help I know it could be a big time saver for me.

EDIT: I’ve made a few minor tweaks / bug fixes in there.