You are here: Home Tech Trac: simple HTML and CSS modifications

Trac: simple HTML and CSS modifications

by Chris Shenton last modified Nov 05, 2010 11:20 AM
Enabling and locating files isn't obvious: HTML and CSS/Image files live in different directories.

To enable a simple CSS, you have to add a new HTML snippet that references the new CSS file.  The locations are spelled out in the Trac FAQ, rather than with the Interface customization document.

Create a $TRAC_HOME/templates/site.html which references a new CSS file:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:xi="http://www.w3.org/2001/XInclude"
      xmlns:py="http://genshi.edgewall.org/"
      py:strip="">
  <head py:match="head" py:attrs="select('@*')">
    ${select('*|comment()|text()')}
    <link rel="stylesheet" type="text/css"
          href="${href.chrome('site/style.css')}" />
  </head>
</html>

I believe you need to restart your Trac for this to activate this; it's probably due to the templates getting compiled for speed at startup time.

Then in $TRAC_HOME/htdocs/style.css you can do something like:

#mainnav li {
 background-color: #8f8;
}

Obviously there's more to do there, but it's a small change you can see.

By the way, images also go into the htdocs/ directory. The simplest change you can do is to replace the standard logo file, which is referred to in the conf/trac.ini file by default as site/your_project_logo.png: create a PNG file in $TRAC_HOME/htdocs/your_project_logo.png

Share this: