Documentation by “Ansonika” v1.7
“ALLAIA - HTML Site template”
Created: 17 February 2020
Lat udpate: 18 January 2023
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
A) HTML Structure - top
It's based on Boostrap 5 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 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 SCSS 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:
- jQuery 3.6.3
- Owl Carousel
- jQuery Mmenu
- jQuery Countdown
- MagnificPopup.js
- Wow.js
- Footer-reveal.js
- Lazy load images
- Boostrap.bundle.js
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.
- Bootstrap
- Jquery
- Owl carousel
- Footer-reveal.js
- Theia Sticky Sidebar
- Modernizr
- Magnific popup
- Jquery Countdown
- Mmenu.js
Images are not included.
E) Updates - top
Version 1.7 18 January 2023
- Updated jQuery Library V3.6.3
HOW TO UPDATE FROM PREVIOUS VERSION Update the following files: - js/common_scripts.js - js/common_scripts.min.js
Version 1.6 26 October 2022
- Updated to Bootstrap 5.2.2
HOW TO UPDATE FROM PREVIOUS VERSION Update the following files: - css/bootstrap.css - css/bootstrap.min.css - js/common_scripts.js - js/common_scripts.min.js NOTE: rename in the head of page the link to the BS library as below (we reported that many customers prefer the full library instead of a customized one) <link href="css/bootstrap.min.css" rel="stylesheet">
Version 1.5 4 May 2022
- Updated Bootstrap Library to 5.1.3
HOW TO UPDATE FROM PREVIOUS VERSION Updated Bootstrap Library to 5.1.3 1) Update the following files: css/bootstrap.css, css/bootstrap.min.css, css/bootstrap.custom.css, css/bootstrap.custom.min.css js/common_scripts.js, js/common_scripts.min.jsv.1.4 14 January 2022
- Updated documentation
- Updated to Bootstrap Version
- Updated jQuery Version
- Updated Google Font Link
HOW TO UPDATE FROM PREVIOUS VERSION 1) Updated to Bootstrap Version. Update the following files: - css/bootstrap.css - css/bootstrap.min.css - css/bootstrap.custom.css - css/bootstrap.custom.min.css - css/style.css (classes updated: .tooltip, .form-group, .container, .modal.newsletter) - js/functions.js (//Footer collapse script + //Tooltips) - js/common_scripts.js - js/common_scripts.min.js NOTE: you have to apply some changes in the html code of the page since in BS5 there are small differences. Below a short list or see here https://getbootstrap.com/docs/5.0/migration/ MODALS data-modal > data-bs-modal data-target > data-bs-target data-dismiss > data-bs-dismiss The code of te close button has been changed too. COLLAPSE AND TOGGLES data-toggle=.. > data-bs-toggle=... data-toggle=... > data-bs-toggle=... CLASSES .float-left > .float-start .float-right > .float-end .text-left > .text-start .text-right > .text-end .no-gutter > .g-0 2) Update js/common_scripts.js + js/common_scripts.min.js 3) Update the google font link in the head of the pages.v.1.2 18 February 2021
- Updated Documentation
- Updated Bootstrap Version
- Updated Jquery Version to 3.5x
- Added 2d level categories menu long list
- Added 3rd level categories menu
HOW TO UPDATE FROM PREVIOUS VERSION 1) Update the following files css/bootstrap_custom.css, css/bootstrap_custom.min.css, js/common_scripts.js, js/common_scripts.min.js 2) Update js/common_scripts.js, js/common_scripts.min.js 3) Takes as reference menu-cat-long.html and in css/style.css new styles under the comments /* menu long */ 4) Takes as menu-cat-3-levels.html and in css/style.css update the /* menu categories */ section
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 via the Support Tab on the item page. You will receive an answer within 24-48 hours (working days) GMT +1.- I only provide support for fixing bugs or issues on my original items.
- I don't provide free support for additional custom modifications to the items.
- Please provide your site link, screenshots and other information about your issue.
- Envato support terms
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:- if you are a company, agency or private user
- all the information about your projects, needs, site urls, project sheet, etc..
- from which country you are
- if you have a deadline
- if you have basic knowledge of HTML , CSS, JS, PHP
Ansonika