gezuvor
01-29-2012, 11:00 PM
Hi all,
I was struggling with a way to add the collapse button to my What's Going On? block and found an Article (https://vborg.vbsupport.ru/showthread.php?t=221565) by cellarius (https://vborg.vbsupport.ru/member.php?u=109187) 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!
I was struggling with a way to add the collapse button to my What's Going On? block and found an Article (https://vborg.vbsupport.ru/showthread.php?t=221565) by cellarius (https://vborg.vbsupport.ru/member.php?u=109187) 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!