Version 2 (modified by William Henney, 13 years ago) (diff)

Added example

How to easily prototype and test CSS customizations of the Trac site

The problem

Any modification to the setup of the Trac site (e.g., customization of the skin) requires root access to cloud9, which is only available to the system administrator. This makes it very painful and slow to develop and test any changes.

A partial solution

Much of the customization can be done via editing the CSS stylesheets trac.css and wiki.css. In many(?) browsers it is possible to load personal CSS commands for a given site or page. In Firefox, this is made rather easy by the Stylish plugin, which allows easy management and editing of personal stylesheets. Thus, modifications to the style of the Trac site can be rapidly written, tested, and debugged without having access to the server. Once the modifications are perfected, it will still need someone with root acces to install them, but this should be less problematical.

A worked example: changing the size of the banner image

Ryan thinks his banner image is too large. Here is what it looks like at its natural width:

screenshot of browser view of original (large) logo

So, let us reduce its width using CSS.

@namespace url(;

@-moz-document url-prefix("") {
  /* WJH 2006-03-14: Set width of image inside logo link */ 
  a#logo > img {width: 400px!important}

Now it looks like this:

screenshot of browser view of hacked (smaller) logo

Attachments (2)

Download all attachments as: .zip