= Customizing the Trac Interface = == Introduction == This page is meant to give users suggestions on how they can customize the look of Trac. Topics on this page should cover editing the HTML templates and CSS files, but not the program code itself. The topics are intended to show users how they can modify the look of Trac to meet their specific needs. Suggestions for changes to Trac's interface applicable to all users should be filed as tickets, not listed on this page. == Project Logo and Icon == The easiest parts of the Trac interface to customize are the logo and the site icon. Both of these can be configured with settings in [wiki:TracIni trac.ini]. The logo or icon image should be put in a folder named "htdocs" in your project's environment folder. (''note: in projects created before 0.9 you will need to create this folder'') Now configure the appropriate section of your [wiki:TracIni trac.ini]: === Logo === Change the `src` setting to `project/` followed by the name of your image file. The `width` and `height` settings should be modified to match your image's dimensions. {{{ [header_logo] src = project/my_logo.gif alt = My Project width = 300 height = 100 }}} === Icon === Icons should be a 16x16 image in `.gif` or `.ico` format. Change the `icon` setting to `project/` followed by the name of your icon file. Icons will typically be displayed by your web browser next to the site's URL and in the `Bookmarks` menu. {{{ [project] icon = project/my_icon.ico }}} == Site Header & Footer == In the environment folder for each Trac project there should be a directory called {{{templates}}}. This folder contains files {{{site_header.cs}}} and {{{site_footer.cs}}}. Users can customize their Trac site by placing HTML in these files. The content of these two files will be placed immediately following the opening {{{}}} tag and immediately preceding the closing {{{}}} tag of each page in the site. These files may contain static HTML, though if users desire to have dynamically generated content they can make use of the ClearSilver templating language from within the pages as well. Users can see ticket #332 and changeset [522] for more details. == Site CSS == Also in the enviroment's {{{templates}}} directory is the file {{{site_css.cs}}}. This file can contain [http://www.w3.org/TR/REC-CSS2/ Cascading Style Sheet] rules that can override or extend the standard stylesheets. == Examples == Users can post code samples for how they have customized Trac's interface.