Interface Customization using site/style.css

This page has some useful site styling tips. The snippets below should be included inside the style.css referenced from the site.html file. Typically these are used to differentiate one Trac installation from another. See Trac Interface Customization for information on enabling a site.css.

Get the "Red" Out

The theme of a the basic Trac installation is Red and Black on White. To change most of the Red (#b00) used in Trac to for example Blue (#00b):

:link, :visited, dt em, .milestone .info h2 em,
#content.report h3 a em,
#content.build h2.config :link, #content.build h2.config :visited,
.plugin h3 a {
 color: #00b;
}

This will change most of the Red in Trac and in Bitten. However some additional plugins may still use Red where it would be desired to use the new theme color.

Change The Citation Colors

The above section gets all of the Red used in Trac except the color used in the first level of the citation (>) markup.

Example.
More Example.

However this is actually the first of a series of four colors.

First level

Second level

Third level

Fourth level

And levels above.

To changes these colors away from the defaults of dark-red #b44, dark-blue #4b4, dark-green #44b, and medium-red #c55, in this example to dark-blue #44b, dark-red #b44, dark-green #4b4, and dark-blue #44b:

blockquote.citation { border-color: #44b; }
.citation blockquote.citation { border-color: #b44; }
.citation .citation blockquote.citation { border-color: #4b4; }
.citation .citation .citation blockquote.citation { border-color: #44b; }

Adding Background Color to the Main Navigation Bar

The main navigation bar (Wiki, Timeline, Roadmap, Browse Source, View Tickets, New Tickets, Search) appears in black on white. To change the background color to for example a pale blue:

#mainnav li {
 background-color: #eef;
}

Larger Fonts

To make most of the smaller fonts larger (tested only on version 0.12):

#search input           { font-size: 13px; }
.nav ul                 { font-size: 12px; }
.threading              { font-size: 90%; }
.trac-nav, .trac-topnav { font-size: 90%; }
.inlinebuttons input    { font-size: 95%; }
#ticket table.properties td,#ticket table.properties th { font-size: 100%; }