v1.1

Bootstrap Coming  Soon Page

Table of contents

Table of contents

1 - Getting Started

1.1 - Download From Theme Forest

1.2 - Source files explained

2 - Customizing the theme

2.1 - Page  layout

2.2 - Change the logo

2.3 - Change the title

2.4 - Change the tagline

2.5 - Setting the counter

2.6 - Change the description

2.7 - Setting the signup form

2.8 - Set the social icons

2.9 - Change the colour scheme

2.9 - Change the fonts

3 - Credits


1 - Getting Started

1.1 - Download From Theme Forest

Once you have downloaded the zip file from Themforest, unzip it using your standard zip software.  When it has finished you should have a folder with the following directories inside.

1.2 - Source files explained

When you unzip the main theme file you will find the following folders and files

File / Folder

Description

fonts/

Contains the font awesome font files

images/

Contains all theme image files

javascripts/

Contains all the theme’s javascript and jQuery files

stylesheets/

Contains all the theme’s CSS files

index.html

Theme HTML file

2 - Customizing the theme

2.1 - Page  layout

The main theme html contains the following layout, we will show you how to modify each of the theme’s sections below.

1. Page Logo        5. Description        

2. Title        6. Signup form                 

3. Tagline        7. Social icons

4. Counter

2.2 - Change the logo

To replace the logo with your one you need to

a) Save your logo image in the images folder and change the reference in the index.html file

<div class="brand">
             <h1>
               <img alt="caelus" src="images/
yourlogo">
             </h1>
           </div>        

2.3 - Change the title

Caelus theme uses slabtext a jquery plugin for producing bold and responsive headlines. To create your own title lines replace the text in the html file with you own lines

<div class="hero-unit">
             <h2 class="slab title">
               <span class="slabtext">
                 line one
               </span>
               <span">
                 line two
               </span>
               <span">
                 line three
               </span>
                   ….

Slabtext will create a line for each span  in the  “slab title” div.

The alignment of the lines is being handled by slabtext library.

2.4 - Change the tagline

To change the tagline just change the text in the following code

<h2 class="slab subtext">
               <span>
                  your own tagline
               </span>
             </h2>

2.5 - Setting the counter

To set the counter to your launching time, open the script.js file located in javascripts folder and set the following lines

var countdownYear = 2013;

var countdownMonth = 1;

var countdownHour = 2;

to match the year, month and hour date.

2.6 - Change the description

To change the description enter your own text in the following lines

<div class="description">
               <h3>
                 Description title
               </h3>
               <p>
                 Description text
               </p>
             </div>

2.7 - Setting the signup form

The theme comes with a simple php script that saves all contact information into a local file called people.txt.

Most PHP installations should be able to run this simple script, it is possible you will need to provide the people.txt file with writable permissions for it to work.

2.8 - Set the social icons

You add links to your social icons just edit the links in the following section

<ul class="list-social">
               <li class="link-facebook">
                 <a href="#">
                   facebook
                 </a>
               </li>
               <li class="link-google">
                 <a href="#">
                   google
                 </a>
               </li>
               <li class="link-twitter">
                 <a href="#">
                   twitter
                 </a>
               </li>
               <li class="link-linkedin">
                 <a href="#">
                   linkedin
                 </a>
               </li>
               <li class="link-pinterest">
                 <a href="#">
                   pinterest
                 </a>
               </li>
             </ul>

remove any unwanted links by removing the list items. To create new icons you can use the provided psd file.

2.9 - Change the colour scheme

Caelus comes with two color schemes, color and sepia. To apply any of these two just add one of the following classes to the body

<body class="theme-sepia">

or

<body class="theme-color">

2.9 - Change the fonts

Caelus comes with two font selections Bazar and Sonsie One  , to apply any of these two just add one of the following classes to the body

<body class="fonts-set1">

or

<body class="fonts-set2">

Important: To set both the color scheme and the fonts you need to apply both of the classes, .ie

<body class="theme-sepia fonts-set1">

3 - Credits

1. background textures by subtle patterns (http://subtlepatterns.com/)

2. Slabtext js 

3. Bazar font (http://www.abstractfonts.com/font/14741) and Sonsie One (http://www.google.com/webfonts/specimen/Sonsie+One)