| | 1 | = Interface Customization using site/style.css = |
| | 2 | |
| | 3 | This page intends to collect useful snippets for inclusing in a project style.css file. Any snippet below is intended to be included inside the style.css that was referenced from the site.html file. Typically these are used to differentiate one Trac installation from another. |
| | 4 | |
| | 5 | == Get the "Red" Out == |
| | 6 | 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 some other color, in this example Blue (!#00b): |
| | 7 | {{{ |
| | 8 | #!css |
| | 9 | :link, :visited, dt em, .milestone .info h2 em, |
| | 10 | #content.build h2.config :link, #content.build h2.config :visited, |
| | 11 | .plugin h3 a { |
| | 12 | color: #00b; |
| | 13 | } |
| | 14 | }}} |
| | 15 | This will change most of the Red in Trac and in Bitten. However some additional plugins may still use Red were it would be desired to use the new theme color. |
| | 16 | |
| | 17 | == Change The Citation Colors == |
| | 18 | The above section gets all of the Red used in Trac except the color used in the first level of citation, the {{{ > }}} markup. Example: |
| | 19 | > First level |
| | 20 | > > Second level |
| | 21 | > > > Third level |
| | 22 | > > > > Fourth level |
| | 23 | > > > > > And levels above. |
| | 24 | 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: |
| | 25 | {{{ |
| | 26 | #!css |
| | 27 | blockquote.citation { border-color: #44b; } |
| | 28 | .citation blockquote.citation { border-color: #b44; } |
| | 29 | .citation .citation blockquote.citation { border-color: #4b4; } |
| | 30 | .citation .citation .citation blockquote.citation { border-color: #44b; } |
| | 31 | }}} |
| | 32 | |
| | 33 | == Adding Background Color to the Main Navigation Bar == |
| | 34 | The main navigation bar (Wiki, Timeline, Roadmap, Browse Source, View tickets, New Tickets, Search) appears in black on white. To change the background color, in this example to a pale blue: |
| | 35 | {{{ |
| | 36 | #!css |
| | 37 | #mainnav li { |
| | 38 | background-color: #eef; |
| | 39 | } |
| | 40 | }}} |
