wiki:gotoh

Version 4 (modified by gotoh, 9 years ago) (diff)

Added layout customization example via userContents.css

Shun-ichi Goto

One of user of Trac live in Japan, Yokohama.

Usually using Trac current (0.9pre) + Windows XP + apache 2.0.54 + Subverion 1.2.0.

ListTags(gotoh)?

My favorite customizations

I'm using Trac on my site with some customization. These are not so usefull for everyone, but someone may like it. So I introduce them for those users.

Access Key

When we modify the wiki page, we click 'Preview' button frequently before pressing 'Save Changes' button. And to press 'preview button', usually we need scroll the page. So I change the template and define HTML accesskey attribute to these buttons. For example, specifying acccesskey attribute of 'Preview' button as "r", we can use ALT-R instead of pressing that button.

I'm using access key with following buttons:

  • wiki page
    • 'Edit' button with 'e' (ALT-E)
    • 'Preview' button with 'r' (ALT-R)
  • ticket page
    • 'Preview' button with 'r' (ALT-R)
  • new ticket page
    • 'Preview' button with 'r' (ALT-R)

The patch for above is in tikect:1752.

Too Wide Timeline Preference

As default, preference box in timeline page is too wide (I feel). I recommend more compact preference. See ticket:1013 for patch.

Too Narrow Search Box

I feel that default size of search box is too narrow. So I widen by using CSS via site_css.cs. Like this:

/* enlarge search text box */
#proj-search {
  width: 200px !important;
}

More Compact Navigation Button

The box size of navigation bar on the top of page is too large, I feel. Set them more compact with following CSS in site_css.cs:

#mainnav :link, #mainnav :visited {
  padding-left: 8px; 
  padding-right: 8px; 
}

Customize for Public Site

You may think that you want to adapt layout customization above against public sites like edgewall.com and trac-hack site. For the case, if you are using firefox or mozilla, add following lines to ${profile}/chrome/userContent.css.

/* Limit width Trac's timeline preference */
div#content.timeline form#prefs div {
  width: 150px;
}

/* enlarge search text box */
#proj-search {
  width: 200px !important;
}

/* smart spacing of main navigation buttons (wiki, timeline, etc.) */
#mainnav :link, #mainnav :visited {
  padding-left: 8px !important;
  padding-right: 8px !important;
}

Links to Report in Site Header

Some page customization are allowed by Trac via files: site_css.cs, site_header.cs and site_footer.cs. I'm using site_header.cs to show shortcut links in top of page (called as 'site header'):

  • Active Tickets ... Link to report:1 with accesskey 'a' (ALT-A).
  • My Tickets ... Link to report:7 with accesskey 'm' (ALT-M) displayed only if user logged in.
  • Project List ... Link to parent directory to show project list with accesskey 'l' (ALT-L).

My site_header.cs is bellow:

<?cs
####################################################################
# Site header - Contents are automatically inserted above Trac HTML
?>
<div class='nav' style='float:right'>
  <ul>
    <li class='first'><a href="<?cs var:$trac.href.report ?>/1" accesskey="a"><u>A</u>ctive Tickets</a></li><?cs
    if trac.authname != 'anonymous' ?>
    <li ><a href="<?cs var:$trac.href.report ?>/7" accesskey="m"><u>M</u>y Tickets</a></li><?cs
	/if ?>
    <li class='last'><a href="/projects" accesskey="l">Project <u>L</u>ist</a></li>
  <ul>
</div>

TagIt(user)?