Icy Phoenix

phpBB 3 MODS And Styles (Not Compatible With phpBB 3.1) - Simple Countdown - Working Demo :)

mort [ Fri 31 Aug, 2012 15:29 ]
Post subject: Simple Countdown - Working Demo :)

Who wants to finish this?

As I don't really feel like installing phpBB and MG themes just to finish it.

It's only the paths you have to change, and add some block mark-up in the countdown.html for the theme you are using.
You will also no doubt have to edit the one and only image path in the main.css.

COPY countdown.html to your style/template/countdown.html
COPY the countdown folder and contents to: root/countdown/*.*

In your style/template/

OPEN:

overall_header.html

FIND:

</head>
<body class="{S_CONTENT_DIRECTION}">

BEFORE ADD:

<script type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>
<script type="text/javascript" src="countdown/js/jquery.lwtCountdown-1.0.js"></script>
<script type="text/javascript" src="countdown/js/add-date.js"></script>
<link rel="stylesheet" type="text/css" href="countdown/style/main.css" />

##########################

Change the "Countdown Dates" in root/countdown/js/add-date.js

##########################

ADD this var to wherever you want the countdown clock to appear in another template.html or block etc.



Joshua203 [ Fri 31 Aug, 2012 19:11 ]
Post subject: Re: Simple Countdown - Unfinished

Well sofar...

countdown.html (give a br at top and/or bottom if needed):

Code: [Hide] [Select]

<div><div class="tbl-h-l"><div class="tbl-h-r"><div class="tbl-h-c"><div class="tbl-title"><h4>Something Here</h4></div></div></div></div>

		<table width="100%" class="tablebg" cellspacing="1" >

			<tr>

				<th>We're counting down</th>

			</tr>

			<tr>

				<td class="row1" align="center">

<div id="dash_container">

		<!-- Countdown dashboard start -->

		<div id="countdown_dashboard">

			<div class="dash 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">hours</span>

				<div class="digit">0</div>

				<div class="digit">0</div>

			</div>

			<div class="dash minutes_dash">

				<span class="dash_title">minutes</span>

				<div class="digit">0</div>

				<div class="digit">0</div>

			</div>

			<div class="dash seconds_dash">

				<span class="dash_title">seconds</span>

				<div class="digit">0</div>

				<div class="digit">0</div>

			</div>

		</div>

		<!-- Countdown dashboard end -->

</div>

				</td>

			</tr>

        <tr><td class="cat-bottom">&nbsp;</td></tr>

		</table>

<div class="tbl-f-l"><div class="tbl-f-r"><div class="tbl-f-c">&nbsp;</div></div></div></div>

main.css:

Code: [Hide] [Select]

#dash_container {

	width: 700px;

	color: #555555;

}

#countdown_dashboard {

	height: 110px;

}

.dash {

	width: 110px;

	height: 114px;

	background: transparent url('../images/dash.png') 0 0 no-repeat;

	float: left;

	margin-left: 20px;

	position: relative;

}

.dash .digit {

	font-size: 55pt;

	font-weight: bold;

	float: left;

	width: 55px;

	text-align: center;

	font-family: Times;

	color: #555555;

	position: relative;

}

.dash_title {

	position: absolute;

	display: block;

	bottom: 0px;

	right: 6px;

	font-size: 9pt;

	color: #555555;

	text-transform: uppercase;

	letter-spacing: 2px;

}

But eventhough it reads the main.css in forumroot/countdown (telling me those paths are correct) it doesn't start counting ...maybe I'm overlooking the obvious?

The above code was tested on black pearl but should fit milkyway too I guess

EDIT .. this is an example of how it looks:

mort [ Sat 01 Sep, 2012 00:35 ]
Post subject: Re: Simple Countdown - Unfinished

Works fine for me as it comes (with your css and mark up).

Check that you don't already have jquery in your theme

If you do, then drop this from the header.

<script type="text/javascript" src="countdown/js/jquery-1.4.1.js"></script>

You can also get rid of this and the misc.js as it's junk for something else that was in the html.

<script type="text/javascript" src="countdown/js/misc.js"></script>

Edit:

Mmmm, you already do have the core jquery.js installed.

<script type="text/javascript" src="./mods/jquery-1.2.2.pack.js"></script>

And that is more than likely the problem.

Joshua203 [ Sat 01 Sep, 2012 12:11 ]
Post subject: Re: Simple Countdown - Unfinished

Yeah, I think you're right Mort but I'm glad to know it should be ok for others to use ...this time I'll give it a miss

(I have nothing to countdown anyway)

I forgot to validate the html and css though but I expect you would have noticed any errors even without checking

mort [ Sat 01 Sep, 2012 12:34 ]
Post subject: Re: Simple Countdown - Unfinished

Joshua203 wrote: [View Post]
(I have nothing to countdown anyway)

Hahaha!

If you ever do you could use something like this.

http://www.countdownclockcodes.com/sports-countdown-clocks/

Quote:

I forgot to validate the html and css though but I expect you would have noticed any errors even without checking

You did well!

Joshua203 [ Sat 01 Sep, 2012 14:11 ]
Post subject: Re: Simple Countdown - Unfinished

I can confirm removing the 1.2.2pack from the footer definately makes the clock tick and not look like it's beyond "lift off" time.

Now let's wait for a reply from The Crow so you can mark it solved (and/or name it finished)

If I ever know my date of death I now have lots of counters to choose from ..thanks

oooh for anyone trying this ...the include can be added anywhere below

Code: [Hide] [Select]