Documentation by “Ansonika” v1.0

“ALLAIA - HTML Site template”

Created: 17 February 2020
Lat udpate:-
By: Ansonika

Thank you for purchasing my theme. If you have any questions, please post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. JavaScript
  4. Sources and Credit
  5. UPDATES

A) HTML Structure - top

It's based on Boostrap 4 framework grid. It's ULTRA RESPONSIVE!!. The item comes with SASS files for the primary styles.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. Below how the main style file is organized:

1. SITE STRUCTURE
- 1.0 Icons
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure
- 1.4 Navigation
- 1.5 Top banner
- 1.6 Owl Carousel
- 1.7 Mobile Menu

2. CONTENT
- 2.1 Home
- 2.2 General Listing

3. COMMON
- 3.1 Owl Carousel Custom Nav
- 3.2 Misc
- 3.3 Spacing
- 3.4 Sing In Modal
- 3.5 Modal popup
- 3.6 Pagination
- 3.7 Footer
- 3.8 Magnific Popup CSS

Note
1) To increase the Page Speed the we create a customized version of the Bootsrap Libray removing the not used styles and inclued as default. 
You can enable styles by uncomment inbootstrap.custom.css the styles needed in your project, then reminify the file.

2) To increase the Page Speed we inclued the main site css style in css/style.css;  for specific styles related and present only on specific pages, 
we create dedicated css files.

Example for listing.html (and listing variation pages):
<!-- SPECIFIC CSS -->
<link href="css/listing.css" rel="stylesheet">
The item comes with SASS  files.

3) Same logic for the some js files; js/common_func.js contain the scripts common for all pages of the template. Specific pages, have dedicate 
js files.

Example for listing.html (and listing variation pages):
<!-- SPECIFIC SCRIPTS -->
<script src="js/sticky_sidebar.min.js"></script>
<script src="js/specific_listing.js"></script>

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 35/40px) or better use an svg version. Below how is coded

<div id="logo">
	<a href="index.html"><img src="img/logo.svg" alt="" width="100" height="35"></a>
</div>

Home with video header (fallback with a background image in tablets and mobile: these devices does not support video autoplay as background due to reduce bandwith consume)

1)Save you mp4 and ogv video in the video folder.The name of the files must match the datasource tag:

Example
data-teaser-source="video/intro" (folder/name_files)=
intro.mp4
intro.ogv

You can change also the opacity in style.css 

video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0.6;
}

2) To change the fallback background image for mobiles and tablets open css/style.css and 
find this class (video on background is disable on tablet and mobiles due to bandwith consume limit):

@media (max-width: 1024px):
#hero_video{
background: #ccc url(../img/home_section_1.jpg);
background-size:cover;
background-position: center bottom;}

How Lazy Load Works

1) Owl Carosuel Lazy Load

<img src="img/lazy-placeholder.png" data-src="img/location_1.jpg" class="owl-lazy" alt="">

2) Lazy load images

<img src="img/location_list_placeholder.png" data-src="img/location_list_1.jpg" alt="" class="lazy">

or use for the src attribute a 1px gif transparent

<img src="data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACH5BAEAAAAALAAAAAABAAEAAAICRAEAOw==" 
data-src="img/cards_all.svg" alt="" width="198" height="30" class="lazy">

You can delete the "src" attribute and leave only "data-src", the page gain in performance with less
request to the server but the code result not W3C validated due the "src" attribute result missing.

Control the opacity of the header images in the inner pages

You can control the opacity of the header images via data attribute as the example below:	
	
.<div class="opacity-mask" data-opacity-mask="rgba(0, 0, 0, 0.5)">

Count Down Product Offer

Just simply set your data on the item > data-countdown 

<figure>
<span class="ribbon off">-30%</span>
<a href="product-detail-1.html">
<img class="img-fluid lazy" src="img/products/product_placeholder_square_medium.jpg" data-src="img/products/shoes/1.jpg" alt="">	
<img class="img-fluid lazy" src="img/products/product_placeholder_square_medium.jpg" data-src="img/products/shoes/1_b.jpg" alt="">	
</a>
<div data-countdown="2019/05/15" class="countdown"></div>
</figure>

THE GRID
Please refer to this documentation Boostrap

D) JavaScript - top

This theme use these Javascript (minified versions included). I've included the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder). Each page could have specific js related to the page.

common_scripts.js content:

E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.

Maybe you are interested in




Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

Just send an email via profile page form, we will check our availability; please don't forget to specify:

Ansonika

Go To Table of Contents