Tweaking the SiteManager UI in Firefox

Disclaimer

Just to stress at the outset: this is an unsupported tweak for SiteManager. It works on my setup using Firefox 2.0.0.11 with a monitor resolution of 1280 x 1024 pixels, and I’m using the HTMLArea WYSIWYG editor. If you want to use another text editor then you’d need to work out the CSS tweaks yourself. If you do then feel free to post them in the comments (or as a new blog post).

Gareth J M Saunders
University of St Andrews

What I did

While I have genuinely enjoyed using SiteManager for … well, managing our site there have been a few issues with the SiteManager UI that have niggled a little.

1. HEIGHT
   On larger monitors the edit area for screens/tabs is too small, and quite restrictive
2. HOVER COLOUR ON TABLE ROWS
   With so many table rows it would be useful to have some kind of feedback as to which row I’m currently hovering over
3. ALIGNMENT
   I find the centre-alignment of data in the Approve screen difficult to read, it would be better left-aligned

I collated these issues, and more, and sent them to T4 HQ.

Whether they make their way into SiteManager 5.3+ only time (or a developer willing to spill the beans!) will tell but I wanted to see if any of these issues could be addressed/fixed now. So armed with only Firefox, a carefully selected Add-on and a handful of freshly baked CSS I set about tweaking the UI.

Firefox add-on

According to the add-on’s project page the Stylish add-on for Firefox

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.

That sounds just what we want.

Stylish can be downloaded and installed via the addons.mozilla.org website.

Stylish and easy

Using Stylish is very easy. Once installed the options window can be accessed either via Tools > Add-ons or by right-clicking the new Stylish icon on the browser’s status bar. You create and manage custom styles via the options window.

New styles are created by clicking the “Write…” button, and each style can either be global (i.e. applied to every website you visit) or restricted to particular URLs. That’s what we want.

Restrict custom CSS to SiteManager only

Here’s how you do it:

1. Within the Add Style window click the Insert button and select Site Rules…
2. You now have three radio-button options: Exactly, Starts with, In domain. I use Starts with
3. Now enter the URL of your SiteManager installation, e.g. http://138.251.66.169:8080/terminalfour/
4. Now click Add
5. Click OK

What happens is a special attribute is created that tells Stylish which site to restrict your code to, e.g.

@-moz-document url-prefix(http://138.251.66.169:8080/terminalfour/) {
… your code here …
}

All your code then sits between the braces { … your code here … }.

What to change

I used another couple of Firefox add-ons (Web Developer and Firebug) to work out exactly which HTML elements needed to be targetted to overwrite SiteManager’s default settings.

It’s worth noting at this point that with Stylish you MUST use the CSS !important declaration after every single CSS rule you write. This way Stylish can overrule page-level code.

I discovered that in order to tweak the SiteManager UI I needed remarkably few rules.

Alignment

Fortunately, presumably for backwards compatibility, the Approve table cell alignment is done at HTML level, i.e. <td align=”center”>. This can easily be overruled with CSS:

td[align="center"] {text-align: left !important;}

In other words, any table data tag <td> that has an attribute of align=”centre” do the following.

Hover effect on table rows

I noticed that most of the zebra-striped table rows have either a class, id or bgcolor attribute. We can take advantage of this, e.g.

tr[class]:hover, tr[id]:hover, tr[bgcolor]:hover {background-color: #eabbbc !important;}

This rule says that if a table row tag has any of the stated [attributes] then change the background colour if hovered over; that’s the CSS :hover pseudo-class being used. The colour used there is a light red, in the family of the standard T4 red.

Hover effect on Site Structure

This works for most of the screens apart from the Site Structure. For this we need to target another HTML element:

#innerTable tr:hover {background-color: #950004 !important; color: #fff !important;}

#innerTable tr:hover td, #innerTable tr:hover td a {color: #fff !important;}

The first rule controls the background-colour change. The second rule controls the text colour, for both ordinary text and links.

Height

To increase the height of the various screens and tabbed areas within SiteManager (I’m using the HTMLArea text editor) I found that this rule worked a treat. The measurements here work for my setup, with a 1280 x 1024 pixel monitor:

iframe, #Tab1, #Tab2, #Tab3, #Tab4, #Tab5, #Tab6, #Tab7, #Tab8, #Tab9 {
height: 450px !important;
overflow: auto !important;
}

To increase the size of the input window for editing content, I increased the size of the #contentBox and #contentForm elements, like this:

#contentForm { height: 520px !important;}
#contentBox { height: 460px !important; overflow: visible !important ;}

Media Library

The only other tweak that I’ve made is to the media library. The default the category you are currently viewing is highlighted with a pale blue. I’ve changed this to the T4 red and made the highlight larger:

td.sCLName a.current {
background-color: #950004 !important;
color: #fff !important;
padding: 2px !important ;
}

UPDATE (09 June 2009)
The above may not work in newer versions of SiteManager, if so try the following:

a.nodeSel {
background-color: #950004 !important;
color: #fff !important;
padding: 2px !important ;
}

That’s all there was to it. Feel free to use any of this code, or change the colours. I just stuck with a T4-red-inspired colour scheme.

If you spot any mistakes then please tell me in the comments and I’ll correct the original post. Or want to contribute any other tweaks then do the same.

Gareth @ St Andrews