= Interface Customization using site/style.css

This page has some useful site styling tips. The snippets below should be included in the style.css referenced from the [SiteHtml site.html] file. Typically these are used to differentiate one Trac installation from another.

See [TracInterfaceCustomization#SiteAppearance Trac Interface Customization] for information on enabling a style.css.

== Get the "Red" Out

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

{{{#!css
:link, :visited, dt em, .milestone .info h2 em,
#metanav form.trac-logout button,
#content.report h3 a em,
#content.build h2.config :link, #content.build h2.config :visited,
.plugin h3 a {
 color: #00b;
}
/* To change red of the source path in browser, we need an extra rule to reset the grey (#998) of the first element */
#content.browser h1 :link, #content.browser h1 :visited {
 color: #00b;
}
#content.browser h1 .first:link, #content.browser h1 .first:visited {
 color: #998;
}
}}}

This will change most of the Red in Trac as well as in Bitten. However, plugins may still use Red where it would be desirable to use the new theme color, in which case the styling changes need to be applied on a plugin-by-plugin basis too.

== Change The Citation Colors

The changes described above do not affect all styling in Trac, and one such area is the first level of citation (`>`) markup:
> Example.[[br]]
> 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 change 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:
{{{#!css
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:
{{{#!css
#mainnav li {
 background-color: #eef;
}
}}}

== Larger Fonts

To make most of the smaller fonts larger (tested only on version 0.12):
{{{#!css
#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%; }
}}}

== Unlimited ticket width

Use the full width of the browser window for ticket display: 
{{{#!css
#content.ticket {
 width: auto;
 max-width: 100%;
} 
}}}