Collapse the "What's Going On?" Block
Mod Version: 1.00, by gezuvor
| vB Version: 4.1.x | Rating:  (6 votes - 5.00 average) |
Installs: 25 |
| Released: 30 Jan 2012 | Last Update: Never | Downloads: 0 |
 Not Supported
 Template Edits
Re-usable Code
Translations
|
||
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:
Replace with:
Open additional.css and add this to the bottom (or where it seems to best fit):
That's it, you're done!
I hope this is useful and I welcome feedback!
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:
Code:
<h2 class="blockhead">{vb:rawphrase whats_going_on}</h2>
<div class="blockbody formcontrols floatcontainer">
Code:
<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):
Code:
.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};
}
I hope this is useful and I welcome feedback!
Download
No files for download.
Screenshots
