Changes between Version 2 and Version 3 of TracInterfaceCustomization

Show
Ignore:
Author:
trac (IP: 127.0.0.1)
Timestamp:
07/25/08 20:10:17 (10 years ago)
Comment:

--

Legend:

Unmodified
Added
Removed
Modified
  • TracInterfaceCustomization

    v2 v3  
    1  
    21= Customizing the Trac Interface = 
    32[[TracGuideToc]] 
    98The 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]. 
    109 
    11 The logo or icon image should be put in a folder named "htdocs" in your project's environment folder.  (''Note: in projects created with a Trac version prior to 0.9 you will need to create this folder'') 
     10The logo or icon image should be put in a folder named "htdocs" in your project's environment folder.  (''Note: in projects created with a Trac version prior to 0.9 you will need to create this folder'') 
    1211 
    1312 ''Note: you can actually put the logo and icon anywhere on your server (as long as it's accessible through the web server), and use their absolute or server-relative URLs in the configuration.'' 
    1615 
    1716=== Logo === 
    18 Change the `src` setting to `site/` followed by the name of your image file.  The `width` and `height` settings should be modified to match your image's dimensions (the Trac chrome handler uses "`site/`" for files within the project directory `htdocs` and "`common/`" for the common ones). 
     17Change the `src` setting to `site/` followed by the name of your image file.  The `width` and `height` settings should be modified to match your image's dimensions (the Trac chrome handler uses "`site/`" for files within the project directory `htdocs` and "`common/`" for the common ones). 
    1918 
    2019{{{ 
    4140}}} 
    4241 
    43 == Site Header & Footer == 
     42== Site Header & Footer == 
    4443 
    45 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 adding the required HTML markup to 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, respectively. 
     44In 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 adding the required HTML markup to 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, respectively. 
    4645 
    4746These files may contain static HTML, though if users desire to have dynamically generated content they can make use of the [http://www.clearsilver.net/ ClearSilver] templating language from within the pages as well. When you need to see what variables are available to the template, append the query string `?hdfdump=1` to the URL of your Trac site. This will display a structured view of the template data. 
    4847 
    4948== Site CSS == 
    50 The primary means to adjust the layout of a Trac site is to add [http://www.w3.org/TR/REC-CSS2/ CSS] style rules that overlay the default rules. This is best done by editing the `site_css.cs` file in the enviroment's `templates` directory. The content of that template gets inserted into a `&lt;style type=&#34;text/css&#34;&gt;&lt;/style&gt;` element on every HTML page generated by Trac. 
     49The primary means to adjust the layout of a Trac site is to add [http://www.w3.org/TR/REC-CSS2/ CSS] style rules that overlay the default rules. This is best done by editing the `site_css.cs` file in the enviroment's `templates` directory. The content of that template gets inserted into a `<style type="text/css"></style>` element on every HTML page generated by Trac. 
    5150 
    5251While you can add your custom style rules directly to the `site_css.cs` file, it is recommended that you simply reference an external style sheet, thereby enabling browsers to cache the CSS file instead of transmitting the rules with every response. 
    5958You can use a !ClearSilver variable to reference a style sheet stored in the project environment's `htdocs` directory: 
    6059{{{ 
    61 @import url(&lt;?cs var:chrome.href ?&gt;/site/style.css); 
     60@import url(<?cs var:chrome.href ?>/site/style.css); 
    6261}}} 
    6362 
    6968{{{ 
    7069#!text/html 
    71 &lt;html&gt; 
    72 &lt;head&gt;&lt;title&gt;Available Projects&lt;/title&gt;&lt;/head&gt; 
    73 &lt;body&gt; 
    74  &lt;h1&gt;Available Projects&lt;/h1&gt; 
    75  &lt;ul&gt;&lt;?cs 
    76  each:project = projects ?&gt;&lt;li&gt;&lt;?cs 
    77   if:project.href ?&gt; 
    78    &lt;a href=&#34;&lt;?cs var:project.href ?&gt;&#34; title=&#34;&lt;?cs var:project.description ?&gt;&#34;&gt; 
    79     &lt;?cs var:project.name ?&gt;&lt;/a&gt;&lt;?cs 
    80   else ?&gt; 
    81    &lt;small&gt;&lt;?cs var:project.name ?&gt;: &lt;em&gt;Error&lt;/em&gt; &lt;br /&gt; 
    82    (&lt;?cs var:project.description ?&gt;)&lt;/small&gt;&lt;?cs 
    83   /if ?&gt; 
    84   &lt;/li&gt;&lt;?cs 
    85  /each ?&gt; 
    86  &lt;/ul&gt; 
    87 &lt;/body&gt; 
    88 &lt;/html&gt; 
     70<html> 
     71<head><title>Available Projects</title></head> 
     72<body> 
     73 <h1>Available Projects</h1> 
     74 <ul><?cs 
     75 each:project = projects ?><li><?cs 
     76  if:project.href ?> 
     77   <a href="<?cs var:project.href ?>" title="<?cs var:project.description ?>"> 
     78    <?cs var:project.name ?></a><?cs 
     79  else ?> 
     80   <small><?cs var:project.name ?>: <em>Error</em> <br /> 
     81   (<?cs var:project.description ?>)</small><?cs 
     82  /if ?> 
     83  </li><?cs 
     84 /each ?> 
     85 </ul> 
     86</body> 
     87</html> 
    8988}}} 
    9089 
    116115---- 
    117116See also TracGuide, TracIni 
    118 686669459510