Edgewall Software

Version 4 (modified by Matthew Good, 19 years ago) ( diff )

how to use [2224] to add your project logo or icon

This page documents the 1.4 (latest stable) release. Documentation for other releases can be found here.

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 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 trac.ini:

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
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 <body> tag and immediately preceding the closing </body> 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 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.

Note: See TracWiki for help on using the wiki.