You are viewing a plain text version of this content. The canonical link for it is here.
Posted to dev@bloodhound.apache.org by Saint Germain <sa...@gmail.com> on 2013/10/18 11:07:57 UTC

Template customization

Hello,

When I was using Trac I tried customizing the template using:
http://trac.edgewall.org/wiki/TracInterfaceCustomization

At the end however, I ended up copying theme.html and rewriting it entirely.
By placing the copy in my Trac environment "templates" directory, it
seems to work automagically.

With Bloodhound it seems that the main template is in
bloodhound_theme.html but I haven't found how to supersede it ?

Basically I would like to integrate Bloodhound in my main site, so I have to:
  - add a top navigation bar: allowing to switch between different
part of the website
  - customize a little the navigation bar used to navigate in
Bloodhound (Wiki/Source/Tickets): in order to have a consistent
approach to navigation in my website.
  - move around the Search/New ticket boxes
  - move around the Login/Help/Guide/Preferences

For the moment I am replacing completely the original
bloodhound_theme.html and it works but I am breaking the layout/color.
I haven't yet check the css, but it seems that if you insert something
before the main body container, it breaks the layout. That makes me
wonder if there is a positional instructions in the CSS somewhere.

Can someone advise me on how to proceed to have a reliable and DRY approach ?

It seems that my need seems generic enough and there is no wiki page
on the subject, so maybe I can help writing one ?

Thanks,

Re: Template customization

Posted by Ryan Ollos <ry...@wandisco.com>.
On Mon, Oct 28, 2013 at 2:53 PM, Olemis Lang <ol...@gmail.com> wrote:

> On Mon, Oct 28, 2013 at 3:20 PM, Ryan Ollos <ry...@wandisco.com>
> wrote:
>
> > On Mon, Oct 28, 2013 at 12:59 PM, Olemis Lang <ol...@gmail.com> wrote:
> >
> > > On Sun, Oct 27, 2013 at 8:41 PM, Ryan Ollos <ry...@wandisco.com>
> > > wrote:
> > > [...]
> > >
> > > >
> > > > I suppose we could resolve your issue by adding an `id` to the first
> > > > div.container and modifying the CSS: .container:first-child ->
> > > > .container#id. It seems like the problem you report could be fairly
> > > common
> > > > when someone tries to embed Bloodhound within a site.
> > > >
> > >
> > > isn't div.container:first enough to select that element ?
> >
> >
> > :first is a jQuery selector, but I don't think it is a CSS selector.
> >
>
> sorry ... :first-child
> http://www.w3schools.com/cssref/sel_firstchild.asp


It doesn't work per the experimentation I've done and my understanding of
how :first-child works. Your proposal would work if :first-child selected
the first div.container element regardless of whether it had previous
siblings, but :first-child selects the element only if it is the first
child of its parent. The issue is that the .container element to which the
styling is applied is not the first-child of its parent once he inserts
additional content.

Re: Template customization

Posted by Olemis Lang <ol...@gmail.com>.
On Mon, Oct 28, 2013 at 3:20 PM, Ryan Ollos <ry...@wandisco.com> wrote:

> On Mon, Oct 28, 2013 at 12:59 PM, Olemis Lang <ol...@gmail.com> wrote:
>
> > On Sun, Oct 27, 2013 at 8:41 PM, Ryan Ollos <ry...@wandisco.com>
> > wrote:
> > [...]
> >
> > >
> > > I suppose we could resolve your issue by adding an `id` to the first
> > > div.container and modifying the CSS: .container:first-child ->
> > > .container#id. It seems like the problem you report could be fairly
> > common
> > > when someone tries to embed Bloodhound within a site.
> > >
> >
> > isn't div.container:first enough to select that element ?
>
>
> :first is a jQuery selector, but I don't think it is a CSS selector.
>

sorry ... :first-child
http://www.w3schools.com/cssref/sel_firstchild.asp

-- 
Regards,

Olemis - @olemislc

Re: Template customization

Posted by Ryan Ollos <ry...@wandisco.com>.
On Mon, Oct 28, 2013 at 12:59 PM, Olemis Lang <ol...@gmail.com> wrote:

> On Sun, Oct 27, 2013 at 8:41 PM, Ryan Ollos <ry...@wandisco.com>
> wrote:
> [...]
>
> >
> > I suppose we could resolve your issue by adding an `id` to the first
> > div.container and modifying the CSS: .container:first-child ->
> > .container#id. It seems like the problem you report could be fairly
> common
> > when someone tries to embed Bloodhound within a site.
> >
>
> isn't div.container:first enough to select that element ?


:first is a jQuery selector, but I don't think it is a CSS selector.

Re: Template customization

Posted by Olemis Lang <ol...@gmail.com>.
On Sun, Oct 27, 2013 at 8:41 PM, Ryan Ollos <ry...@wandisco.com> wrote:
[...]

>
> I suppose we could resolve your issue by adding an `id` to the first
> div.container and modifying the CSS: .container:first-child ->
> .container#id. It seems like the problem you report could be fairly common
> when someone tries to embed Bloodhound within a site.
>

isn't div.container:first enough to select that element ?

-- 
Regards,

Olemis - @olemislc

Re: Template customization

Posted by Ryan Ollos <ry...@wandisco.com>.
On Sun, Oct 20, 2013 at 4:18 PM, Saint Germain <sa...@gmail.com> wrote:

> On Fri, 18 Oct 2013 11:58:10 +0200, Saint Germain <sa...@gmail.com>
> wrote :
> > >> For the moment I am replacing completely the original
> > >> bloodhound_theme.html and it works but I am breaking the
> > >> layout/color. I haven't yet check the css, but it seems that if
> > >> you insert something before the main body container, it breaks the
> > >> layout. That makes me wonder if there is a positional instructions
> > >> in the CSS somewhere.
> > >>
> > >> Can someone advise me on how to proceed to have a reliable and DRY
> > >> approach ?
> > >>
> > >> It seems that my need seems generic enough and there is no wiki
> > >> page on the subject, so maybe I can help writing one ?
> > >>
> > >
> > > TracInterfaceCustomization discusses the preferred approach of using
> > > site.html for customizations like the one you describe. I'm not
> > > sure about the CSS issue you are experiencing.
> >
> > For the CSS issue, I just insert a navbar just after the <body> and it
> > seems to break the layout.
> > I will send an example this evening.
> >
>
> Hello,
>
> The reason for the CSS issue was easy to find in bloodhound.css:
> .container:first-child {
>   ...
> }
>
> So it is better not to insert something before the first container tag
> in bloodhound_theme.html.
>
> Regards,
>

I suppose we could resolve your issue by adding an `id` to the first
div.container and modifying the CSS: .container:first-child ->
.container#id. It seems like the problem you report could be fairly common
when someone tries to embed Bloodhound within a site.

Re: Template customization

Posted by Saint Germain <sa...@gmail.com>.
On Fri, 18 Oct 2013 11:58:10 +0200, Saint Germain <sa...@gmail.com>
wrote :
> >> For the moment I am replacing completely the original
> >> bloodhound_theme.html and it works but I am breaking the
> >> layout/color. I haven't yet check the css, but it seems that if
> >> you insert something before the main body container, it breaks the
> >> layout. That makes me wonder if there is a positional instructions
> >> in the CSS somewhere.
> >>
> >> Can someone advise me on how to proceed to have a reliable and DRY
> >> approach ?
> >>
> >> It seems that my need seems generic enough and there is no wiki
> >> page on the subject, so maybe I can help writing one ?
> >>
> >
> > TracInterfaceCustomization discusses the preferred approach of using
> > site.html for customizations like the one you describe. I'm not
> > sure about the CSS issue you are experiencing.
> 
> For the CSS issue, I just insert a navbar just after the <body> and it
> seems to break the layout.
> I will send an example this evening.
> 

Hello,

The reason for the CSS issue was easy to find in bloodhound.css:
.container:first-child {
  ... 
}

So it is better not to insert something before the first container tag
in bloodhound_theme.html.

Regards,

Re: Template customization

Posted by Saint Germain <sa...@gmail.com>.
On 18 October 2013 11:49, Ryan Ollos <ry...@wandisco.com> wrote:
>> When I was using Trac I tried customizing the template using:
>> http://trac.edgewall.org/wiki/TracInterfaceCustomization
>>
>> At the end however, I ended up copying theme.html and rewriting it
>> entirely.
>> By placing the copy in my Trac environment "templates" directory, it
>> seems to work automagically.
>>
>> With Bloodhound it seems that the main template is in
>> bloodhound_theme.html but I haven't found how to supersede it ?
>>
>
> I did some quick testing and the same mechanism seems to work fine. You
> should be able to copy `bloodhound_theme.html` into the environment's
> templates directory, and that copy of the template will supersede the
> version installed in the package templates directory. You can then edit
> `bloodhound_theme.html` however you'd like. However, note the warning about
> taking this approach:
> http://trac.edgewall.org/wiki/TracInterfaceCustomization#ProjectTemplates
>
> I believe it works this way for any template because of the order of the
> template directory paths:
> http://trac.edgewall.org/browser/tags/trac-1.0.1/trac/web/chrome.py?marks=625-627#L616
>

Oh I found the mistake: I have tried putting theme.html in templates
but it didn't work. So I ended up modifying bloodhound_theme.html
inplace but I haven't thought about putting bloodhound_theme.html in
templates (*slap forehead*).

Thanks !

>> Basically I would like to integrate Bloodhound in my main site, so I have
>> to:
>>   - add a top navigation bar: allowing to switch between different
>> part of the website
>>   - customize a little the navigation bar used to navigate in
>> Bloodhound (Wiki/Source/Tickets): in order to have a consistent
>> approach to navigation in my website.
>>   - move around the Search/New ticket boxes
>>   - move around the Login/Help/Guide/Preferences
>>
>> For the moment I am replacing completely the original
>> bloodhound_theme.html and it works but I am breaking the layout/color.
>> I haven't yet check the css, but it seems that if you insert something
>> before the main body container, it breaks the layout. That makes me
>> wonder if there is a positional instructions in the CSS somewhere.
>>
>> Can someone advise me on how to proceed to have a reliable and DRY
>> approach ?
>>
>> It seems that my need seems generic enough and there is no wiki page
>> on the subject, so maybe I can help writing one ?
>>
>
> TracInterfaceCustomization discusses the preferred approach of using
> site.html for customizations like the one you describe. I'm not sure about
> the CSS issue you are experiencing.

The way it works force me to completely rewrite the HTML: it is quite
difficult to just supersede one part.
But well the maintenance is not so difficult, so I guess it doesn't matter.

For the CSS issue, I just insert a navbar just after the <body> and it
seems to break the layout.
I will send an example this evening.

Thanks !

Re: Template customization

Posted by Ryan Ollos <ry...@wandisco.com>.
On Fri, Oct 18, 2013 at 2:07 AM, Saint Germain <sa...@gmail.com> wrote:

> Hello,
>
> When I was using Trac I tried customizing the template using:
> http://trac.edgewall.org/wiki/TracInterfaceCustomization
>
> At the end however, I ended up copying theme.html and rewriting it
> entirely.
> By placing the copy in my Trac environment "templates" directory, it
> seems to work automagically.
>
> With Bloodhound it seems that the main template is in
> bloodhound_theme.html but I haven't found how to supersede it ?
>

I did some quick testing and the same mechanism seems to work fine. You
should be able to copy `bloodhound_theme.html` into the environment's
templates directory, and that copy of the template will supersede the
version installed in the package templates directory. You can then edit
`bloodhound_theme.html` however you'd like. However, note the warning about
taking this approach:
http://trac.edgewall.org/wiki/TracInterfaceCustomization#ProjectTemplates

I believe it works this way for any template because of the order of the
template directory paths:
http://trac.edgewall.org/browser/tags/trac-1.0.1/trac/web/chrome.py?marks=625-627#L616


> Basically I would like to integrate Bloodhound in my main site, so I have
> to:
>   - add a top navigation bar: allowing to switch between different
> part of the website
>   - customize a little the navigation bar used to navigate in
> Bloodhound (Wiki/Source/Tickets): in order to have a consistent
> approach to navigation in my website.
>   - move around the Search/New ticket boxes
>   - move around the Login/Help/Guide/Preferences
>
> For the moment I am replacing completely the original
> bloodhound_theme.html and it works but I am breaking the layout/color.
> I haven't yet check the css, but it seems that if you insert something
> before the main body container, it breaks the layout. That makes me
> wonder if there is a positional instructions in the CSS somewhere.
>
> Can someone advise me on how to proceed to have a reliable and DRY
> approach ?
>
> It seems that my need seems generic enough and there is no wiki page
> on the subject, so maybe I can help writing one ?
>

TracInterfaceCustomization discusses the preferred approach of using
site.html for customizations like the one you describe. I'm not sure about
the CSS issue you are experiencing.