TWILLI | Air

Documentation by “Twilli Themes” v1.0
Email: twilli.themes@gmail.com

Table of Contents

  1. About TWILLI Air Theme
  2. What's Included
  3. HTML Structure
  4. Main Menu
  5. Sections
  6. Page Background Images
  7. Content Popups
  8. Carousel
  9. Image Carousel in Popup
  10. Contact Form
  11. Social Icons
  12. Sources and Credits

About TWILLI Air Theme - top

TWILLI Air is a responsive one-page scroll HTML/CSS/JS theme/template, with a simple and minimalist concept.

The template is best suited for websites with minimal and concise content, but allows for more content to be displayed in elegant popups.

Bootstrap 3.1.1 is used in the theme sections structure.

What's Included - top

Included with this theme are the following:

HTML Structure - top

The main page (index.html) of TWILLI Air is structured as follows:

<div id="outer-container"> <!-- LEFT SIDEBAR --> <section id="left-sidebar"> <!-- logo --><div class="logo"></div> <!-- main menu --><ul id="main-menu"></ul> </section> <!-- MAIN CONTENT --> <section id="main-content"> <!-- section 1 --><article id="section1" class="section-wrapper"></article> <!-- section 2 --><article id="section2" class="section-wrapper"></article> <!-- section 3 --><article id="section3" class="section-wrapper"></article> <!-- etc --> </section> <!-- FOOTER --> <section id="footer"> <!-- social icons --><ul class="social-icons"></ul> <!-- copyright text --><div class="footer-text-line"></div> </section> </div>

To edit the main menu, you have to look for the <ul id="main-menu">.

Sections - top

Each website section is contained in an <article class="section-wrapper"> tag inside the <section id="main-content">.

Page Background Images - top

The theme is designed to have at least ONE high-resolution page background image, which stretches along the whole page.

To set the default page background image, insert the image URL in the <div id="outer-background-container"> at the beginning of the <body> tag, as indicated:

<div id="outer-background-container" data-default-background-img="[background image URL]" style="background-image:url([repeat same background image URL]);"> </div> As a fix for IE9 browsers, repeat same background image URL in the footer of the index.html file (Javascripts section), as indicated: $(document).ready(function(){ jQuery("#outer-background-container") .backstretch("[repeat same background image URL]"); });

Custom Page Backgrounds for each section

The theme allows the possibility for the background image to change whenever a user scrolls to each section.

You can set a different background image for each section by including the image URL in the "data-custom-background-img" attribute for each <article class="section-wrapper">. (Read Sections above for more about each section)

If no background image is specified for a section, the default background image is shown by default.

Semi-transparent black overlay

The theme design includes a semi-transparent patterned black overlay on top of the background images. This ensures that the white text is readable. If you want to remove this overlay, comment/remove the <div class="background-image-overlay"></div>.

Content Popups - top

Although TWILLI Air theme is intended to be minimalist as possible, you can still include more content in popups.

To add a new popup, create a <div class="content-to-populate-in-modal"> anywhere inside the page, give it a unique id, and insert content, as below:

<div class="content-to-populate-in-modal" id="[unique id]"> [... content which will be included in the popup ...] </div>

Then, to link a button/link to this popup, add an onClick event to the link/button as indicated below:

<a href="" onClick="populate_and_open_modal(event, '[unique id of popup content');" class="btn btn-outline-inverse btn-sm">read more</a>

TWILLI Air theme includes a Bootstrap carousel in one of the sections (<article id="carousel">).

Each carousel within the page should consist of the following (taking our example as guide):

Image Carousel in Popup - top

The theme also includes Owl Carousel, a responsive slider/carousel which allows you to create elegant image sliders.

In TWILLI Air, Owl Carousel can be placed inside a popup (see section Content Popups above), and initialised when the popup is opened.

The content for the image carousel is placed inside the <div class="content-to-populate-in-modal"> as below:

<div class="content-to-populate-in-modal" id="[modal-id]"> <!-- Owl Carousel Start --> <div id="unique-id-for-image-slider" class="owl-carousel popup-image-gallery"> <!-- slide --> <div> <h6 class="caption">Caption for Image 1</h6> <img class="lazyOwl" data-src="assets/images/other_images/bg1.jpg"> </div> [...] </div> <!-- Owl Carousel End --> </div><!-- .content-to-populate-in-modal -->

Every Owl Carousel which are found inside a popup and have a class of ".popup-image-gallery" are initialised in the /js/initialise-functions.js when the popup is visible, using the Bootstrap "shown.bs.modal" carousel event handler:

$('#common-modal').on('shown.bs.modal', function() { [Owl Carousel parameters] });

The Owl Carousel parameters here can be modified how you want. More information on these can be found on the Owl Carousel website: www.owlgraphic.com/owlcarousel

Since the carousel is in a popup, an extra function in /js/initialise-functions.js destroys the carousel when the popup is closed (it would be re-initialised when popup is re-opened). This is done using the Bootstrap "hide.bs.modal" carousel event handler and the Owl Carousel destroy() function:

$('#common-modal').on('hide.bs.modal', function() { [...] });

Please note that although TWILLI Air comes with this type of image carousel INSIDE a popup, you can still use Owl Carousel anywhere in the theme where you want. If you want to do so, or to create a different carousel with different parameters, use the same HTML described above but remove the class ".popup-image-gallery". Then, intialise it in /js/initialise-function.js or at the footer of the page using the unique ID of that particular carousel instead of the class.

Contact Form - top

When installing this theme, it is important to change the email address at the top of the assets/php/mail.php file to the email address that you want this form to send to.

The form includes the following fields:

Social Icons - top

To edit the social icons list, you have to look for the <ul class="social-icons">.

Sources and Credits - top

Resources:
Fonts:
Images:

Ignite

Go To Table of Contents