XSapp - HTML Responsive App Landing Page Theme


Documentation

Welcome To XSapp!

This document covers the installation and use of this theme. Please read this document thoroughly if you are experiencing any difficulties. If you have any questions that are beyond the scope of this document, feel free to contact me through the contact form on xscoder.com.
Thanks!

Template Features

  • Clean & Simple Design
  • HTML5 & CSS3
  • Fully Responsive Design
  • PHP/Ajax Powered Working Contact Form
  • All files are well commented
  • Cross Browser Compatible with IE11+, Firefox, Safari, Opera, Chrome
  • Extensive Documentation

Installation

  1. After unzip the downloaded package, you'll found a Theme folder with all the files.
  2. You can view this theme in any browser, display or edit it without an internet connection - although Font Awesome fonts and Google Map won't work.
  3. The only section that will not work is the Contact section, which contains PHP code and requires a server environment for send messages.
  4. Now enter your Cpanel or open your FTP Client - like FileZilla - and upload the content of the Theme folder on your server root.
  5. Once the files are done uploading go to the URL of your website to view the template.

Theme Structure

All information within the main content area is nested within a body tag.
The general theme structure is pretty the same throughout the template. Here is the general structure of main page - index.html

							

								...       
						    

						    

								...	                
							

							 

								...
							

							

								...
							

							

								...
							

							

								...
							

							

								...
							

							

								...
							

							

								...
							

							

								...
							

							

								...
							

							

								...
							

							
							
Explore these sites

								...

CSS Files

These are the CSS resources that are loaded into this theme inside the head tag.

Change Background

In the style.css file, find the .welcome-area code, uncomment the background url() line and comment the first 3 background-image lines in ordfer to set an image for the header:

						.welcome_area {
						    background-image: -moz-linear-gradient(0deg, #fd628a 0%, #ff9889 100%);
						    background-image: -webkit-linear-gradient(0deg, #fd628a 0%, #ff9889 100%);
						    background-image: -ms-linear-gradient(0deg, #fd628a 0%, #ff9889 100%);
						    /* background: url("img/bg-img/welcome-bg2.jpg") no-repeat fixed center; */

Change Color

In the index.html, 404.html, blog.html, blog-single.html, minimal.html and privacy-policy.html files, find the following code inside the head:
So, if you want your html pages to have a different color than the default one, comment the first link line and uncomment the line with the color you wish.
For instance, if you want your pages to have blue color, uncomment this line:

Google Web Font

By default, the template loads the following font from Google Web Font Services, you can change the font with the one that you like best by editing this line in the style.css file.

Javascript Files

These is the list of Javascript files that are loaded into templates in end of the /body tag, right below the /footer tag closure.

Smooth Scroll

In the js folder of the package you can find a file called smoothscroll.js, which handles the scroll of the index page. You can play with the default values as you wish: 

							// Scroll Variables (tweakable)
							var defaultOptions = {
							    // Scrolling Core
							    frameRate        : 50, // [Hz]
							    animationTime    : 1000, // [ms]
							    stepSize         : 80, // [px]
							    // Pulse (less tweakable)
							    // ratio of "tail" to "acceleration"
							    pulseAlgorithm   : true,
							    pulseScale       : 4,
							    pulseNormalize   : 1,
							    // Acceleration
							    accelerationDelta : 50,  // 50
							    accelerationMax   : 3,   // 3
							    // Keyboard Settings
							    keyboardSupport   : true,  // option
							    arrowScroll       : 50,    // [px]
							    // Other
							    fixedBackground   : true, 
							    excluded          : ''    
							};

Contact Form

The Theme folder contains a PHP file called contact.php. This is a PHP script for sending messages to your email, so you should replace [email protected] with your own email address:

						    $to = "[email protected]"; // <-- replace this email address with your own one!
						    $from = $_REQUEST['email'];
						    $name = $_REQUEST['name'];
						    $subject = $_REQUEST['subject'];
						    $number = $_REQUEST['number'];
						    $cmessage = $_REQUEST['message'];
						    $headers = "From: $from";
							$headers = "From: " . $from . "\r\n";
							$headers .= "Reply-To: ". $from . "\r\n";
							$headers .= "MIME-Version: 1.0\r\n";
							$headers .= "Content-Type: text/html; charset=ISO-8859-1\r\n";
						    $subject = "You have a message from XSapp.";
						    ...

PSD files

This package has a PSD folder which contains a few .psd files of the mobile devices and video section background. You can open them with Photoshop and edit them as you wish in order to reskin this theme.

Credits



Made with by xscoder