Version 5 (modified by 17 years ago) ( diff ) | ,
---|
Theme Plugins
Do not edit this page until this notice was removed
This proposal describes a way trac could get a working theme support. The main idea is that every project which uses trac should have it's own theme. Or at least each major trac installation.
The current way is overriding htdocs_location
in the trac config to bypass the shipped css and js files and inject new ones. Using the site.html
file (talking of trac 0.11) you can then override the way the template is rendered. Because of the great Genshi API with XPATH support nearly everything is overrideable. But trac upgrades are a pain in the ass and distributing themes does not work.
Generic CSS Classes
One of the first things which should be done is cleaning up the shipped css files. They should use more generic classes and documented classes. Each plugin developer should be able to use them too in his plugins.
Also the trac core would only ship layout css files without color definitions. The default theme would then add the color definitions for the elements (links, browser etc). Currently the only way to change the trac colors is copying the default css files and replace all the color hex values with own ones.
To create a list of generic classes an analysis of the current css files and genshi templates would be required.
Theme Provider
class MyTheme(Component): implements(IThemeProvider, ITemplateProvider) # IThemeProvider def get_theme_htdocs_id(self): return 'mytheme' def get_theme_site_template(self): return 'mytheme/site.html' # ITemplateProvider methods def get_templates_dirs(self): from pkg_resources import resource_filename return [resource_filename(__name__, 'templates')] def get_htdocs_dirs(self): from pkg_resources import resource_filename return [('mytheme', resource_filename(__name__, 'htdocs'))]
There will also be a UserTheme
component class which uses the site.html
from the trac instance folder and the template/htdocs folder in the instance. It's one of the both default themes:
trac
- the trac default themecustom
- a special theme that forwards the htdocs/template lookups to the instance folders and uses the normalsite.html
as template.
Themes
A theme looks like the theme defined above. So this could be the mytheme/site.html
:
<html xmlns="http://www.w3.org/1999/xhtml" xmlns:py="http://genshi.edgewall.org/" xmlns:xi="http://www.w3.org/2001/XInclude" py:strip=""> <head py:match="head"> <!-- load the default header stuff including the layout and plugin css files --> ${select('*')} <!-- include theme css files --> <link rel="stylesheet" href="${theme.get_chrome_url('style/style.css')}" /> <link rel="stylesheet" href="${theme.get_chrome_url('style/print.css')}" media="print" /> </head> <body py:match="body"> <!-- normal design used by the project webpage --> <div id="header"> <h1>Project Trac</h1> </div> <div id="navigation"> <li><a href="/">Index</a></li> <li><a href="/downloads">Downloads</a></li> <li><a href="/wiki/">Wiki</a></li> <li class="active"><a href="/trac/">Development</a></li> </div> <!-- embbed the trac --> <div id="body"> <div id="x-trac"> <div class="sidebar"> <!-- combine all three navigation bars into one --> <ul class="navigation"> <!-- include main navigation --> ${select('ul[@id="mainnav"]/*')} <!-- include meta nav --> ${select('ul[@id="metanav"]/*')} <!-- include ctx nav --> ${select('ul[@id="ctxtnav"]/*')} </ul> <li>Search ${select('div[@id="banner"]/form[@id="search"]')} </li> </ul> <!-- search box --> ${select('form[@id="search"]')} </div> <div class="trac-body"> ${select('div[@id="main"]/*')} </div> </div> </div> <!-- project webpage footer --> <div id="footer"> <a href="http://www.example.org/">Project</a> is open source software licensed under the <a href="http://www.gnu.org/copyleft/gpl.html">GPL</a>, development page powered by <a href="http://trac.edgewall.org/">Trac</a>. </div> </body> </html>
As you can see the idea is that the default layout.html does not include *any* style elements. It just wraps the content elements in divs and uls. (navigation bars, content etc). The default css files have all their rules prefixed with #x-trac
in order to avoid clashes with included css files from project webpages. The idea is that you just have to add a div with the idea #x-trac
where the trac should appear, select everything there and there you go. Additionally you can of course as shown above, move the navigation bars around thanks to the ass-kicking genshi xpath support.
theme.get_chrome_url()
creates an url to the chrome folder of the current theme.
Attachments (3)
-
theming.patch
(25.7 KB
) - added by 17 years ago.
first patch
-
theming.2.patch
(28.4 KB
) - added by 17 years ago.
added missing file
-
theming.3.patch
(72.9 KB
) - added by 17 years ago.
another version of the patch, this time with "TracTheme", "JinjaTheme" and "CustomTheme". Not all areas are themed since i truncated all css files before in order to clean them up
Download all attachments as: .zip