Setting up
HTML
The index.html file contains all the text of the template, logo, favicon, email address used for contact form and video background URL. To edit this, open the file:
To change the text, locate content section and replace all the text you want.
To change the logo, locate the image tags inside navigation section. Image with logo-retina class is for retina screen devices, this image should be double size of the image with logo class. Replace just the path inside the src attributes to change the logos.
<img class="logo" src="images/tiempo.png" alt="Tiempo">
<img class="logo-retina" src="images/tiempo@2x.png" alt="Tiempo">
To change the favicon, locate link tag with shortcut icon values inside rel attribute. Replace just the path inside the href attribute.
<link rel="shortcut icon" href="images/tiempo-favicon.png">
To change the email, locate contact us section inside content section. Replace all the information inside the form with your personal information. Don't forget to change the email inside anchor tag's href attribute and its value to receive emails in the specified address.
<a href="mailto:example@domain.com?subject=contact" class="email">example@domain.com</a>
To change the video background, locate video section and replace the URL, the string inside the rectangle in the next image.
<!-- Video -->
<div class="video-container">
<div id="video" class="player" data-property="{videoURL:'http://youtu.be/sBWPCvdv8Bk', containment:'.video-container',autoPlay:true, mute:true, showControls:false, showYTLogo:false, startAt:0, opacity:1}">
</div>
</div>
To get a URL for a video, go to YouTube and find the video you want as background. Below the video title, find Share and click on it. A section will open with the URL of the video, copy it and replace it as explained above.
Once done, be sure that you have correctly set up tiempo.js to display video background.
CSS
The style.css file inside css folder is used to set the path for background images, either static image or slides. Images are not included with Tiempo, edit the path so it points to the images you are using. It's recommended to put that images in images folder to make it easier to point to that path.
/* =IMAGE */
.image {
background-image: url(../images/background1.jpg);
}
/* =SLIDES */
.slide:nth-child(1) {
background-image: url(../images/background1.jpg);
}
.slide:nth-child(2) {
background-image: url(../images/background2.jpg);
}
.slide:nth-child(3) {
background-image: url(../images/background3.jpg);
}
.slide:nth-child(4) {
background-image: url(../images/background4.jpg);
}
jQuery
The tiempo.js file inside js folder is used to set Tiempo. Open this file and locate settings variable at the top of the file. There are different properties with a value that can be edited.
date
Type: JavaScript Date Object Default: 'September 1, 2015 09:00'
The date when the countdown will finish. It must have a valid JavaScript Date Object format.
url
Type: String Default: ' '
The URL to redirect to when the countdown finish. Leave it empty if you don't want a redirection.
skin
Type: String Default: 'dark' Values: 'light', 'dark'
The color used for backgrounds and typography. Light skin has light backgrounds and dark text, dark skin has dark backgrounds and light text.
background
Type: String Default: 'image' Values: 'solid', 'image', 'slides''video'
The background type used. Solid set a colored background, image set a background with a static image, slides set a background with a list of static images changing over the time, video set a dynamic background using a video from YouTube.
backgroundEffect
Type: String Default: 'none' Values: 'none', 'pattern', 'overlay', 'blur'
The effect applied to a background with an image, slides or video. None doesn't apply any effect, pattern applies a pattern over the background, overlay applies a color (backgroundColor value) overlay over an image, blur applies a blur effect over images but not over a video.
backgroundColor
Type: String Default: 'blue' Values: 'purple', 'blue', 'light-blue', 'light-green', 'green', 'yellow', 'orange', 'red', 'brown', 'black'
The color used as background when solid is set in background option.
showControlPanel
Type: Boolean Default: false Values: true, false
Show a control panel with all previous options. Use it just to preview different options on the page, doesn't save the changes made.
Mailchimp
MailChimp is an email marketing service used to create, send, and track email newsletters.
The subscribe.php file inside php folder is used to set Mailchimp. You need an account in Mailchimp to be able to use it. All you need to configure Mailchimp is to get the API key and a list ID from your account and replace the value of $api_key and $list_id in subscribe.php. For further information on how to get the API key, create a list and get the ID go to Mailchimp.
<?php
$api_key = "api_key";
$list_id = "list_id";
?>