Getting Started

An overview of how to download and setup the theme, and more.

Online Docs Available Looks like you are looking at the offline docs. You can find possibly more up to date docs online here

Getting Started

Introduction

Thank you for buying Lambda Bootstrap html theme! Lambda is an elegant, modern and unique theme and we have spent a very long time developing it from scratch. It is packed with awesome features and its main focus is to make your web pages stand out, while keeping it extremely easy to use and maintain.

Feel free to contact us and give us your feedback about the theme, improvements you feel it needs and the documentation of the theme. We've worked hard to create Lambda and we'll work even harder to support and improve it.

On behalf of Oxygenna team thanks again for buying Lambda.


Downloading the theme

Once you have downloaded the zip file from Themeforest, unzip it using your standard zip software.

When it has finished you should have a folder with the following files & directories inside.

Folder Contents
docs contains theme's documentation
source.zip themes gulp and sass build system (for advanced users)
lambda.zip the theme zip file

Installation

Install the Lambda Html theme via ftp by following these steps

  1. Connect to your website host, using some of many FTP clients, for example FileZilla.
  2. Go to your default server folder, and copy Lambda into that folder.

Setting your fonts

In order to use google fonts, you need to visit Google Fonts and follow the instructions on how to get a new font. After you have decided on the styles of the font that you want to load, google fonts will provide you with a code to copy as the first element in the <head> of your HTML document. The code would look similar to this e.g

    <link href='http://fonts.googleapis.com/css?family=Source+Sans+Pro:200,300,400,600,700,900,300italic,400italic,600italic' rel='stylesheet' type='text/css'>

Go to your_skin.css in the styles folder and add this rule for the integration of the fonts into your CSS to take place

    body {
      font-family: 'Source Sans Pro', sans-serif;
      font-weight: 400;
    }

with a default font-weight 400. From there you can set your custom rules for your font.

Keep in mind that you can use different fonts(as long as you are loading them in the <head> of your HTML document) for different elements. For example, if you want to set the font for your menu, you can use the following CSS rule

#masthead.menu{
  font-family:Gentium Book Basic,
  sans-serif;
  font-weight:700;
  font-size:21px;
}

Enabling the page loader

The page loader can be set by adding to the <body> two classes. One is pace-on to enable the loader. In order to set the different types of loaders you can pick from :

  1. pace-counter for a counter loader.
  2. pace-minimal for a more discreet loading line on top of the page.
  3. pace-dot for a flashing dot in the center of the page.

In addition, after the <body> opening tag, you need to add this code

<div class="pace-overlay"></div>

If you would want for example to have the dot loader, your opening body tag would look like this

<body class="pace-on pace-dot">
  <div class="pace-overlay"></div>

Tip: If in your page or in theme.js you are including the script

var oxyThemeData = oxyThemeData || {
  navbarHeight : 100,
  navbarScrolled : 70,
  navbarScrolledPoint : 200,
  menuClose : 'off',
  scrollFinishedMessage : 'No more items to load.',
  hoverMenu : {
      hoverActive : false,
      hoverDelay : 1,
      hoverFadeDelay : 200
  },
  siteLoader: 'on'
};

you need to make sure that the siteLoader property is set to on.

Disabling the page loader

In order for the loader to be disabled, you have to remove the two classes that we inserted in the previous section from the <body>, pace-on and pace-dot(or any other you might have put instead).

Tip: If in your page or in theme.js you are including the script

var oxyThemeData = oxyThemeData || {
  navbarHeight : 100,
  navbarScrolled : 70,
  navbarScrolledPoint : 200,
  menuClose : 'off',
  scrollFinishedMessage : 'No more items to load.',
  hoverMenu : {
      hoverActive : false,
      hoverDelay : 1,
      hoverFadeDelay : 200
  },
  siteLoader: 'on'
};

you need to make sure that the siteLoader property is set to off.

General Page Layout

Each page in the theme follows HTML5 semantic markup and it is compatible with the latest version of twitter bootstrap. The general page layout consists of the following parts:

  1. Topbar: The top bar above the menu.
  2. Header: The website’s banner and the navigation.
  3. Content: The main content of the page.
  4. Footer: The footer of the page.

The proper markup for the page requires the following markup

<body class="pace-on pace-counter">
    <div class="top-bar">
        <div class="container">
            <div class="top top-left">
                add content for the left side of the topbar
            </div>
            <div class="top top-right">
                add content for the right side of the topbar
            </div>
        </div>
    </div>
    <div class=”sticky-wrapper”>
        <div id=”masthead” class="navbar navbar-sticky swatch-white">
            Menu Header
        </div>
    </div>
    <div id=”content” role=”main”>
        Main content
    <footer id="footer" role=”contentinfo”>
        Footer
    <footer>
    </div>
</body>