v1.2

Bootstrap App Landing Page


Table of contents

Table of contents

1 - Getting Started

1.1 - Download From Theme Forest

1.2 - Source files explained

1.3 - Optimised Javascript and CSS

2 - General

2.1 - Index.html layout

2.1 - Change the menu

2.2 - Change the logo

2.3 - Change the colour scheme

3 - Slideshow

3.1 - Select slideshow platform

3.2 - Add slides to the slideshow

3.2 - Portrait  slideshow

4 - Services

4.1 - Add a service

4.2 - Change a service icon

5 - Screenshots

5.1 - Add a new screenshot

5.1 - Add lightbox

6 - Testimonials

6.1 - Add a testimonial

7 - Contact

7.1 - Change social icons

8 - Parallax backgrounds

9 - 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

Main theme HTML file

1.3 - Optimised Javascript and CSS

Javascripts and stylesheets folders both contain an all file (all.js & all.css ) this is for use in production sites and contains a minified copy of all css / js.

2 - General

2.1 - Index.html layout

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

Each section has three background placeholders  ( <div class=”bg-1”, class=”bg-2” and  class=”bg-3”) which you can use to create your parallax effects (see chapter 8)

2.1 - Change the menu

Inside the header section you will find a <ul> tag, this contains the main site menu.

To add more options to the menu add another <li> tag like this

<li>

        <a href=”#mynewsection”>My New Section</a>

</li>

the #mynewsection should match a <section> with the same id.

To understand  more about how the navigation bar works see bootstrap’s documentation (http://twitter.github.com/bootstrap/components.html#navbar).

2.2 - Change the logo

To replace the logo with your one you need to

a) One of the <li> tags in the menu (ul class=”nav”) will contain a class “brand” this is the main menu that you will change to the title of your app.

<a class="brand" href="#section-1">Appland</a>

b) On the page header (id masthead) you will find a link with the class .brand. This is the logo that shows on the mobile devices (iphone and ipad portrait).

<a class="brand brand-appland" href="#section-1">

  Appland

  <span></span>

</a>

Change the text and/or the background image to fit your own brand.

To remove the appland’s  background image from the logo just remove the “.brand-appland” class from the “.brand” class link.

2.3 - Change the colour scheme

To change the colour scheme of the theme simply add one of the following classes to the <body> tag.


3 - Slideshow

3.1 - Select slideshow platform

AppLand comes with a choice of iPhone, iPad and desktop platforms for your main slideshow.  To change the slideshow surrounding image just add the following class to the <body> tag

app-iphone

app-ipad

app-macbook

app-iphone-portrait

3.2 - Add slides to the slideshow

Adding extra slides to the slideshow couldn’t be easier.  

1) Add your image to the folder images/slides/

2) Edit index.html and find the <section> with an id of “section-1” inside this section you will find this code

<div class="carousel slide" id="intro">

  <div class="carousel-inner">

    <div class="item">

      <img alt="slide one" src="images/slides/slide-1.jpg">

    </div>

    <div class="item">

      <img alt="slide two" src="images/slides/slide-2.jpg">

    </div>

    <div class="item">

      <img alt="slide three" src="images/slides/slide-3.jpg">

    </div>

  </div>

</div>

Copy and paste the red markup and change the image source to your image filename.

To understand  more about how the carousel slideshow works see bootstrap’s documentation (http://twitter.github.com/bootstrap/javascript.html#carousel).

3.2 - Portrait  slideshow

To create a iphone portrait slideshow use the following markup just below the top hero panel (div class=”hero-unit”)

<div class='row-fluid'>

<div class='portrait-slides'>

<div class='carousel slide' id='intro'>

                        <div class='carousel-inner'>

                                <div class='active item'>

                                        <img alt='..' src='..' />

</div>

                                <div class='item'>

                                        add as many items as you need

</div>

                                …

</div>

<div class='carousel-frame'></div>

<a class='carousel-control left' data-slide='prev' href='#intro'>

<i class='icon-chevron-left'></i>

</a>

<a class='carousel-control right' data-slide='next' href='#intro'>

<i class='icon-chevron-right'></i>

                        </a>

</div>

</div>

<div class='portrait-features'>

<h3> Title here </h3>

                <ul>

                        <li><i class='icon-ok'></i> Some feature </li>

                        ..

                </ul>

<div class='get-it'>

<a class='btn btn-large btn-primary' href='#' type='button'>

Get it now

</a>

</div>

</div>

</div>

This code is in the html file already but commented out

4 - Services

4.1 - Add a service

To add a service to the services section edit the index.html and find the <section> tag with an id of “section-2”.  Then edit the following html

<ul class="thumbnails services">

  <li class="span3">

    <h3>

      <div class="drop-icon pull-center">

         <i class="icon-beaker"></i>

      </div>

      Cloud storage

    </h3>

    <p>

      Ne prima vitae noluisse sit. At lorem possit euismod eum,

    </p>

  </li>

</ul>

Copy and paste the <li> element and you will have a new section added you your list

4.2 - Change a service icon

To change an icon in one of your services just edit the class in the <i> tag

<ul class="thumbnails services">

  <li class="span3">

    <h3>

      <div class="drop-icon pull-center">

         <i class="icon-beaker"></i>

      </div>

      Cloud storage

    </h3>

    <p>

      Ne prima vitae noluisse sit. At lorem possit euismod eum,

    </p>

  </li>

</ul>

You can choose from any of the Font Awesome Icons http://fortawesome.github.com/Font-Awesome/


5 - Screenshots

5.1 - Add a new screenshot

To add a screenshot to the screenshots section.

1) Copy your new screenshot to the images/thumbnails directory.

2) Edit the index.html and find the <section> tag with an id of “section-3”.  Then edit the following html

<div class="carousel-inner">

  <div class="item">

    <ul class="thumbnails thumbnail-list">

      <li class="span4">

        <figure class="thumbnail-figure">

          <a href="#">

            <img alt="" src="images/thumbnails/thumb01.jpg">

          </a>

          <figcaption>

            Lorem ipsum dolor sit amet

          </figcaption>

        </figure>

      </li>

    </ul>

  </div>

</div>

Copy and paste the red code above to create a new screenshot, change the src attribute to match your new screenshot image and change the contents of the <figcaption> tag to add a description.

5.1 - Add lightbox

To add lightbox on any of the thumbnail images just change the above code so that for the image with the lightbox it will look like that

<a data-image=”full image src” data-toggle=”lightbox” href="#">

            <img alt="" src="images/thumbnails/thumb01.jpg">

</a>

The full image src is the path to the big image that will open in the lightbox 


6 - Testimonials

6.1 - Add a testimonial

1) Add a photo of the author of the testimonial to the images/authors folder

2) Copy and paste the code in red to create a new testimonial

<div class="row">

  <div class="span4">

    <div class="well well-quote">

      Lorem ipsum dolor sit amet, consectetur adipisicing elit,

      <div class="well-author">

        <a href="#" rel="tooltip" data-original-title="Mrs Jone Doe">

        <img alt="author" src="images/authors/author1.png">

        </a>

      </div>

    </div>

  </div>

</div>

3) Change the name and testimonial text

To change the authors image you can use the photoshop file and edit appropriate sliced layer (layer group section 4)

7 - Contact

7.1 - Change social icons

To change the social icons in the final section you can use the photoshop file and edit appropriate sliced layer (layer group section 5)


8 - Parallax backgrounds

The parallax effects on appland are powered by stellar (http://markdalgleish.com/projects/stellar.js/). 

To create you own effects you can apply new background images on the section’s bg-1, bg-2, and bg-3 divs. To change  the relative movement for each background layer you can change “data-stellar-background-ratio” on each div:

You can reference to stellar’s documentation for more info

(http://markdalgleish.com/projects/stellar.js/docs/)


9 - Credits

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

2. Slideshow images based on the work of Michael reimer (http://creattica.com/creatives/michael-reimer/192096) and Deepak Jose (http://creattica.com/creatives/deepak-jose/208760), found on Creattica (http://creattica.com/)

3. Thumbnail images from Orman Clark (http://www.premiumpixels.com/)

4. Author images from Stock.XCHNG (http://www.sxc.hu/)