Trac Layout Recipe - Help

78 views
Skip to first unread message

Jared Bownds

unread,
Aug 13, 2014, 12:50:53 PM8/13/14
to trac-...@googlegroups.com, jared. bownds

URL:  http://trac.edgewall.org/wiki/CookBook/TracLayoutRecipe

I've followed the instructions listed in the URL above to the best of my ability, but I'm obviously not setting something properly in the css configuration.

All graphics located in the gfx directory are accessible via <base url>/chrome/site/gfx/shadow.gif  - and are one level up from the location of the htdocs folder containing projects.css

What am I doing wrong?  I've successfully configured other css and site.html in the context of trac in the past.

Index:

  1. Present state of trac development site
  2. Trac.ini snippet
  3. site.html (modified to read css from htdocs)
  4. projects.css 



Present state of trac development site



Trac.ini

[inherit]

plugins_dir = /srv/trac/trac/plugins

templates_dir = /srv/trac/trac/templates



site.html

<html xmlns="http://www.w3.org/1999/xhtml"

      xmlns:xi="http://www.w3.org/2001/XInclude"

      xmlns:py="http://genshi.edgewall.org/"

      py:strip="">


  <!--! Add site-specific style sheet -->

  <head py:match="head" py:attrs="select('@*')">

    ${select('*|comment()|text()')}

    <!--! The following line adds the projects.css,

           assuming it is available via the relative path /htdocs/projects.css

           if the css directory is available via a different URL,

           change it here. -->

    <link rel="stylesheet" type="text/css" href="/htdocs/projects.css" />

  </head>


  <py:match path="body" once="true" buffer="false"><body>


    <div id="wrapper">

      <div id="topbar">

        <a id="home-link" href="/trac/">Site Index</a>

      </div>


      <div id="ew-header">

       <div id="topnav">

        <ul>

        <!--! The following block of list items is the top navigation bar,

               that allows quick jumps between the available projects.

               Currently it includes the projects of Edgewall Software, as examples.

               You will need to modify the list according to your projects.

               Note that each list item (except for 'Home') has a class property

               that is assigned "active" if the current project is the active one.

               You will also need to modify the tests for every item to check

               against the correct name of each project.

               In addition, each anchor element has a class that allows formatting

               each item independently from other items (see projects.css) -->

         <li><a href="http://www.edgewall.org/">Home</a></li>

         <li class="${project.name=='The Trac Project' and 'active' or None}">

           <a class="trac" href="http://trac.edgewall.org/">Trac</a>

         </li>

         <li class="${project.name=='Genshi' and 'active' or None}">

           <a class="genshi" href="http://genshi.edgewall.org/">Genshi</a>

         </li>

         <li class="${project.name=='Babel' and 'active' or None}">

           <a class="babel" href="http://babel.edgewall.org/">Babel</a>

         </li>

         <li class="${project.name=='Bitten' and 'active' or None}">

           <a class="bitten" href="http://bitten.edgewall.org/">Bitten</a>

         </li>

         <li class="${project.name=='Posterity' and 'active' or None}">

           <a class="posterity" href="http://posterity.edgewall.org/">Posterity</a>

         </li>

        </ul>

       </div>

     </div>


     <div id="ew-main">

       <div id="ew-content">


         <!--! The following line adds the "left box" with quick links.

                The site_leftbox.html file is the template for the left box,

                and should be located in the same directory as the site.html file.

                Refer to this file for further details. -->

         <xi:include href="site_leftbox.html"><xi:fallback/></xi:include>


         ${select('*|text()')}


        </div><!-- #ew-content -->

      </div>

    </div>

    <div id="ew-footer">

      <!--! This is the page footer, where you can include contact & copyright info -->

      <p><a href="mailto:contact@mail">contact@mail</a></p>

      <p>Copyright &copy; Copyright String. All rights reserved.</p>

    </div>


    <div id="right">


         <!--! The following line adds the "right box".

                The site_rightbox.html file is the template for the right box,

                and should be located in the same directory as the site.html file.

                An example is not included,

                but the concept is identical to the left box... -->

         <xi:include href="site_rightbox.html"><xi:fallback/></xi:include>


   </div>

  </body></py:match>

</html>



projects.css

body { background: #4b4d4d url(../gfx/bkgnd_pattern.png); margin: 0; padding: 0; }


h1 { color: #555; font-size: 26px; margin: 1em 0 .5em 0; }

h1 :link, h1 :visited, h2 :link, h2 :visited, h3 :link, h3 :visited {

  border: none;

}

h2 { margin-top: 2em; font-style: normal; }


#wrapper { background: #4b4d4d url(../gfx/shadow.gif) 100% 0 repeat-y;

  padding: 0 145px 0 0; margin-left: 100px;

}

#topbar { background: #c00; border-left: 1px solid #000; font-size: xx-small; height: 1.2em;}

#topbar ul { font-size: xx-small; margin: 0; padding: 0; list-style: none; }

#topbar li { display: inline; padding: 0; }

#topbar li a { background: #c00; border: none; border-left: 1px solid;

  color: #fff; margin: 0; padding: 0 20px;

}

#topbar li.active a { font-weight: bold; }

#topbar li a:hover { background-color: #fff !important; color: #b00; }

#home-link { color: #fff; border: none; font-size: xx-small; }

#home-link:hover { background: #fff; color: #b00; }


#topnav { background: #fff url(../gfx/whtgrad.png) repeat-x;

  border-bottom: 12px solid #000; clear: both;

  float: left; margin: 96px 0 0; padding: 0; position: relative;

  width: 100%;

}

#topnav ul { margin: 0 auto; padding: 0; list-style: none; }

#topnav li { float: left; margin: 0; padding: 0; }

#topnav li.active { color: #fb0; font-weight: bold; }

#topnav a { border-bottom: none; border-right: 1px solid #ddd; color: #555;

  float: left; font-size: 13px; letter-spacing: -1px; margin: 0;

  padding: 4px 15px; text-decoration: none;

}

#topnav a.trac { color: #800;}

#topnav a.blog { color: #760;}

#topnav li.active a { background: #000 url(../gfx/blkgrad.png) repeat-x; color: #eee; }

#topnav li a:hover { background: #999; color: #eee; }

#topnav li.active a:hover { color: #eee; }


#ew-header { background: #fff url(../gfx/shredder.png) 100% 0 no-repeat;

  border-left: 1px solid #000; clear: both; font-size: x-small; margin: 0;

  height: 96px;

}

#ew-main { margin-left: -100px; }

#ew-content { background: #fff; border-bottom: 12px solid #000;

  border-left: 1px solid #000; margin-left: 100px; min-height: 560px;

}

* html #ew-content { height: 560px; }

#ew-footer { clear: both; color: #999; font-size: 9px; text-align: center; }

#ew-footer :link, #ew-footer :visited { border: none; color: #c6c6c6; }

#ew-footer :link:hover, #ew-footer :visited:hover { background: transparent;

  text-decoration: underline;

}

#left { position: absolute; top: 205px; left: 0; z-index: 1; width: 100px;

 font-size: x-small; text-align: right;

}

#left ul { list-style: none; margin: 0; padding: 0; }

#left ul li { margin: 5px 0; padding: 0; }

#left :link, #left :visited { color: #c6c6c6; border: none; display: block;

  padding: 3px 10px 3px 5px;

}

#left :link:hover, #left :visited:hover { background: #000; color: #fff; }

#right { position: absolute; top: 50px; right: 10px; z-index: 1; }

#ohloh-badge { margin-bottom: 20px; text-align: center; }

#ohloh-badge :link, #ohloh-badge :visited { border: none; }

#ohloh-badge :link:hover, #ohloh-badge :visited:hover { background: transparent; border: none; }


/* Trac overrides */

#header { clear: both; border-top: 1px solid #000; background: #fff; }

#logo { position: absolute; left: 130px; top: 20px; }

#logo img { position: relative; }

#header h1 { position: absolute; left: 120px; top: -30px; font-size: 42px; }

#search { position: absolute; top: 45px; right: 180px; }

#metanav { background: transparent; margin: 0; padding: 0 0 .3em;

  position: absolute; top: 90px; right: 166px; width: 100%;

}

#metanav li { border-color: #999; }

#metanav :link, #metanav :visited { color: #c6c6c6; border: none; }

#metanav a:hover { color: #fff; background: #999; }

#mainnav { border-width: 0 0 1px; height: 1.2em; margin: 0; padding-top: 1px; }

*+html #mainnav { margin-top: 35px; }

#mainnav :link, #mainnav :visited { padding: .1em 20px .2em !important; }

#mainnav :link.active, #mainnav :visited.active { background: #000 !important;

  border-left: 1px solid #666; color: #fff;

}

#pagepath { padding: .5em .5em 0; }

#ctxtnav { margin: 0 -16px; padding: .5em .5em 0; }

#main { background: url(../gfx/vertbars.png) repeat-x; padding-left: 16px; padding-right: 16px;

}

#footer { display: none; }

#newticketguide { background: #fdc; border: 2px solid #d00; font-style: italic;

  margin: 1em 0; padding: 0 .5em;

}


/* Documentation */

div.document img.logo { display: none; }

dl.pydoc h2 code { font-size: 95%; }

dl.pydoc table.field-list th { color: #999; font-size: 90%; font-weight: bold; line-height: 1.4em; padding-right: .5em; text-align: right; }

dl.pydoc pre.doctest-block { background: #f7f7f7; border: 1px solid #d7d7d7; margin: 1em 1.7em; padding: .25em; }


@media print {

 body { background: #fff; }

 body,p,table,td { font-size: 10pt !important; }

 h1 { font-size: 16pt !important; }

 #topbar, #topnav, #left, #right { display: none; margin: 0;}

 #ew-header { display: none; }

 #ew-content { border-left: none; }

 #ew-footer { background: transparent; border: none; }

 #wrapper { background: transparent; margin: 0; padding: 0; }

 #main { background: transparent; width: 100%; margin: 0; padding: 0;

   border-top: 9px solid #b00; border-left: none;

 }

 input[type=submit] { display: none; }

}







RjOllos

unread,
Aug 14, 2014, 1:05:47 AM8/14/14
to trac-...@googlegroups.com, jared....@bayer.com
On Wednesday, August 13, 2014 9:50:53 AM UTC-7, Jared Bownds wrote:

URL:  http://trac.edgewall.org/wiki/CookBook/TracLayoutRecipe

I've followed the instructions listed in the URL above to the best of my ability, but I'm obviously not setting something properly in the css configuration.

All graphics located in the gfx directory are accessible via <base url>/chrome/site/gfx/shadow.gif  - and are one level up from the location of the htdocs folder containing projects.css

What am I doing wrong?  I've successfully configured other css and site.html in the context of trac in the past.

Index:

  1. Present state of trac development site
  2. Trac.ini snippet
  3. site.html (modified to read css from htdocs)
  4. projects.css 

The first hint is to view the page source (CTRL+U in Chrome). You will likely find that the link to projects.css is invalid.

I'm not sure where you've put your CSS files. Let's assume you do the following:

[inherit]
htdocs_dir = /srv/trac/trac/htdocs

and that within that htdocs directory you have:

css/projects.css
gfx/blkgnd_pattern.png
gfx/blkgrad.png
...

In the Trac Layout Recipe, there is a step //make sure to update the URL if needed for your setup.// I suspect that is the one you missed.

You need to edit the 13th line in site.html to point to the CSS file:
href="${href.chrome('shared/css/projects.css'})"


Jared Bownds

unread,
Aug 15, 2014, 5:03:33 PM8/15/14
to trac-...@googlegroups.com
Hi Ryan,

That was it, line 13 in site.html needed to be updated - oh the details.

I'm facing one more challenge, base URLs work with the layout, eg. /wiki, /newticket/

But not specific endpoints beyond the base URL, /newticket/100 or /wiki/WikiStart

What do you suggest?



--
You received this message because you are subscribed to a topic in the Google Groups "Trac Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/trac-users/TO6UsYAW3VU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to trac-users+...@googlegroups.com.
To post to this group, send email to trac-...@googlegroups.com.
Visit this group at http://groups.google.com/group/trac-users.
For more options, visit https://groups.google.com/d/optout.



--

Ryan Ollos

unread,
Aug 16, 2014, 12:41:27 AM8/16/14
to trac-...@googlegroups.com
On Fri, Aug 15, 2014 at 2:02 PM, Jared Bownds <jared....@gmail.com> wrote:
Hi Ryan,

That was it, line 13 in site.html needed to be updated - oh the details.

I'm facing one more challenge, base URLs work with the layout, eg. /wiki, /newticket/

But not specific endpoints beyond the base URL, /newticket/100 or /wiki/WikiStart

What do you suggest?

I'm not sure what you mean. You'll need to describe the behavior you are seeing in more detail. 

Jared Bownds

unread,
Aug 16, 2014, 4:34:34 PM8/16/14
to trac-...@googlegroups.com
For example, the home page displays as expected (see 1.) and so does new ticket (see 2.).  However, when viewing a ticket the css breaks (see 3.), same behavior when viewing a wiki page.

1. 
Inline image 1

2.
Inline image 2

3.
Inline image 3

--
You received this message because you are subscribed to a topic in the Google Groups "Trac Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/trac-users/TO6UsYAW3VU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to trac-users+...@googlegroups.com.
To post to this group, send email to trac-...@googlegroups.com.
Visit this group at http://groups.google.com/group/trac-users.
For more options, visit https://groups.google.com/d/optout.

Ryan Ollos

unread,
Aug 16, 2014, 11:52:28 PM8/16/14
to trac-...@googlegroups.com
On Sat, Aug 16, 2014 at 1:33 PM, Jared Bownds <jared....@gmail.com> wrote:
For example, the home page displays as expected (see 1.) and so does new ticket (see 2.).  However, when viewing a ticket the css breaks (see 3.), same behavior when viewing a wiki page.

I am unable to reproduce that behavior. It appears that the stylesheet isn't loading on those pages though, so you should look at the page source and whether a link to the stylesheet is added and whether that link is valid.  

shat...@e-z.net

unread,
Aug 17, 2014, 7:06:39 PM8/17/14
to trac-...@googlegroups.com
FYI

Some browsers can be told whether to accept CCS stylesheets or to
do basic HTML formatting without stylesheets. I have come across this
in numerous web hosting adventures.

Steve Hathaway
> --
> You received this message because you are subscribed to the Google Groups
> "Trac Users" group.
> To unsubscribe from this group and stop receiving emails from it, send an

Jared Bownds

unread,
Aug 17, 2014, 8:24:22 PM8/17/14
to trac-...@googlegroups.com
I figured it out, I omitted a leading "/" in line 13 of site.html referencing projects.css 


Wrong:
 <link rel="stylesheet" type="text/css" href="chrome/site/css/projects.css" />

Correct:
 <link rel="stylesheet" type="text/css" href="/chrome/site/css/projects.css" />



You received this message because you are subscribed to a topic in the Google Groups "Trac Users" group.
To unsubscribe from this topic, visit https://groups.google.com/d/topic/trac-users/TO6UsYAW3VU/unsubscribe.
To unsubscribe from this group and all its topics, send an email to trac-users+...@googlegroups.com.

To post to this group, send email to trac-...@googlegroups.com.
Visit this group at http://groups.google.com/group/trac-users.
For more options, visit https://groups.google.com/d/optout.

Ryan Ollos

unread,
Aug 17, 2014, 9:56:26 PM8/17/14
to trac-...@googlegroups.com
On Sun, Aug 17, 2014 at 5:23 PM, Jared Bownds <jared....@gmail.com> wrote:
I figured it out, I omitted a leading "/" in line 13 of site.html referencing projects.css 


Wrong:
 <link rel="stylesheet" type="text/css" href="chrome/site/css/projects.css" />

Correct:
 <link rel="stylesheet" type="text/css" href="/chrome/site/css/projects.css" />

It might work depending for your particular configuration configuration, but it can't be generalized.

As we discussed several replies back, the following is correct:

href="${href.chrome('site/css/projects.css'})"

Well, you would have had to extrapolate on what I told you previously to replace "shared" with "site" for the case that you've put the CSS files in your environment htdocs directory rather than a shared htdocs directory. but I assumed you'd ask more questions if you didn't understand that part.

Jared Bownds

unread,
Aug 19, 2014, 6:41:36 PM8/19/14
to trac-...@googlegroups.com, ryan.j...@gmail.com


Well, you would have had to extrapolate on what I told you previously to replace "shared" with "site" for the case that you've put the CSS files in your environment htdocs directory rather than a shared htdocs directory. but I assumed you'd ask more questions if you didn't understand that part.

This is definitely a learning process for me, but I appreciate your feedback and assistance.  I have an additional question if you are up for it.

I've successfully implemented the TracLayoutRecipe, all except for one notable feature.  In contrast to edge wall's site, I noticed there is feedback in terms of what global navigation link you are currently viewing (see edgewall example).  If you notice the other screenshot (local instance), this same behavior is not expressed - what did I miss?

Edgewall Example
 

Local Trac instance



Ryan Ollos

unread,
Aug 19, 2014, 10:48:44 PM8/19/14
to Jared Bownds, trac-...@googlegroups.com
Each project has a `name` attribute that is set through the [project] section of trac.ini. The template does a comparison with the project name to determine the active navigation item. Take a look at this code, starting at line 25 in site.html:
Assuming your project names match the text displayed on the navigation item in your screen capture (and if they don't you should consider making them match):

         <li class="${project.name=='CLS West Sacramento' and 'active' or None}">
           <a href="<insert url of CLS West Sacramento>">CLS West Sacramento</a>
         </li>

As far as I can tell the class attribute (e.g. class="genshi" in the original template) isn't used anywhere, so I've omitted it.

Note you could also improve the code a bit if it is indeed true that the "Project name matches the text displayed on the navigation item", and you've also set the URL for the project in the [project] section of trac.ini

         <li class="${project.name=='CLS West Sacramento' and 'active' or None}">
           <a href="$project.url">$project.name</a>
         </li>

That could make things a bit cleaner. I haven't tested that, so make one change at a time and watch out for stupid errors I might have made in typing this out ;)


Ryan Ollos

unread,
Aug 19, 2014, 11:24:57 PM8/19/14
to trac-...@googlegroups.com, Jared Bownds
On Tue, Aug 19, 2014 at 7:48 PM, Ryan Ollos <rjo...@gmail.com> wrote:
Note you could also improve the code a bit if it is indeed true that the "Project name matches the text displayed on the navigation item", and you've also set the URL for the project in the [project] section of trac.ini

         <li class="${project.name=='CLS West Sacramento' and 'active' or None}">
           <a href="$project.url">$project.name</a>
         </li>

That could make things a bit cleaner. I haven't tested that, so make one change at a time and watch out for stupid errors I might have made in typing this out ;)

Sorry, ignore this last part. It would only work if we had a list of all the projects.

Ryan Ollos

unread,
Aug 20, 2014, 11:22:34 AM8/20/14
to Jared Bownds, trac-...@googlegroups.com
On Wed, Aug 20, 2014 at 8:10 AM, Jared Bownds <jared....@gmail.com> wrote:
This worked perfectly, thank you.

Last question on this topic.  With regards to one the two instances of Trac we are presenting running, the mainnav buttons are not responding in the same 'black highlight' fashion.  The buttons will hover black, but not remain black when selected - any helpful hints?

Just to be sure, you are referring to the Wiki / Timeline / Roadmap / ... links for one of the Trac instances?

When the mainnav item is selected the <li> element that wraps the link will have the "active" class. I would suggest opening up inspector and looking at whether the selected link has the "active" class, and then start looking at the CSS rules.

Ryan Ollos

unread,
Aug 21, 2014, 10:54:28 PM8/21/14
to Jared Bownds, trac-...@googlegroups.com

On Wed, Aug 20, 2014 at 10:04 AM, Jared Bownds <jared....@gmail.com> wrote:
Hi,

Yes, I am referring to the Wiki / Timeline / Roadmap links.

In comparing the instance where the active class is working, I can see it being called when using the inspector.  On the other hand, I am unable to see the active class being called for the instance where the active behavior is not present (go figure).

When you mention the CSS rules, what is the best way to dissect them?  Also, what in your mind could potentially cause this class to be omitted? I should mention, this instance utilized the a plugin called ContextChrome, with the following components enabled:

InterTracTicketLinkDecorator = enabled
TicketLinkDecorator = enabled
TypeClassToTicket  = enabled

Hint: make sure to do a "reply-all" so the message goes to the mailing list. Maybe someone else will have better insight than I do.

First I would try disabling all those plugins through Plugin Admin page, restart the server and see if the issue goes away. If it does, enable them one-by-one until the culprit is found.

We have seen an issue in which the activate item won't be highlighted if there is a warning displayed on the page, such as //unsupported version control system//. Do you have any warnings displayed?
http://trac.edgewall.org/ticket/10953#comment:5

Reply all
Reply to author
Forward
0 new messages