1

What I want to do:
I want to change the standard Trac layout using a custom CSS file from my plugin. More specifically, I want to change the appearance of the navigation bar link of my plugin.

What I have so far:
I know that the navigation bar items automatically get a CSS class assigned to them. This looks like class="iconPluginname". I created a new HTML file in my templates folder called site.html, which looks like this:

<html xmlns="http://www.w3.org/1999/xhtml"
      xmlns:py="http://genshi.edgewall.org/"
      py:strip="">

  <!--! Add site-specific style sheet -->
  <head py:match="head" py:attrs="select('@*')">
    ${select('*')}
    <link rel="stylesheet" type="text/css"
          href="${href.chrome('/mypluginname/css/mainnav_icon.css')}" />
  </head>

  <body py:match="body" py:attrs="select('@*')">
    ${select('*|text()')}
  </body>

</html>

As far as I know, Trac searches in the plugin files for a file called site.html, and if it doesn't find one it searches in the shared resources and finally in the Trac folder. The latter case is the default case. By my understanding, if I create a file site.html in my templates folder and the plugin is loaded correctly, it should automatically use the linked stylesheet and also add any changes done in the template. However, when I add a title tag to it, the title of my Trac page is not changed, so I assume the layout is not even loaded.

What do I have to do to make changes to the layout or add a custom stylesheet to my Trac, apart from adding site.html in my templates folder and linking to the stylesheet?

6
  • Why wouldn't a typical CSS override work in this case?
    – serraosays
    Dec 9, 2015 at 15:25
  • What do you mean by that? Dec 9, 2015 at 15:36
  • If your Trac app plugin attaches a custom iconPluginname class to your nav structure, just do custom styles based off of it. .iconPluginname .my-style{ whatever: youwant; } or .iconPluginname { .my-style{ whatever: youwant; } } in scss.
    – serraosays
    Dec 9, 2015 at 15:54
  • That's what I am doing inside my CSS file. The problem is, that the HTML file, which should override the Trac layout and links to the CSS file, is not loaded, and I do not know why. I think I might be missing something for the template to be loaded, but I think that it should be loaded automatically if Trac finds it in the templates folder. Dec 9, 2015 at 15:59
  • So the problem is HOW to apply the styles. I've read somewhere, that it is possible to create custom themes which can be done with just CSS styles without templates, but searching for Trac themes all I can find is plugins applying themes and this, but no documentation of how to make custom themes as described here. Dec 9, 2015 at 16:04

1 Answer 1

4

If you want to provide custom site styling, put the site.html shown on the TracInterfaceCustomization page in your environment templates directory and put the custom site styling in style.css in your environment htdocs directory.

If you'd like to add a stylesheet through a plugin you are developing, use add_stylesheet.

1
  • This works. At first it didn't show the new style, but inspecting it in the browser I could see that the new properties were added, but inactive. So I had to add !important to the CSS in order to override the generic mainnav item properties. Dec 10, 2015 at 9:13

Your Answer

By clicking “Post Your Answer”, you agree to our terms of service and acknowledge you have read our privacy policy.

Not the answer you're looking for? Browse other questions tagged or ask your own question.