[TEMPLATE] - Move Shoutbox to Under Menu W/ Menu Button

[Former Member]

This will move your shoutbox to the top, and let you add a button to the menu.
The button is needed, as the shoutbox is in a hidden div, that opens when the button is clicked.

LIVE DEMO

---

GLOBAL HEADER

<script type="text/javascript">

$(document).ready(function(){

       $(".slidingDiv").hide();
       $(".show_hide").show();

   $('.show_hide').click(function(){
   $(".slidingDiv").slideToggle();
   });

});

</script>

---

GLOBAL FOOTER

<script type="text/javascript">

$(document).ready(function() {
     $('#move-shoutbox').append($('div.shoutbox.container.full'));
});

</script>

---

STYLE SHEET - At Bottom

.slidingDiv {
   height: 460px;
   padding:20px;
   margin-top:10px;
overflow: auto;
}

.show_hide {
   display:none;
}

---

WHERE WANT BUTTON - Forum Wrapper after the {/foreach} and before the </ul> for the navigation menu.

<li><a href="javascript:void(0);" class="show_hide">Shoutbox</a></li>

If want the shoutbox hidden from guests, use this, instead: (Thanks to aRMY83 for this part.

{if $[current_user.is_member]}
<li><a href="javascript:void(0);" class="show_hide">Shoutbox</a></li>
{/if}

---

WHERE WANT SHOUTBOX AT - After </header>

<div align="center">
<div class="slidingDiv"><div id="move-shoutbox"></div></div>
</div>

[dogsbowlucks]

Hi, Just looking at your post and would love to be able to implement this style of shout box on my forum.
Sorry if i appear stupid, but where would i start as i am new and green to proboards.
I have gone through most of my settings but cannot get it to kick in.
Until recently i was running a few Wordpress based sites but they died a death.
Look forward to hearing from you, even if it's to direct me to the right forum.

Thanks

[Former Member]

dogsbowlucks

1. Why did you quote the post? Then not post anything with it, and do a double post? LOL

2. The edits tell where to put them.

To get to the Global Header and Footer: Admin Home > Structure > Headers & Footers > Global Header & Footer

To get to Forum Wrapper: Admin Home > Themes > Layout Templates > Forum Wrapper

[dogsbowlucks]

Thanks BK. Told you i was Green around the edges.

Managed to get it to run, sort of. I have had to de select the Dr Who template i was using and go back to the proboards default one.

Everything is now in place with one minor issue.

Every time i click on the Shoutbox icon the box opens up and closes within a second.

Any pointers please?

Not sure about the Style Sheet at Bottom bit. dohh

[Aeryes]

Okay so I've done all of this, and when I click preview changes everything works like a dream, but then when I go to my forum the shoutbox is back at the bottom, no button no nothing.

I went and double checked all of the code and everything is set there and as it was stated to do above... What am I missing >.<

[Former Member]

You did hit save, correct? And for the theme you are viewing the site with, right, Aeryes?

A link to your forum, would be good.

[Aeryes]

fairytail-uprising.freeforums.net/
Voila and yes I did save everything (that was my first thought too)

[Former Member]

Aeryes, you indeed completed all 5 steps above?
I'm unable to really see much there, as that would require Admin rights to look, but I do want to clarify that all steps were taken?

[Aeryes]

Yep, took me a while to figure out this part though so maybe that is the issue?

STYLE SHEET - At Bottom

.slidingDiv {
height: 460px;
padding:20px;
margin-top:10px;
overflow: auto;
}

.show_hide {
display:none;
}

Do I just slap that at the very bottom after all the rest of the code? or is there a spot in the code it should be going into

[Former Member]

Aeryes, as stated above the code: STYLE SHEET - At Bottom

Means, at the bottom of your style sheet.

Advanced Styles & CSS

[Former Member]

Also, Aeryes, you have set up a button on the menu for it, right?

[Aeryes]

All ive done is exactly what is listed above

[Former Member]

Aeryes, seems like this issue mysteriously fixed itself for you.

[Aeryes]

Thanks a million Burke! after your comment I think I know what was wrong XD <3

[Former Member]

Aeryes, none of the code in Forum Wrapper, and the style sheet css, were inserted.
That what was wrong.
I added it all, and there it went.