AppEx

Responsive Twitter Bootstrap 3 App Landing Page


Thank you for purchasing our theme.If you have any questions that are beyond the scope of this help file, please submit a ticket on support.deviserweb.com. Thanks so much!

All the directories and files are well organized as it shown on the image bellow. Same file tree has been leaveraged for dark version.

This template is a mobile friendly (responsive) layout which is designed based on Twitter boosstrap 3.2. See our HTML file structure which is in index.html. Your contents goes inside container.



We are using 11 CSS files across template and comments in capital letter describe the linked stylesheet bellow. We separated styles for improving convenience to edit this template. If you're going to use this template in production I'd recommend you to merge all stylesheets in one file (for decreasing http queries).















	













	
	


















	

There are 17 jQuery files including necessary plugins, all of them be found in jsfolder of home directory. Let's see what each file for:

  1. jquery.1.9.1.min.js is stayable version of jQuery which is required to place upon all scripts otherwise none of jquery code will work.
  2. preloader.js is for preloading effect of the template. It is a custom script.
  3. bootstrap.min.js is a plugin comes with Twitter Bootstrap dist.
  4. smoothscroll.js is a plugin for smoothly scrolling effect. It is currently closed with typical HTML comment to not to take effect on document because another plugin handle the same effect.
  5. jquery.stellar.min.js helps our template act like parallax scroll. The plugin is created by Mark Dalgleish
  6. jquery.scrollTo.min.js & jquery.localScroll.min.js are plugins by Ariel Flesler. Both are used for scrolling to targeted id from the navigation bar and home screen buttons of our template.
  7. jquery.nav.js jQuery One Page Navigation Plugin
  8. owl.carousel.min.js is a popular jQuery plugin which is used for building touch enabled slider.
  9. matchMedia.js Test a CSS media type/query in JS. Contributors: Scott Jehl, Paul Irish, Nicholas Zakas, David Knight
  10. navbar.matchMedia.js Custom script after matchMedia.js
  11. wow.min.js WOW, a jQuery plugin which initiates animation effect on scroll.
  12. jquery.nicescroll.min.js is used in this template to beautify scrollbar and smooth scroll. Found in areaaperta.com
  13. lightbox.min.js We have used the plugin for screenshot popup on click. Lightbox 2
  14. jquery.ajaxchimp.min.js is a jQuery plugin which is used to send information to MailChimp list directly using our form in subscription section. ajaxChimp on GitHub.
  15. jquery.backgroundvideo.js We have used it with a little customization so that background video does not have any audio by default, but end users can enable sound easily.
  16. custom-scripts.js This file must go all the way down to other files and plugins. This file contains custom codes.

We have used 4 types of font throughout the template.

  1. Raleway for title texts
  2. Roboto for body texts
  3. Arizonia for inverted comma icon on testimonials section
  4. PT Serif for testimonials

All of the fonts are available on google fonts. You can choose other fonts from google directory. We have linked them at head part in index.html.

	
    

Check <head> part of your index.html page. You will find all colors link available. Lime lime.css color is activated by default. But if you want to use another color just simply uncomment that and don't forget to comment in lime.css to inactive it.

    
     
    
    
    
    
    
    
    
    

 

Screenshot:

 

 

We used WOW plugin to trigger animations on scroll. It used Animate.css for CSS animation. You will find all of the animations in Animate.css website. To learn more about WOW please read their Documentation

 

Example:


Your Content Goes Here

Screenshot:

5 Images used in 5 sections. Header, Newsletter Subscription, Feature Area 4, Testimonials and Download section.

Find this 5 sections in style.css (or style.less if you love 'less css') both of the files are well commented.

Header BG:

 

SUBSCRIBE NEWSLETTER BG: 

 

FEATURES AREA 4 BG:

 

TESTIMONIALS BG:

 

DOWNLOAD BG:

 

And there is a transparent black color overlay to make content more visible. You will find it on MISCELLANEOUS STYLE section in the same css file.

Same as background image version. 5 Images used in 5 sections. Header, Newsletter Subscription, Feature Area 4, Testimonials and Download section.

It is more easy to change transparent color for the template. Please follow easy steps to change your desired color.

  1. Goto transparent-color-bg/less/color directory.
  2. Duplicate any of .less file.
  3. Now simply change your desired color and assign it with @main_color veriable.
  4. Save and compile the .less file with any preprocessor application. It will do all rest of works for you.
  5. Now final step: link it to index.html

If you don't wanna go through the steps above, you simply can duplicate or edit any of .css files among them and simply replace HEX with your color. That's it! So easy right? But we recommend less because Less is More

 

Trasparent color overlay:

To make background images more visible simply add opacity in .color_trans. Let me show you an example:

Goto less directory, open designed file to edit

	/*
	|----------------------------------------------------------------------------
	| COLOR REPLACEMENT
	|----------------------------------------------------------------------------
	*/
	/* MISCELLANEOUS STYLE */
	.color-overlay {
		.color_trans; /* current transparency which is 20% */
		.color_trans(0); /* 100% transparency */
		.color_trans(0.75); /* 25% transparency */
		.color_trans(0.5); /* 50% transparency */
		.color_trans(0.75); /* 25% transparency */
	}

Same as background image version. 5 Images used in 5 sections. Header, Newsletter Subscription, Feature Area 4, Testimonials and Download section.

It is more easy to change transparent color for the template. Please follow easy steps to change your desired color.

  1. Goto gradient-color/less/color directory.
  2. Duplicate any of .less file.
  3. Pick your desired colors and assign one with @main_colorfor initial transparency and another with @color_2 for ending color.
  4. Save and compile the .less file with any preprocessor application. It will do all the rest of works for you.
  5. Now final step: link it to index.html

If you don't wanna go through the steps above, you simply can duplicate or edit any of .css files among them and simply replace HEX with your color. That's it! So easy right? But we recommend less because Less is More

 

Transparency of colors:

To make background images more visible simply add opacity in .color_trans. Let me show you an example:

Goto less directory, open designed file to edit

	/*
	|----------------------------------------------------------------------------
	| COLOR REPLACEMENT
	|----------------------------------------------------------------------------
	*/
	/* MISCELLANEOUS STYLE */
	.color-overlay {
		.color_trans; /* current transparency which is 20% */
		.color_trans(0); /* 100% transparency */
		.color_trans(0.75); /* 25% transparency */
		.color_trans(0.5); /* 50% transparency */
		.color_trans(0.75); /* 25% transparency */
	}

Same way as you did for transparent background. Just navigate to solid-color/css/colors/less and follow the steps described in Background: Transparent Color

It's very easy to change the background video. 

 

1.  Just go to the video folder:

2. You will find the videos in 3 formats. .mp4 .ogg and .webm . And a JPG image. You can convert your videos in this 3 format very easily via http://video.online-convert.com/ . Convert your video int this 3 format and replace the old videos and JPG screenshots. 

NOTE: If your filename is not "video" and has a dfferent name. You can change it on JS in custom-scripts.js file. available on JS folder.

Currently all devices under 640px width will show the background image instead of video. If you want change this please edit js/custom-scripts.js. If you want to use background image instead of video on tablet. use min-width: 768px; also change it on responsive.css (max-width: 640px)

We have used Font Awesome 4.1.0, The Elegant Icon Fonts, Linea throughout the template. So there are 1000+ font icons come with it.

You can see icon mapping directly from icons folder.

Just change the image links to your desired screenshots url. That's all. 

	 	

Contact form will use php to send emails. So just open sendmail.php file. Don't worry, no need to be familiar with PHP to edit this file. Our code is well commented so that a newbie can make necessary changes. Change the current email spanbox@getanwar.com to your email address. Your form is ready!

(NOTE: Contact form require web server to send email. Emails can go to your spam/junk folder.)
 
 

Default: MailChimp

Current active subscribe form will save emails to mail chimp list. 

How to connect mail chimp list? 

Open custom-scripts.js and find following script. Just replace that mailchimp form action url with your mailchimp list url

 

How to find mailchimp form action URL?

Login to your mailchimp account and go to your list. Now follow the steps bellow:

  1. Select Signup forms
  2. Select Embedded forms

  3. Copy the link and paste into custom-scripts.js mailchimp script which is shown on the above image.
    Note: Don't remove " " from the script and never forget to add http: if it is not included with mailchimp list url.

 

Option 2: Save emails in text

This option currently disabled with HTML comment. Just remove the HTML comment which is highlighted on the image. it will be enabled.  Alongside make comment in mailchimp HTML form to hide that.

This Subscription form will save the emails in email-list.txt on subscribe folder.

Emails will be saved each in their own line like in the image.

 

 

If you need any help please submit a ticket on support.deviserweb.com .We will try our best to respond within 24 hours

Facebook | Twitter

Credits:

Images from unsplash.com

Mockups from pixeden.com

Video converted via video.online-convert.com

App screenshots from http://dribbble.com/anwaltzzz