Welcome to Lamoon Documentation

CSS Files

There is a number of CSS files included in this template. They are from the Skeleton framework, plugins and the Lamoon styles itself. The list of all css files are as followings:

JavaScript Files

Lamoon is powered by jQuery engine and many plugins to create the outstanding features. It consists of the following JS files:

Change template color

Lamoon comes with 5 built-in colors which are black (default), blue, red, green and brown. To change from the default color to another, please open the file "/css/lamoon.css". Then you can see the instruction in there.

Noticed that at the top right position of any clickable image, you will see the small notification icon as mentioned above. You may also want to change the position of icon, please open the file "/scripts/lamoon.js" and go to the line 33. You will see the codes like:

   1:  /* Position of the icon:

   2:   * rt = Right Top

   3:   * lt = Left Top

   4:   * rb = Right Bottom

   5:   * lb = Left Bottom

   6:   */

   7:  imageHoveringIconPos = 'rt';

Just change from "rt" to another value described in the instruction. Note that this affects every image on your website.

Apply button styles

You can find all available styles in the file "elements/buttons.html". This section is going to give you the guideline of how to use those built-in button styles. Suppose you want to create a gray button with medium size, you can use the following codes to your anchor tag:

   1:  <!-- The pattern of the class is "xxx yyy button" -->

   2:  <a href="#" class="medium gray button">This is a button</a>

From the given codes above, the "xxx" defines the sizes of button. Available options are:

• small
• medium
• large

For "yyy", it is the color of button. Available options are:

• gray
• black
• blue
• steel-blue
• brown
• red
• green
• seagreen

Configure banner's captions

By default, the banner's caption will be animated automatically after the banner was changed. If you don't want this behavior, you can disable it by opening the file "/scripts/lamoon.js". Then go to the line 22, you will see the code like:

   1:  // Animate the banner caption?

   2:  captionAnimated = true;

Just change from "true" to "false" and done, the caption won't be animated next time.

For the styles of caption, you can choose either "white text on black background" or "black text on white background". Also you can define that which side you want it to display - "left" or "right". Please see the codes below for the pattern:

   1:  <div class="xxx yyy banner-caption">

   2:      <h2>

   3:          <!-- Caption title -->

   4:      </h2>

   5:      <p>

   6:          <!-- Caption body text -->

   7:      </p>

   8:  </div>

The "xxx" from the codes is the position you want. It can be one of these:

• left
• right

For "yyy", it is the text color of caption. It can be:

• black
• white

Note that "black" is a black text on white background and vice versa.

Configure Google Map

In contact page, there is a auto-generated map from Google Map service that rendered from the given address which you can change. Firstly, open the file "/scripts/lamoon.js" and go to the line 36, you will see the codes like followings:

   1:  // Generate Google Map automatically using the following address?

   2:  useAutoMap = true;

   3:  address = '57-091 Kamehameha Highway, Kahuku, Oahu, HI';

As you might have guessed, just enter your address to replace the current one and that's it. Google Map will render the map for you automatically.

But if you want to disable and use your own map image, you can then switch this function off by changing the value of useAutoMap to "false". After that open the "contact.html" file, go to the line 171 and you will see the codes like:

   1:  <div id="map" class="full-width column">

   2:      <!-- Google map -->

   3:      <div id="googleMap"></div>

   4:      <!-- Your own map -->

   5:      <div id="yourMap">

   6:          <img src="http://placehold.it/860x300"/>

   7:      </div>

   8:  </div>

What you have to do now is to replace the current image in "yourMap" div with your own map image.

Create gallery

Lamoon comes with pre-defined gallery of the default 3-columns and another 4-columns gallery layout. To see the general structure of the gallery container, please see the codes below:

   1:  <!-- Container for categories -->

   2:  <div class="center container section">

   3:      <ul id="categories">

   4:          <li>

   5:              <!-- data-filter = "*" means see all categories -->

   6:              <a href="#" data-filter="*" class="active">View all</a>

   7:          </li>

   8:          <li>

   9:              <a href="#" data-filter=".xxx">Beach</a>

  10:          </li>

  11:          <li>

  12:              <a href="#" data-filter=".xxx">Resort</a>

  13:          </li>

  14:          <li>

  15:              <a href="#" data-filter=".xxx">Rooms</a>

  16:          </li>

  17:          <li class="last">

  18:              <a href="#" data-filter=".xxx">Envato</a>

  19:          </li>

  20:      </ul>

  21:  </div>

  22:  <!-- Container for images -->

  23:  <div class="container section">

  24:      <!-- Root wrapper to define the column type of the gallery -->

  25:      <div id="gallery" class="yyy-columns">

  26:          <div class="xxx photo-item hover">

  27:              <!-- Anchor text link to full image -->

  28:              <a href="full-image.jpg" class="image-box">

  29:                  <div class="photo">

  30:                      <span class="text"><span class="anchor"></span></span>

  31:                  </div>

  32:                  <!-- Thumbnail image -->

  33:                  <img src="thumbnail.jpg" alt="" />

  34:              </a>

  35:          </div>

  36:          .

  37:          .

  38:          .

  39:          <div class="xxx photo-item hover">

  40:              <!-- Anchor text link to full image -->

  41:              <a href="full-image.jpg" class="image-box">

  42:                  <div class="photo">

  43:                      <span class="text"><span class="anchor"></span></span>

  44:                  </div>

  45:                  <!-- Thumbnail image -->

  46:                  <img src="thumbnail.jpg" alt="" />

  47:              </a>

  48:          </div>

  49:      </div>

  50:  </div>

The "xxx" in the codes is the category class for the image. Suppose an image is about the beach, you then define it as "beach" to the image class and to the category list's data-filter value.

Now see the "yyy" at line 25 from the codes above, it is used to defined whether the gallery is three or four columns. You can just simply put it as "three" or "four" with the suffix of "-columns". The result will be like "three-columns" or "four-columns".

Create tabs

To create the tabs with content, please see the general structure from the codes below:

   1:  <!-- Tabs list -->

   2:  <ul class="tabs">

   3:      <li>

   4:          <!-- "tab-content-id" is used to link with the tab's content it related to -->

   5:          <a href="#tab-content-id" class="active">

   6:              <!-- Tab's title -->

   7:          </a>

   8:      </li>

   9:      <li>

  10:          <a href="#tab-content-id">

  11:              <!-- Tab's title -->

  12:          </a>

  13:      </li>

  14:      <li>

  15:          <a href="#tab-content-id">

  16:              <!-- Tab's title -->

  17:          </a>

  18:      </li>

  19:  </ul>

  20:  <!-- Tab's content list -->

  21:  <ul class="tabs-content">

  22:      <li id="tab-content-id" class="active">

  23:          <!-- Example content -->

  24:          <h3>Tab content title</h3>

  25:          <p>

  26:              Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  27:          </p>

  28:      </li>

  29:      <li id="tab-content-id">

  30:          <!-- Example content -->

  31:          <h3>Tab content title</h3>

  32:          <p>

  33:              Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  34:          </p>

  35:      </li>

  36:      <li id="tab-content-id">

  37:          <!-- Example content -->

  38:          <h3>Tab content title</h3>

  39:          <p>

  40:              Lorem ipsum dolor sit amet, consectetur adipiscing elit.

  41:          </p>

  42:      </li>

  43:  </ul>

Embed video

Suppose you want to use the video from YouTube or Vimeo, once you got the default embed codes for sharing, you just wrap the codes with the div class "embed". Please see the code below for example:

   1:  <div class="embed">

   2:      <!-- Embed code from YouTube or Vimeo -->

   3:      <iframe src="http://www.youtube.com/embed/c9MnSeYYtYY" 

   4:          frameborder="0" allowfullscreen></iframe>

   5:  </div>

Note that you should remove the "width" or "height" attributes that come with the default embed codes. The above example already removed these attributes.

Create message boxes

Lamoon comes with 4 styles of message boxes. To see full demonstration, please open the file "elements/messageboxes.html". Now let's see the codes for creating one:

   1:  <div class="xxx box">

   2:      <!-- Message box content -->

   3:  </div>

Just replace the "xxx" with one of these followings:

• success
• error
• info
• warning

Configure PHPMailer

PHPMailer is used for sending email with the information from reservation and contact forms. There are 2 files in the folder "/php" which are:

• contact.php
• reservation.php

Both files do the same function - sending email with entered information to your email inbox. However, before it is going to work, you have to configure some values properly. Those values are about your SMTP server information for sending email. You can see from the codes below for the values you need to make change:

   1:  $site_owners_email = 'your@mail.com'; // Replace this with your own email address

   2:  $site_owners_name = 'uxbarn'; // Replace with your name

   3:  $mail->Host = "smtp.yoursite.com"; // Replace with your SMTP server address

   4:  $mail->Username = "user@smtp.com"; // SMTP username

   5:  $mail->Password = "yourpassword"; // SMTP password

Create accordion and toggle

For accordion, you could use the code pattern as following:

   1:  <!-- 

   2:      Use class value as "accordion". 

   3:      Assign the index number to "data-active-index" of item to make it active (start from 0).

   4:   -->

   5:  <div class="accordion" data-active-index="0">

   6:   

   7:      <!-- Item 1 (Index 0) -->

   8:      <h3><a href="#"> Title </a></h3>

   9:      <div>

  10:          Content

  11:      </div>

  12:      

  13:      <!-- Item 2 (Index 1) -->

  14:      <h3><a href="#"> Title </a></h3>

  15:      <div>

  16:          Content

  17:      </div>

  18:      .

  19:      .

  20:      .

  21:      <!-- Item N (Index N-1) -->

  22:      <h3><a href="#"> Title </a></h3>

  23:      <div>

  24:          Content

  25:      </div>

  26:      

  27:  </div>

For each toggle element, use this code pattern:

   1:  <!-- Use class value as "toggle" -->

   2:  <div class="toggle">

   3:      <h3><a href="#"> Title </a></h3>

   4:      <div>

   5:          Content

   6:      </div>

   7:  </div>

   8:   

   9:  <!-- Add "active" to the class if you want to make it opened by default -->

  10:  <div class="toggle active">

  11:      <h3><a href="#"> Title </a></h3>

  12:      <div>

  13:          Content

  14:      </div>

  15:  </div>

Credits

Lamoon uses many jQuery plugins as:

Social icons from: