Documentation by “Ansonika” v1.3

“ALBERT - HTML Site template”

Created: 21 April 2016
Last update: 28 Feb 2017
By: Ansonika

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to 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. PHP contact form, newsltetter form and plan a visit form
  4. JavaScript
  5. Sources and Credit
  6. UPDATES

Updates

V.1.3 (28 Feb 2017)

V.1.2 (18 August 2016)

V.1.1 (26 July 2016)

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap framework grid 3.3.6. It's ULTRA RESPONSIVE!!
It comes with 2 HEADER versions.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home
- 2.2 Room list
- 2.3 Room details
- 2.4 About
- 2.5 Gallery
- 2.6 Faq
- 2.7 Contact us

3. COMMON
- Preloader
- Spacing
- Containers
- Input form style
- Incrementer
- List
- Tooltips
- Parallax
- Carousel, Tabs, Collapse
- etc

IMPORTANT

All the common css styles and google font are imported in base.css...this for a fast editing and more clean code. 
Then some pages have on top some specific css style.

BASE.CSS
@import url("https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700");	/* Fonts */
@import url("animate.min.css"); /* Animate */
@import url("bootstrap.min.css");	/* Main Bootstrap */
@import url("menu.css");		/* Menu styles */
@import url("style.css");	/* Main theme styles */
@import url("responsive.css");	/* Responsive */
@import url("fontello/css/icon_set_1.css");	/* Icon pack */
@import url("fontello/css/icon_set_2.css");	/* Icon pack */
@import url("fontello/css/fontello.css");	/* Icon pack */
@import url("magnific-popup.css");	/* Lightbox & dialog script */

Change the logo
To change the logo, simply use your PNG24 file; we suggest a max height of 40px. For the header transparent version the logo works a bit different. You have to set 2 logo images: one white and the other black that appear once scroll the page. Below an example:

<a href="index.html" id="logo">
<img src="img/logo.png" width="190" height="23" alt="" data-retina="true" class="logo_normal">
<img src="img/logo_sticky.png" width="190" height="23" alt="" data-retina="true" class="logo_sticky">
</a>

Home with video header (fallback with a background image in tablets and mobile)

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

2) To change the fallback background image (on tablets and mobiles the video bg is not supported)
 open responsive.css an find this class

#hero_video {
background: #333 url(../img/sub_header_home.jpg);
background-size:cover; 
background-position: center center
}

Home with text rotator

Taking as reference index_3.html, simply add your rotate words separated by commas like the example below:
 <h1>Order <strong id="js-rotating">Takeaway,Delivery,Quick</strong> Food</h1>

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address to center the map. You can change also your map marker (that has to be png24).

//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
			]
		};
		
		//set up map options
		$("#map").mapmarker({
			zoom	: 14,
			center	: 'Covent Garden London', //YOUR FULL ADDRESS 
			markers	: myMarkers
		});
COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
In some cases Google require an api key for the Google map.

You can create your own "Standard api key" here 
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section), 
and follow the steps.
https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then replace at the bottom of every page that use Google map, this line

<script src="http://maps.googleapis.com/maps/api/js"></script> OR 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>

Set up site launch page located in coming_soon folder
Open functions.js and find this line of code:

SET THE DATE
Open site_launch/js/functions.js and find this line.

var target = new Date("July 15 2014 13:30:00 GMT+0100"); //replace with YOUR DATE

SET NEWSLETTER EMAIL
Open site_launch/assets/newsletter.php and find this commented code.

//$address = "your email address";
$address = "test@domain.com";

How to use the icon font libraries

1) Choose the icon from these pages 
icon-pack-1.html
icon-pack-2.html
icon-pack-3.html

2) Copy an paste the class name…for example from here icon-pack-1.html
<i class="icon-music"></i>

3) You can change the size via style inline
<i class="icon-music" style="font-size:18px"></i>

THE GRID
Please refer to this documentation Boostrap


C) PHP files: Contact form, Check availability form, Newsletter, Leave a review, Newsletter in site launch - top

All the files you need are located in assets folder(for the coming soon is coming_soon/assets). Below an example taken from newsletter.php; all the files are well commented.

Common issues
f you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings
3) If your email has to be managed from the same hosting provider
4) Set the permission of the asset folder on your host to 755 your FTP client
5) SMTP authentication is not supported

NOTE: a special note for the room_detail/room_detail _2 check availability....there is an hidden input that identify the room type. So if you duplicate this page...for example a single room type page....you have to change this input field value. Below an example:

<input name="room_type" id="room_type" type="hidden" value="Double room">

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 load.

common_scripts_min.js content:

Below a full list of js used.

E) Sources and Credits - top

I've used the following images, icons or other files as listed.

Images are not included.

D) Updates - top

V.1.2

1) Issue on Safari Latest IOS on home page orange price box animation:
This is issue is related to animate.css FlipxIn/FlipyIn, we suggest to use another effect that works in safari…for example
<span class="wow zoomIn"><sup>$</sup>120<small>Per night</small></span></figure>

or try another one
http://daneden.github.io/animate.css/

2) Issue on Firefox Mac IOS render Poppins Google Font: 
copy from css/style.css all the css included in the sections /* This is for popins font for firefox */ ;
in the body selector add font-weight:300.




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, 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; please don't forget to specify: Themeforest Support Policy

Ansonika

Go To Table of Contents