Citizens – Responsive Coming Soon Page

Author: leweb.at
Created: 19/05/2015

This documentation should help/assist you to customize the CITIZENS. Everything is well documented, so with a few HTML und CSS knowledge, you will customize this Theme in a few minutes. Thank You for downloading and purchasing this theme.
We offer individual customization. If you need any help for customization, get in contact sales@leweb.at.

Features

  • One Page Template
  • HTML5 & CSS3
  • Twitter Bootstrap 3.1 Framework
  • Responsive and mobile ready
  • Smooth Page Scrolling
  • animated Content
  • Font Awesome ready
  • Ajax Contact Form for easy setup
  • Compatible with all modern browsers
  • Easy to customize

Image Locations

To customize Slider and Content Images you need to know where they are located in the theme file.

Logo: template directory > images

Main Slider: template directory > images

–> The images with name: bsbild-fullhd_01, bsbild-fullhd_02, bsbild-fullhd_02 are the names for slider images. Replace them with your pictures

Newsletter area: template directory > images

–> The image name: bs-subscribe.jpg Replace the image with your image

Image sizes

Main Slider:

Main Slider Images should have 1920 x 1080 (in pixels)

Setting up Contact Form

To set up the Contact Form You only need to customize a few lines of code.

To do so please open „sendmail.php“. This file is located in (../form/sendmail.php)

You need only three customizations which are documented in the file. Be aware of changing any lines under this tab.

form01

Add favicon

Favicon: There are lots of ways to generate favicon on internet or using photoshop but I always prefer and use http://www.favicongenerator.com/
Create 100x100px image using PSD and follow instructions on website, then replace favicon.ico in images > icons

Using Font Awesome

Font Awesome gives you more than 300 scalable vector icons.

  • Choose your icon here: Link and click on that icon to get the code
  • Here are examples to resize, rotate icons: Link
  • To use Font Awesome with Photoshop follow this Tutorial: Link

COUNTDOWN

For editing the time for the Homepage Countdowner you need to edit the file functions.js

File location: template directory > js

Open the file and on line 12 you see the code similar like this

// COUNTDOWN
var date = ‚2015/11/10‘;

Here you can edit the time of the Countdown. Safe and refresh the page.