Ad_header, how to position banner?

[Richard Peters]

Hi all, I hijacked a thread in the pre-sales section with this question but figured it is better suited here.

I have placed a banner in the Ad_header template, and thanks to Brogans help have applied a float:right to get it to sit within the header rather than above it, however I now need to get it to sit within the middle of the header space as well, rather than being stuck at the top of the header, as per the attached image.



So basically, I want it half way between the ACP link and the Log Out link below.

Any help appreciated!

 

[Paul B]

What you are attempting to do is a customisation.

As I have said, you will need to use media queries or .js to deal with different widths and banners.

 

[xeanyngoat]

I thought XF was responsive?

 

[Paul B]

It is.

Any additional elements you add, you need to make sure they are also responsive.

Adding a fixed width banner image is always going to cause issues in a responsive design once the available width is smaller than the banner width.

 

[xeanyngoat]

or in this case banner and logo.

So essentially if people put a banner ad and logo combination at the top that combined is wider than a small resolution then bam, no go?

 

[hardwareguru]

Thanks for the help on this...

i now have the banner on the right using rotating ads 2.0
http://xenforo.com/community/resources/bd-rotating-ads.292/

Edit Template: rotating_ads_slider

<xen:require js="js/RotatingAds/nivo-slider/jquery.nivo.slider.pack.js" />
<xen:require js="js/RotatingAds/slider.js" />

<xen:set var="$sliderStyle">margin: 20px 0px auto;<xen:comment>
    </xen:comment><xen:if is="{$slider.width}"> width: {$slider.width}px;</xen:if><xen:comment>
    </xen:comment><xen:if is="{$slider.height}"> height: {$slider.height}px;</xen:if><xen:comment>
</xen:comment></xen:set>


<div class="slider-wrapper theme-default" style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
    <div id="{$sliderId}" class="bdRotatingAds_Slider nivoSlider" style="{$sliderStyle}">
        <xen:foreach loop="{$slider.slides}" value="$slide">
            <a href="{$slide.link}"><img src="{$slide.image}" /></a>
        </xen:foreach>
    </div>
</div>

Maybe someone can also use it.

PS: i set the location in this addon manualy to: ad-header > above

HWG

 

[51463]

Thanks for the help on this...

i now have the banner on the right using rotating ads 2.0
http://xenforo.com/community/resources/bd-rotating-ads.292/

Edit Template: rotating_ads_slider

<xen:require js="js/RotatingAds/nivo-slider/jquery.nivo.slider.pack.js" />
<xen:require js="js/RotatingAds/slider.js" />

<xen:set var="$sliderStyle">margin: 20px 0px auto;<xen:comment>
    </xen:comment><xen:if is="{$slider.width}"> width: {$slider.width}px;</xen:if><xen:comment>
    </xen:comment><xen:if is="{$slider.height}"> height: {$slider.height}px;</xen:if><xen:comment>
</xen:comment></xen:set>


<div class="slider-wrapper theme-default" style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: middle">
    <div id="{$sliderId}" class="bdRotatingAds_Slider nivoSlider" style="{$sliderStyle}">
        <xen:foreach loop="{$slider.slides}" value="$slide">
            <a href="{$slide.link}"><img src="{$slide.image}" /></a>
        </xen:foreach>
    </div>
</div>

Maybe someone can also use it.

PS: i set the location in this addon manualy to: ad-header > above

HWG

I am confused about how to do this. I don't understand where you put the code.

I installed bd Rotating Ads.
Then i went into + Widget
Renderer: Advanced Html (without wrapper)
HTML:
<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: right">
<img style="vertical-align: middle" src="This is where i put the link to my banner" />
</div>


Position: hook:header_logo
Display Order: 1



The banner goes to the right and it works fine but then this happens when i make the window smaller.

 

[cdub]

I am confused about how to do this. I don't understand where you put the code.

I installed bd Rotating Ads.
Then i went into + Widget
Renderer: Advanced Html (without wrapper)
HTML:
<xen:hook name="ad_header" />
<div style="display: block; float: right; line-height: {xen:calc '@headerLogoHeight - 4'}px; *line-height: @headerLogoHeight; height: @headerLogoHeight; vertical-align: right">
<img style="vertical-align: middle" src="This is where i put the link to my banner" />
</div>


Position: hook:header_logo
Display Order: 1



The banner goes to the right and it works fine but then this happens when i make the window smaller.

View attachment 79894

Yes I'm having the same problem on my testing site.

 

[Paul B]

Questions specifically related to that add-on should be posted in the resource thread.