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:
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 © 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; }
}
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:
- Present state of trac development site
- Trac.ini snippet
- site.html (modified to read css from htdocs)
- 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.
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/WikiStartWhat 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.
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.
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.
I figured it out, I omitted a leading "/" in line 13 of site.html referencing projects.cssWrong:<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" />
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.
Local Trac instance
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 ;)
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?
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 = enabledTicketLinkDecorator = enabledTypeClassToTicket = enabled