| ramesh_umk3 |
11-19-2013 11:00 PM |
Show/Hide Subforums
1 Attachment(s)
Show/Hide Subforums & Save Page Load Time...!
Hello All,
Hope this mod is not present already and this mod will be useful to save page load time for busy/huge forums like ours.
Lets Start :)
GOTO --> Style Manager --> forumhome_forumbit_level1_post
Find:
Code:
{vb:raw forum.subforums}
Replace:
Code:
<div class="divspoiler">
<input type="button" class="mc" value="→ MORE SUBFORUMS" onclick="if (this.parentNode.nextSibling.childNodes[0].style.display != '') { this.parentNode.nextSibling.childNodes[0].style.display = ''; this.value = '↑ HIDE SUBFORUMS'; } else { this.parentNode.nextSibling.childNodes[0].style.display = 'none'; this.value = '↓ SHOW SUBFORUMS'; }" />
</div><div><div class="spoiler" style="display: none;">
<div style="padding:1px;">{vb:raw forum.subforums}</div>
</div></div>
Button Style CSS: [ Add below code any were in additional.css template]
Code:
.mc {
display: inline-block;
margin-top: 8px;
background: #f9f9f9;
background: -moz-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: -webkit-gradient(linear,left top,left bottom,color-stop(0%,#f9f9f9),color-stop(100%,#eaeaea));
background: -webkit-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: -o-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: -ms-linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
background: linear-gradient(top,#f9f9f9 0,#eaeaea 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#F9F9F9',endColorstr='#EAEAEA',GradientType=0);
height: auto;
border: 1px solid #cacaca;
border-radius: 3px;
padding: 7px;
text-align: left;
line-height: 23px;
box-shadow: inset 0 1px 2px white,0px 1px 1px rgba(0,0,0,0.12);
padding-left: 9px;
font-weight: bold;
text-transform: uppercase;
color: #6f6f6f;
text-shadow: 0 1px white;
margin-top: 10px;
cursor:pointer;
-moz-border-radius: 5px;
-webkit-border-radius: 5px;
-khtml-border-radius: 5px;
border-radius: 5px;
}
.mc:hover {
background: #fefefe;
background: -moz-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #fefefe), color-stop(100%, #fbfbfb));
background: -webkit-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
background: -o-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
background: -ms-linear-gradient(top, #fefefe 0, #fbfbfb 100%);
background: linear-gradient(top, #fefefe 0, #fbfbfb 100%);
filter: progid:DXImageTransform.Microsoft.gradient(startColorstr='#FEFEFE', endColorstr='#FBFBFB', GradientType=0);
}
.mc:active {
box-shadow: inset 0 1px 5px rgba(0, 0, 0, 0.40), 0px 1px 1px rgba(0, 0, 0, 0.12);
}
Also follow same procedure in forumhome_forumbit_level2_post template
LIVE DEMO
Thanks All |
More Information