include image across the top of every page

[Neil E.]

I'm looking to add a graphic across the top of every page. It would sit immediately below the moderator bar (above everything else when the moderator bar is not present). I've experimented with the PAGE_CONTAINER template without success. I tried to insert the image directly at the beginning of headerProxy.

I also tried to include a new template "forum_image_top", but the location is never correct. Here is the content:

<div class=imageTop><img src="http://www.odsc.on.ca/.xenforo_added_Neil/banner_ads/RRTA1100.jpg" />
</div>

The image shows up fine, it's the location that's the problem.

 

[Brandon Sheley]

There are ad_ location templates, I'd use those.

(eg..ad_header)

 

[Neil E.]

Good suggestion, but I'm already using that template for rotating banner ads. I tried to include this new image in that template, however it wouldn't locate properly. I figured a new location prior to the header would be better.

 

[Neil E.]

I can put <xen:include template="forum_image_top" /> in the logo_block template and get the location OK, but then the top breadbox is pushed down behind the navbar. (Or this could be from the mainContainer/mainContent moving up).

 

[Neil E.]

I can sort of fix things with some CSS.

.mainContainer
{
margin-top: 40px !important;
}

This pushes the content down the same amount as the added image height pushed the breadbox. I'm just not sure it's the best way of handling the problem and it only works on the forum index at this point. http://www.odsc.on.ca/.xenforo/index.php

 

[Neil E.]

This works:

header template

<xen:hook name="header">
<div id="header">
<xen:include template="forum_image_top" />
<xen:include template="logo_block" />
<xen:include template="navigation" />
<xen:if is="{$canSearch}"><xen:include template="search_bar" /></xen:if>
</div>
</xen:hook>

CSS

#content
{
margin-top: 40px !important;
}
/* ~move content down to match height of new forum_image_top~ */

.imageTop
{
height: 40px !important;
width: 1100px !important;
float: left !important;
margin-left: 70px !important;
}
/* ~ODSC RRTA image at top of header~ */

.rotatingAd
{
float: right !important;
height: 99px !important;
margin-top: 40px !important;
margin-right: 120px !important;
border-top: 1px solid transparent !important;
border-right: 1px solid transparent !important;
border-bottom: 1px solid transparent !important;
border-left: 1px solid transparent !important;
border-radius: 10px 10px 10px 10px !important;
overflow: hidden !important;
}