Chatbox in the header?

[JohnnyNorCal]

Hi There,

Every year I purchase the rights to a chatbox (shoutmix.com).

I would like to be able to insert this "chatbox" at the top of my website on every page (Homepage, Forums, etc)

My Question is this, Shoutmix gives me a code to insert into the html source code but I am not sure where to place the code to get it to show up where I want it. Where would I place this code?

I want my chatbox to appear just below the Main Logo in the heading area. Right now I have the vBulletin Logo but will be replacing this with a banner soon). Basically I want my chatbox to appear just below the vBulletin Logo, which would be just sitting above the Navigation Bar.

Most likely this code would be placed in the header area or headinline area in the "styles manager" of the admin cp. But there is a lot of code there and i'm not sure where exactly to place my code.

If anyone has some advanced coding experience I could use your help.

[borbole]

Originally Posted by JohnnyNorCal

Hi There,

Every year I purchase the rights to a chatbox (shoutmix.com).

I would like to be able to insert this "chatbox" at the top of my website on every page (Homepage, Forums, etc)

My Question is this, Shoutmix gives me a code to insert into the html source code but I am not sure where to place the code to get it to show up where I want it. Where would I place this code?

I want my chatbox to appear just below the Main Logo in the heading area. Right now I have the vBulletin Logo but will be replacing this with a banner soon). Basically I want my chatbox to appear just below the vBulletin Logo, which would be just sitting above the Navigation Bar.

Most likely this code would be placed in the header area or headinline area in the "styles manager" of the admin cp. But there is a lot of code there and i'm not sure where exactly to place my code.

If anyone has some advanced coding experience I could use your help.

It would help if you posted the code that they gave you and a screnshot of the area where you want to add it.

[Xencored]

Originally Posted by borbole

It would help if you posted the code that they gave you and a screnshot of the area where you want to add it.

Agreed

Just saying you want to add it Here etc.. not very helpful

[JohnnyNorCal]

I could see how that could help, sorry about that!

Here is the iframe code...

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="hotspotcafe" src="http://www6.shoutmix.com/?hotspotcafe" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?hotspotcafe">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

And attached is the area I want it to be located on all pages. Just below the logo and above the navbar in the header area. Obviously it will stretch my headers height.

I just need to know where to place the code?

[borbole]

Originally Posted by JohnnyNorCal

I could see how that could help, sorry about that!

Here is the iframe code...

<!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="hotspotcafe" src="http://www6.shoutmix.com/?hotspotcafe" width="160" height="400" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?hotspotcafe">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix -->

And attached is the area I want it to be located on all pages. Just below the logo and above the navbar in the header area. Obviously it will stretch my headers height.

I just need to know where to place the code?

At the header template find the following code:

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

And right after it, add this code:

<br /><br /><br /><br /><div><!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="hotspotcafe" src="http://www6.shoutmix.com/?hotspotcafe" width="160" height="100" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?hotspotcafe">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix --></div>

I changed the height because the way you had it, it would have blown the header way out of propotion. Here can be seen the end result witht he shoutbox right under the logo as you wanted it. Hope it helps.

[your24hourstore]

Originally Posted by borbole

At the header template find the following code:

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div

And right after it, add this code:

<br /><br /><br /><br /><div><!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="hotspotcafe" src="http://www6.shoutmix.com/?hotspotcafe" width="160" height="100" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?hotspotcafe">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix --></div>

I changed the height because the way you had it, it would have blown the header way out of propotion. Here can be seen the end result witht he shoutbox right under the logo as you wanted it. Hope it helps.

left off the closeing >

<div><a name="top" href="{vb:raw vboptions.forumhome}.php{vb:raw session.sessionurl_q}" class="logo-image"><img src="{vb:stylevar titleimage}" alt="{vb:rawphrase x_powered_by_vbulletin, {vb:raw vboptions.bbtitle}}" /></a></div>

[borbole]

Thanks for correcting my typo Updated the post with the closing angel bracket.

[JohnnyNorCal]

Thanks so much for your help, I really appreciate it.

Most likely I'll be changing the dimensions a bit, the dimensions I posted originally were just the default set.

Now what if I wanted to center it?

I'm not sure if I want the chat box to be centered with absolute dimensions or if I want it to be liquid and stretch with the users browser size. But if I did want absolute dimensions, is there a way to center it?

Thanks again guys, your a real help!

[borbole]

Originally Posted by JohnnyNorCal

Thanks so much for your help, I really appreciate it.

Most likely I'll be changing the dimensions a bit, the dimensions I posted originally were just the default set.

Now what if I wanted to center it?

I'm not sure if I want the chat box to be centered with absolute dimensions or if I want it to be liquid and stretch with the users browser size. But if I did want absolute dimensions, is there a way to center it?

Thanks again guys, your a real help!

Yes, of course you can center it. Use this code to do it:

<br /><br /><br /><br /><div style="text-align:center"><!-- Begin ShoutMix - http://www.shoutmix.com -->
<iframe title="hotspotcafe" src="http://www6.shoutmix.com/?hotspotcafe" width="160" height="100" frameborder="0" scrolling="auto">
<a href="http://www6.shoutmix.com/?hotspotcafe">View shoutbox</a>
</iframe>
<br /><a href="http://www.shoutmix.com" title="Get your own free shoutbox chat widget at ShoutMix!">ShoutMix chat widget</a><br />
<!-- End ShoutMix --></div>