Quote:
Originally Posted by Juggernaut
Love this mod, couldn't get the vbadvanced module to work, but it works wonderfully in the forum sideblock.  |
The CMS and vBA CMPS give me a headache lol, what couldn't you get working Countdown or layout?) and I'll try and reproduce it.
Quote:
Originally Posted by Crxssfade
Hey there, Gemma, great mod. Thank you very much.
Would you be able to explain how to achieve a look like this on the FORUMHOME template? Including what I need to edit.
Thanks!
|
The attached image is from the CMS page (needs a modified grid) not FORUMHOME, you can have it display on the forum index by creating a table and adding the countdown code within it.
On my own site I did it this way. In the FORUMHOME template find:
Code:
<!-- END content -->
{vb:raw template_hook.forumhome_wgo_pos5}
</div>
<!-- end what's going on box -->
Above that add:
Code:
<div id="wgo" class="collapse wgo_block block">
<script language="Javascript" type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script language="Javascript" type="text/javascript" src="countdown/js/misc.js"></script>
<center><h2 class="blockhead">TABLE TITLE</h2></center>
<div class="blockbody formcontrols floatcontainer">
<table align="center">
<tr>
<td>
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
$('#complete_info_message').slideDown();
}
});
});
</script>
<div align="center">LINK TO IMAGE</div>
<div id="countdown">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown2').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00
},
// onComplete function
onComplete: function() {
$('#complete_info_message2').slideDown();
}
});
});
</script>
<div align="center">LINK TO IMAGE</div>
<div id="countdown2">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="info_message" id="complete_info_message2" style="display: none;">
Countdown Complete
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown3').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});
</script>
<div align="center">LINK TO IMAGE</div>
<div id="countdown3">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</div>
</div>
</div>
</div>
<div class="underblock"></div>
</li>
</center>
</td>
<td class="blocksubhead" align="{vb:stylevar.left}" valign="top">
<center>
<div><li>
<div class="block smaller">
<div class="widget_content blockbody floatcontainer">
<div id="block_html_{vb:raw blockinfo.blockid}" class="blockrow">
<link rel="Stylesheet" type="text/css" href="countdown/style/main.css"></link>
<script type="text/javascript">
$(document).ready(function() {
$('#countdown4').countDown({
targetDate: {
'day': 00,
'month': 00,
'year': 0000,
'hour': 00,
'min': 00,
'sec': 00,
}
});
});
</script>
<div align="center">LINK TO IMAGE</div>
<div id="countdown4">
<div class="dash first weeks_dash">
<span class="dash_title">Weeks</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash days_dash">
<span class="dash_title">Days</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash hours_dash">
<span class="dash_title">Hrs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash minutes_dash">
<span class="dash_title">Mins</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
<div class="dash seconds_dash">
<span class="dash_title">Secs</span>
<div class="digit">0</div>
<div class="digit">0</div>
</div>
</div>
</li></center></td></tr></table></center></div>
I'm not supporting that though so you'd be best to try it out on a test site or using a test style.
More Information