View Full Version : How to add banner beside logo using banner manager plugin?

02-05-2008, 06:34 AM

could you please tell me:
1. how to put a banner beside logo using a banner manager plugin?
2. where to put <vte:include banner> inside the header template?
3. what is the proper size (pxl) for logo and banner so it would'nt damage the header layout?

thanks in advance

02-05-2008, 02:43 PM
Since the header is an image, and not a background, any banner inserted next to the header (in the template) would show up below it.

This would not be something you do with the template, but rather with CSS. You'd have to use the Style or Layout CSS to position the banner where you need it. You'd create a new style for the banner code, and layer it above the header image with a position to the right/top.

02-09-2008, 03:59 PM
thanks a lot northlandadv for your info,

i'm kinda a new in css
perhaps you could share the css code to position the banner exactly at the right top
but if it's too much to ask, just ignore i'm asking :)

02-09-2008, 04:55 PM
There's more than one way, some better than others. To be honest it would be more complex that just a quick bite here because I'd have to experiment with your actual site, and it would require some minor mods of Vivvo templates/CSS. I haven't tried to do this with the banner manager plug in, but I imagine it's like any other thing. If you used the method I suggested above, there's the possiblity that the repositioned banner would overlap some of your menu items.

The concept is to surround the banner code with a "DIV" tag. This DIV tag would be assigned in the CSS stylesheet to position the banner. You would place the banner code (with the new div tag) inside the header area of Vivvo. Unfortunatley, the Vivvo header is an image, and this would have to be redone as a CSS backround (in the stylesheet.) Then you could drop the banner code into the header DIV and float it right. Also you'd need to increase the Z-index to make sure it layers over the background image.

If this sounds complicated, then you can see why it's not a basic thing to do, and requires minor custom coding.

05-06-2008, 11:16 PM
I have just purchased the banner manager and the first place I want to put a banner is in the prime spot next to the logo.

Why are there no instructions on how to do this, any site selling advertising will need the space to sell prime advertising, but it appears that a good knowledge of CSS is required before hand.

Very disappointed that this is not easier and has no instructions to at least help the non css programmers that are your customers.

If anyone could shed some light on this, it would be very much appreciated, or as otherwise, the banner manager tool is very much redundant from my perspective.

05-06-2008, 11:37 PM
Huh? Vivvo is a great system, but it's not an instructional manual on CSS. If you want to modify templates, you need a working knowledge of HTML and CSS. There is an entire section of developer documents available on the Vivvo site for those who are prepared to modify templates. http://www.vivvo.net/doc/v4/developer_manual/

I think I've already shed some light on this, right in this topic. If this is not something you can do on your own, then modifying your templates will likely cause more trouble for you than having someone else do it.

Anyway, the entire header area of the basic Vivvo template is a large image:


In order to get a banner up there, you'll either have to:

1. Alter the CSS to reposition the banner out of its ordinary position. You'd need to do this with a new DIV which will specify a relative position in the correct location. You have to be careful, though, that you don't cross a bunch of other DIV's or you may block other links.

2. Alter the template so that the header is a background image. This way you can put a banner over it.

I know this may sound complicated, and it really is for someone who does not work with CSS/HTML but this is the best I can offer.

My suggestion is to use this forum to request modifications. I think that might help :)

05-06-2008, 11:47 PM
Thanks for your swift reply.

I have basic html knowledge, but I've never played with css, so this could be hours of broken templates and the worry of cross browser compatibility issues.

My point is that the header could by default be broken into sections making it easier to modify, although I don't understand css, so don't know how possible that is.

From what I have seen of the banner manger, it's a very good tool, but unless your able to implement it where you want without having to learn multiple languages, it becomes redundant for a user like myself.

The area next to the logo, is a prime spot that many users of vivvo will want to use, so maybe the coders here could provide a tutorial on how to do this as I'm sure I'm not the only one that will benefit.

Again, I really appreciate your post and how helpful you always are.

Thank you :)

05-07-2008, 12:05 AM
I see your point, and agree. This is a good suggestion for version 4.1 (hint hint.) Just some re-coding and it would be simpler for the users.

In the meantime, there are other areas for banners as well and they are very accessible and easy to insert the banner code. Some examples are:

1. Top of the body (very good area)
2. Anywhere in the right or left columns using a square banner

You're not going to do much damage to templates experimenting with this. If you've got a working knowlegde of HTML it should be fairly straightforward. The Vivvo template object, etc, are all semantic so their functionality is very obvious.

For example, look in the default template for the home page, article, or category. If you scroll toward the bottom you'll see all the code areas for the right column. Just pop in the banner code and it'll work like a charm.

05-07-2008, 12:16 AM
And at the risk of unadultered soliciting, this is something we will be providing as an alacarte service when CustomVivvo! opens. Banner insertion in header.

05-07-2008, 08:03 AM
My point is that the header could by default be broken into sections making it easier to modify

I see your point, and agree. This is a good suggestion for version 4.1 (hint hint.) Just some re-coding and it would be simpler for the users.

I couldn't agree more with both of you, and we'll definitely try to place banner hot-spots in default template and theme for 4.1 release. :)

05-07-2008, 08:23 AM
Thanks for the great suggestions northlandadv,

The other areas shouldn't be an issue as I have worked in those areas before using a box.tpl file to contain the html. There are tutorials on here that teach you how to do this. ;)

I'm aware the coders here are very busy, and that providing a basic tutorial to integrate the banner code in the header next to the logo may take an hour or so for them to create, but I do think it's a very important tutorial as most of us using the banner manager will want to display banners in that prime position.

A quote from the manual
"the code for including zones on Vivvo website is automatically generated and you only need to paste it on desired place in you template files."

This is not true with the header template, I can't paste it in the desired place without having knowledge of CSS from what I can make out.

The banner manager is very much worth the $30, but it really shouldn't be so difficult to integrate it in the most common place of any website.

I'm sure you will agree, this is a much needed request and I hope you can provide a swift solution for me.


05-08-2008, 08:25 AM
Could one of the techi team take a moment to reply to my last post in this thread please.


05-08-2008, 01:45 PM
Simon, I'd be happy to do this as a custom job before CustomVivvo! opens for business. If you'd like to PM me we can discuss the details.

10-24-2008, 06:02 AM
First: Insert div to /box/header.tpl (above dhtml_menu.tpl)
<div class="banner"><a href="http://www.advsite.com" target="_blank"><img src="/themes/tpl_xxxx/img/image.gif" alt="advirtising" /></a></div>

Second: Insert at the end of your style.css

.banner {
position: absolute;
top: 24px;
right: -1px;
font-family: Verdana, Arial, Helvetica, sans-serif;
font-size: 10px; text-transform: lowercase;
width: 400px;
text-align: center;


.banner a img { vertical-align: text-bottom; margin-right: 5px; }

It needs adjustment for you top: and right: to fit your header

10-24-2008, 02:33 PM

could you please tell me:
1. how to put a banner beside logo using a banner manager plugin?
2. where to put <vte:include banner> inside the header template?
3. what is the proper size (pxl) for logo and banner so it would'nt damage the header layout?

thanks in advance

I did it, what I did was a bit easier though, I just took the header.gif file and cut it in half (roughly), then I added a table with 2 cells in the header template, put the ad code in the cell on the right and the new header.gif on the cell on the left, made the padding 0 etc... and it works nicely.

10-25-2008, 02:12 AM
Thanks Tani, it works perfectly ;)

10-26-2008, 01:12 AM
You welcome.

10-28-2008, 08:56 PM
I have a problem when trying to run two banners in header.tpl

<div class="header120"> <vte:load module="box_banners" search_zone_id="8" /> </div>
<div class="headerbanner"> <vte:load module="box_banners" search_zone_id="6" /></div>

Only the 2nd banner is clickable even though both banners have links.

Anyone have any ideas why this would be?


10-29-2008, 09:42 PM
this line of code is from vivvo one templates but i assume that is what you want to do on left is the logo and the rest is your 728x90 is your advt

for example look at the demo of vivvo one

<div class="head">
<div class="header_image"><a href="{VIVVO_URL}">home<img src="{VIVVO_THEME}img/logo.png" alt="Home" /></a></div>
<div class="header_banner"><a href="#"><img src="{VIVVO_THEME}img/banners/728_90_ad.gif" alt="Advertisement" /></a></div>

well depending on your templates, do change the div ids, just change the previous code to this code and change the div id too, based on your themes.

10-30-2008, 02:19 AM
Hi Mahong, Thanks for your help with this, but I was looking for something a bit different.

I'll try and explain better below

This is all the code from the header.tpl
<div id="header"> <vte:include file="{VIVVO_TEMPLATE_DIR}box/pages.tpl" />
<div class="header_image"><img src="{VIVVO_THEME}img/header.jpg" alt="header" />

<div class="header120"> <vte:load module="box_banners" search_zone_id="8" /> </div>

<div class="headerbanner"> <vte:load module="box_banners" search_zone_id="6" /></div>

<vte:include file="{VIVVO_TEMPLATE_DIR}box/dhtml_menu.tpl" /> <vte:include file="{VIVVO_TEMPLATE_DIR}box/search.tpl" />

These 2 lines are utilising the banner manager code
<div class="header120"> <vte:load module="box_banners" search_zone_id="8" /> </div>

<div class="headerbanner"> <vte:load module="box_banners" search_zone_id="6" /></div>

Both banners display fine to the right of the logo, but only one is a clickable banner although both are set-up with each banner pointing to a URL.

I would like to continue to use the banner manager to display both banners next to the logo, but if for what ever reason it doesn't work I suppose I will have to hard code one of them.

If anyone has a solution to my problem It would be great to hear it,


10-30-2008, 11:25 AM
Can you please share your URL with us? The problem would then be much easier to solve.
And why do you have an extra </vte:if> in your code?

10-31-2008, 12:54 AM
On the left there is the logo in the header and on the right, there is adwords, in between the two I'm trying to place a small banner.

The code below show the banner managers code for both the adwords and small banner.

Whichever line of code is put first will not be linked to the specified url within the banner manager.

<div class="header120"> <vte:load module="box_banners" search_zone_id="8" /> </div>

<div class="headerbanner"> <vte:load module="box_banners" search_zone_id="6" /></div>

I hope this gives you more insight to the problem.

10-31-2008, 10:14 AM
Sorry but this is a bit too complicated in order to be solved over the forums. The problem can be so many places. The best thing i can recommend is to submit a support ticket and then the exact problem can be pinpointed, and solved.

10-31-2008, 12:03 PM
Thanks for looking milkins

10-31-2008, 02:48 PM
no problem, just wish it was more meaningful :)