“Appland — Premium Responsive Landing Page” Documentation by “UnreaLSnake” v1.0


“Appland — Premium Responsive Landing Page”

Created: May 31, 2013
By: UnreaLSnake
Email: mail@unrealsnake.ru

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!


Table of Contents

  1. HTML Structure
  2. CSS Files and Structure
  3. JavaScript
  4. PSD Files
  5. Sources and Credits

A) HTML Structure - top

This theme is a fixed layout with two columns. All of the information within the main content area is nested within a div with an id of "page-side" (or "page-full"). The sidebar's (column #2) content is within a div with an id of "side-full" (or "side-mini"). The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

	#hc-menu li a {
		color: #someColor;
	}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight. I.E.

	#hc-menu li a:hover {
		color: #someColor;
	}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.


B) CSS Files and Structure - top

I'm using two CSS files in this theme. The first one is a generic reset file. Many browser interpret the default behavior of html elements differently. By using a general reset CSS file, we can work round this. This file also contains some general styling. Keep in mind, that these values might be overridden somewhere else in the file.

The second file contains all of the specific stylings for the page. The file is separated into sections using:

	/**********************************************************/
	/*** MAIN LAYOUT ******************************************/

	/*-- Body ------------------------------------------------*/

	some code

	/*-- Error --*/

	some code

	/*-- Containers ------------------------------------------*/

	/*-- Site --*/

	some code

	/*-- Header --*/

	some code

	/*-- Header > Content --*/

	some code

	/*-- Main --*/

	some code

	/*-- Main > Content --*/

	some code

	/*-- Footer --*/

	some code

	/*-- Footer > Content --*/

	some code

	/**********************************************************/
	/*** BASE UI **********************************************/

	/*-- Input -----------------------------------------------*/

	some code

	/*-- Textarea --------------------------------------------*/

	some code

	/*-- Button ----------------------------------------------*/

	some code

	/*-- Transitions -----------------------------------------*/

	some code

	etc, etc. 

If you would like to edit a specific section of the site, simply find the appropriate label in the CSS file, and then scroll down until you find the appropriate style that needs to be edited.

Any images that are placed within the blog section have 1px border, 4px worth of padding and a light grey background. If you would like to edit the display of these images, find the following section in the style sheet:

	.features {
		change styles here:
	}

	.features img {
		change styles here:
	}

C) JavaScript - top

This theme imports six JavaScript files.

  1. jQuery 1.8.3
  2. Selectivizr 1.0.2
  3. Easing Plugin 1.3
  4. Lazy Load Plugin 1.8.4
  5. Highslide JS 4.1.13
  6. Scroll-Target 1.0
  7. jQuery UI Core
  8. jQuery UI Widget
  9. rCarousel
  10. HTML5 Shiv 3.6.2
  11. Elastic Image Slideshow 1.0
  1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
  2. Most of the animation in this site is carried out from the customs scripts. There are a few functions worth looking over.
    	$(".scroll-gallery").sliderkit({
    		auto:false,
    		shownavitems:3,
    		scroll:1
    	});
    

D) PSD Files - top

I've included thirteen PSD's with this theme:

  1. Site Background - bg-body.psd
  2. Site Logo - img-hc-logo.psd
  3. Apple iPhone 5 Black/White - iphone-5.psd
  4. Appstore Button - bg-app-store.psd
  5. Information Icons - information.psd
  6. Blockquotes - ico-blockquote.psd

If you'd like to change the site logo in the header, open "img-hc-logo.psd", make the necessary adjustments, and then save the file as "img-hc-logo.png". Do the same for the other stuff.


E) Sources and Credits - top

I've used the following images, icons or other files as listed.


Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

UnreaLSnake

Go To Table of Contents