“Kickoff HTML Template” Documentation by “Jake Caputo” v1.0

---

“Kickoff HTML Template”

---

Table of Contents

1. Disclaimer
2. General Markup Info & Structure
3. The Countdown

---

A) Disclaimer - top

Due to the nature of this deal there is no included support. I cannot guarantee my templates will function with all third party components, plugins, web browsers, and server environments. If you plan on adding numerous plugins to this template, please note I can not facilitate support of any conflicts they might cause with the default Kickoff functionality. The Kickoff HTML template is presented as is.

 

---

B) General Markup Info & Structure - top

Kickoff HTML uses basic HTML and jQuery functionality. This template comes with an index.html, style.css, and the jquery.countdown.js files, along with font and image files.

There are a few classes and ID's that you need to know of in order to customize Kickoff HTML.

1. Background Image

   The background image is located in the images folder. It is named bg.jpg. The easiest way to put your image into the template is to name your file bg.jpg as well, and replace the existing file in the template. Alternatively, you can navigate to the body area in the style.css and replace the bg.jpg there with the name of your image. If you go this route make sure you place your image inside of the images folder.

   Regardless of the size of your background image, Kickoff will size it to fix the entire screen of the browser. If your image is extremely small, I recommend placing a gausian blur on it in Photoshop, otherwise you will see some pixalization in the background of your site and nobody wants to see that.

2. The Logo

   • The logo has an id of logo. This allows us to put apply some CSS to it. You can replace logo.png with your logo, but for retina display devices you need to make your logo twice as big as you want to display it. Then in style.css, line 78 (which is #logo) set the height and width to half the size of your logo image.

---

C) The Countdown - top

Here we are, the meat and potatoes.

• First, locate the jQuery at the bottom of the index.html file.
• You'll see a line that says something like:

  austDay = new Date(new Date(2012, 8-1, 1));

  The way this is structured is year, month-1, day. In month-1 you only need to worry about the month, ignore the -1 part, but leave it alone. So if you want to countdown to May 25, 2012, this line needs to say 2012, 5-1, 25.
• The next line sets the UTC timezone. It's something like:

  $('#defaultCountdown').countdown({until: austDay, timezone: -5});

  By entering your timezone, the countdown will now be counting down to the beggining of that date you say (midnight). If you want to countdown to a specific time of the day, you will need to offset the timezone by as many hours as you need to. You may need to experiment with this, do a little math, and perhaps even move the date forward or back a day.

---

That'll do it! Simple instructions for a simple template. Thank you again for your purchase.

Jake Caputo

Go To Table of Contents

---