Version 3 (modified by 10 years ago) ( diff ) | ,
---|
Trac Layout Recipe
This is a recipe explaining how to reproduce the official edgewall.org site layout and design using SiteHtml and SiteStyleCss.
The layout described below is ideal for Trac setups where one organization (e.g. Edgewall Software) offers multiple projects (e.g. Trac, Bitten, Genshi, etc.).
Prepare site.html
Template
The first step is to prepare a site.html
template that will be used by all projects.
There are two ways to specify a site.html
template for an environment:
- Set the
templates_dir
in the[inherit]
section of eachtrac.ini
to a shared directory (e.g./path/to/common/templates
), and save thesite.html
file in that directory. Thetemplates_dir
may also be specified in a global configuration that is included in each environment's configuration through thefile
option in the[inherit]
section of trac.ini. - Copy the
site.html
file to thetemplates
directory of all environments (or better yet, create symlink in all directories to a single common location).
A reference site.html
template may be found in the templates
directory of the zip archive attached to this page.
The reference file is documented inline, so I will just give a short overview of the template:
- It begins by adding a CSS file to the head — make sure to update the URL if needed for your setup.
- It includes a list of topnav items as quick-jumps between projects — make sure to modify it to your specific project-list, as it is hardcoded.
- It includes a left box and right box that will appear on the left-hand side and right-hand side of each page. You can use these boxes for whatever you want (e.g. quick links, Google ads, etc.).
An example for a left box is included intemplates/site_leftbox.html
in the zip archive.
There is no right box in the example… - There's also a footer section for contact & copyrights information (or anything else you'd like to put there).
Adjust the Site Style Sheet
A reference projects.css
stylesheet is included in the attached zip archive (under the css
directory), with the styles of the edgewall.org site. As with the site template, the stylesheet must also be accessible by each project environment. It may be placed in the directory specified by the htdocs_dir
option in the [inherit]
section of trac.ini, or in the project environment's htdocs
directory.
You may modify and adjust the style sheet to meet your artistic taste.
One important thing to notice with respect to the projects.css
file is that it refers to various images (used for backgrounds, gradients, etc.).
The images are found in the gfx
directory of the attached zip archive,
but the projects.css
file assumes that the images are available under the ../gfx
directory, where ..
refers to one level up relative to the directory in which the projects.css
is located.
You must make sure that one of the following is met:
- The
gfx
directory is visible, and is one level up relative to thecss
directory. - All references to
../gfx
inprojects.css
are replaced with a correct URL.
Note that the paths in this context are URLs, not filesystem paths.
See also: TracInterfaceCustomization, SiteHtml, SiteStyleCss, #9629 (discussion that led to creation of this page)
Attachments (1)
-
TracLayoutRecipe.zip
(7.3 KB
) - added by 14 years ago.
Trac layout templates, style sheets, and images
Download all attachments as: .zip