wiki:CssPrototyping

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 user CSS in Firefox.

@namespace url(http://www.w3.org/1999/xhtml);

@-moz-document url-prefix("https://cloud9.pa.uky.edu/trac/cloudy/") {
  /* 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

Note that the actual code that would need to finally go into trac.css is only the one line following the WJH comment. Translated into English, it says: For any <img> tag that is inside an <a> tag that has id="logo", make the image width be 400 pixels, overriding all other declarations that may apply. Also, note that the !important is not needed for the version on the website.

Limitations of this approach

Obviously, if one wanted to modify the content of the image (e.g., the color) then this approach would not help. On the other hand, for the original examples given by Ryan:

What if the next one is too small, or too wide, or too red. Let's say someone has a great idea for a sidebar, but the first iteration is too wide. And then the second version is too narrow. And then we want to add another one for a discussion board. And then another one for hotfixes.

then nearly all the tweaking could be implemented using CSS I think.

Last modified 11 years ago Last modified on 2007-03-14T18:10:07Z

Attachments (2)

Download all attachments as: .zip