REQUEST A DEMO

Styling Dovetail Mobile Agent – without modifying the app itself

I’ve started using Dovetail Mobile Agent for my day-to-day case activities. Its simplicity and ease of use really pleases me.

Even though it was targeted as an app for mobile devices, it works just as well using normal browsers on desktops & laptops.

However, its currently styled for mobile devices, with their limited form factor. We may get to the point of creating different stylesheets for different browsers, but we’re just not there yet. But I’m impatient, so last night I decided to take matters into my own hands. The default styles look good on a mobile device, but could be better on a desktop.

Adding my own styles with Stylish

My browser of choice is Firefox. (I am digging Google Chrome, but its current lack of plug-ins keeps it from being my default browser).

One of the extensions available for Firefox is called Stylish.

Stylish is a Firefox, Thunderbird, Flock, SeaMonkey, Mozilla Suite, and Songbird extension that allows easy management of user styles. User styles empower your browsing experience by letting you fix ugly sites, customize the look of your browser or mail client, or just have fun.

Using Stylish, I can style Dovetail Mobile Agent so that it looks much better on a desktop browser.

Here’s how it looks on a Mobile Browser:

home_iphone

 

and with its default styles on a normal browser:

home_original

 

and after a little bit of my own styling:

home_stylish

 

UPDATE: I’ve uploaded the actual Stylish CSS code here: http://blogs.dovetailsoftware.com/forums/thread/11477.aspx

 

Adding my own JavaScript with Greasemonkey

One of the things that CSS doesn’t currently allow for is alternating row styles. For example, I wanted every other row of a list of items to be a different color. This is often referred to as Zebra Striping.  (CSS3 allows for this, but its browser support is pretty limited at the moment).

However, this is pretty easy using jQuery (my JavaScript library of choice). So how do I inject my own JavaScript into someone else’s application? Another Firefox extension to the rescue. This time, it’s GreaseMonkey.

Greasemonkey is a Firefox extension that allows you to customize the way webpages look and function.  Hundreds of scripts are already available for free. And if you’re the tinkerer sort, you can also write your own.

I’m a tinkerer, so away I go.

First, back in Stylish, I define a new style, for the even rows of a table:

.even{
  background-color: #eee !important;
}

Then I use some jQuery code to set this style on every other row of case listings, case history, and search results:

$(‘#listings .case-listing:even’).addClass(‘even’);
$(‘.history:even’).addClass(‘even’);
$(‘.search-result-title:even’).addClass(‘even’);
$(‘.search-results-summary:even’).addClass(‘even’);

Getting jQuery itself into play.

Dovetail Mobile doesn’t currently include the jQuery library, so I have to somehow get this library loaded. Luckily, someone’s already done this, so I just followed the example:

// Add jQuery
    var GM_JQ = document.createElement(‘script’);
    GM_JQ.src = ‘http://ajax.googleapis.com/ajax/libs/jquery/1.2.6/jquery.min.js’;
    GM_JQ.type = ‘text/javascript’;
    document.getElementsByTagName(‘head’)[0].appendChild(GM_JQ);

// Check if jQuery’s loaded
    function GM_wait() {
        if(typeof unsafeWindow.jQuery == ‘undefined’) { window.setTimeout(GM_wait,100); }
        else { $ = unsafeWindow.jQuery; letsJQuery(); }
    }

    GM_wait();

// All your GM code must be inside this function
    function letsJQuery() {
             $(‘#listings .case-listing:even’).addClass(‘even’);
             $(‘.history:even’).addClass(‘even’); 
             $(‘.search-result-title:even’).addClass(‘even’);
             $(‘.search-results-summary:even’).addClass(‘even’);
    }

Notice that I’m actually loading the jQuery library from Google’s AJAX Library. Thanks Google!

The original layout:

open_cases_original

Now with the rows shown in alternating colors:

open_cases_striped

 

Firebug

When trying to figure out the specifics of a web application, you can simply View Source, or you can use a better tool. Firebug is my tool of choice here. Yep, another Fir
efox extension.

Firebug integrates with Firefox to put a wealth of web development tools at your fingertips while you browse. You can edit, debug, and monitor CSS, HTML, and JavaScript live in any web page.

Firebug made it super easy to inspect, edit, and tweak the HTML and CSS. If you’re a web developer, I would definitely recommend checking out Firebug. Firebug made it super easy to inspect the application, so that I could then make changes using Stylish & GreaseMonkey.

 

 

Its amazing what one can do with powerful (and free!) tools.

Rock on.