Forum Home Enhancements - Collapse the "What's Going On?" Block

Hi all,

I was struggling with a way to add the collapse button to my What's Going On? block and found an Article by cellarius that got me on the right track.

That was a good start, but I am a little OCD and did some additional fiddling to make it as vB-compliant as possible. Once I had it done and tested, I figured I would share with the rest of the community with the expectation that somebody else would want to use it to.

There is one edit to FORUMHOME and some new CSS, but that is it.

I performed this modification on a stock 4.1.10 installation, but it should work on any of the 4.1.x versions. If you have a custom theme/skin, some additional work may be required but the concept is the same...

Anyway, here goes!

In FORUMHOME, look for:

		<h2 class="blockhead">{vb:rawphrase whats_going_on}</h2>
		<div class="blockbody formcontrols floatcontainer">

Replace with:

		<h2 class="blockhead">
		<span>{vb:rawphrase whats_going_on}</span>
		<vb:if condition="!$show['collapsable_forums']">
			<a class="collapse" id="collapse_whats_going_on" href="{vb:raw relpath}#top"><img src="{vb:stylevar imgdir_button}/collapse_40b.png" alt="" /></a>
		</vb:if>
		</h2>
		<div id="whats_going_on" class="blockbody formcontrols floatcontainer">

Open additional.css and add this to the bottom (or where it seems to best fit):

.wgo_block .blockhead a.collapse {
	position: absolute;
	top: {vb:math {vb:math {vb:math {vb:stylevar padding}+{vb:math  {vb:stylevar mid_fontSize}*{vb:stylevar line_height}}-13}/2}+1};
}

.wgo_block .blockhead a.collapse img {
/* values are based on the image */
	position:absolute;
	{vb:stylevar right}: -{vb:math {vb:stylevar padding} * 0.6};
	display:block;
	width:13px;
	height:13px;
	overflow:hidden;
	float: {vb:stylevar right};
	clear: {vb:stylevar left};
}

That's it, you're done!

I hope this is useful and I welcome feedback!

[Calystos]

If anyone uses the Nexia's Forum Sidebar Everywhere product make sure to also edit the FORUMHOME_NEX_SIDEBAR template too! Else it'll be ignored and the WGO box will use the non-collapsible format.

Confirmed to work on vB v4.2.0, working great, thanks!

[faisaly.com]

Works perfect vb4.1.11 thanks for the template edit...

[NTT]

Works perfect vb4.2.0 PL2

[Naijasite]

how do i make it to collapsed by default during page load. i noticed i have to click on the collapse button before it will collapsed.

[Dorgham]

Good job

[Naijasite]

how do i make it collapse on page load for every user by default?

[VonDoom]

Originally Posted by Naijafinder

how do i make it collapse on page load for every user by default?

+1 for this request.. Im using sidebar blocks to replace most of WGO but i didnt want to remove it permanently so loading it collapsed would be a plus under such circumstances..

[stevieb]

I found the button to collapse too high, so I literally added the following in the additionalcss which aligns it perfect in the middle of the block:

top:-5px;

Full code (additionalcss)

.wgo_block .blockhead a.collapse {
	position: absolute;
	top: {vb:math {vb:math {vb:math {vb:stylevar padding}+{vb:math  {vb:stylevar mid_fontSize}*{vb:stylevar line_height}}-13}/2}+1};
}

.wgo_block .blockhead a.collapse img {
/* values are based on the image */
	position:absolute;
	{vb:stylevar right}: -{vb:math {vb:stylevar padding} * 0.6};
	display:block;
	width:13px;
	height:13px;
	overflow:hidden;
        top:-5px;
	float: {vb:stylevar right};
	clear: {vb:stylevar left};
}