Rhythm Documentation
Hello & Welcome! Thank you for purchasing!
If you have any questions, feel free to contact us at support@bestlooker.pro. Find more HTML templates on www.bestlooker.pro.
Created: 19/01/2015. Updated: 30/03/2016
Template Features
- One Page and Multi Page Demos
- 50+ Different Demos
- 180+ HTML Files
- 40+ Portfolio Pages
- 5 Single Project Pages
- Light, Dark and Transparent Menu Bars
- Isotope portfolio filtering
- Revolution Slider: you save $14.00
- Easy to customize: backgrounds, color schemes, content
- Fully responsive
- Retina ready
- Font Awesome 400+ icons
- Et-line 100+ icons
- Powered with Bootstrap
- Parallax sections
- Smooth animation
- Working Ajax contact form with validation
- Google Maps easy to setup via data attributes
- 9 Blog layouts
- 5 Posts variants (Text post, Image, Gallery, Video, Quote)
- Powerful shortcodes
- Responsive video (YouTube, Vimeo, Blip.tv, Viddler, Kickstarter)
- Browser compatibility (IE9+, Chrome, Safari, Firefox, Opera)
- Well documented
- Clear & Neat design
- Accurate HTML code with comments
- Layered PSD files included
- FAQ Included
Getting Started
Unzip the archive and find out the folder www. There are all the template files in this folder. You can open the following files for viewing in browser.
- /css — folder with css files.
- /fonts — folder with icon fonts.
- /images — folder with image files.
- /js — folder with Javascript files.
- /php — folder with PHP files.
-
/rs-plugin — folder with Slider Revolution files.
- intro.html — page with the list of template pages.
- index.html, index-01.html, index-02.html, index-03.html, ... — different one page demos.
- mp-index.html, mp-index-01.html, mp-index-02.html, mp-index-03.html, ... — different multi page demos.
- blog-*.html — blog pages.
- elements-*.html — shortcodes pages.
- portfolio-*.html — portfolio pages.
- pages-*.html — pre designed content pages.
-
shop-*.html — shop pages.
- contact_me.php — file with contact form settings.
- contact_me_smtp.php — file with contact form settings (SMTP method).
- contact_reservations.php — file with reservations form settings.
- contact_reservations_smtp.php — file with reservations form settings (SMTP method).
Upload the template files (inside the folder www) to server with the help of one of the FTP-clients (for example, Total Commander).
Note: for the correct operation of all functions of the template, including AJAX methods of Contact form, you must upload the template to web-server.
Note: You can find contact form customization guide inside the section "Contacts Section".
Logotype
To change logotype in the dark navigation panel, find image images/logo-dark.png and replace it with your logo.
Note: to ensure Retina ready, the width and height of the image should be twice bigger than the values specified in the attributes width and height. By default, the tag’s attributes logo size is set 118x27, but the actual size of the image is 236x54px.
To change logotype in the white navigation panel, find image images/logo-white.png and replace it with your own logo.
Note: to ensure Retina ready, the width and height of the image should be twice bigger than the values specified in the attributes width and height. By default, the tag’s attributes logo size is set 118x27, but the actual size of the image is 236x54px.
Menu Bar
You can choose one of the few variants for the navigation bar:
- White menu bar
- White menu bar (transparent)
- Dark menu bar
- Dark menu bar (transparent)
White Menu Bar
HTML structure of the White Menu Bar looks like this:
White menu bar (transparent)
The HTML structure of the White menu bar (transparent) is similar to the structure of White Menu Bar but has extra classes:
Dark Menu Bar
The HTML structure of the Dark Menu Bar is similar to the structure of White Menu Bar but has extra class — dark:
Dark Menu Bar (transparent)
The HTML structure of the Dark Menu Bar (transparent) is similar to the structure of White Menu Bar but has extra classes:
Menu Bar: top fixed
To make the menu bar fixed to top, add extra class — stick-fixed:
Page Section
The standard section has the following HTML structure:
About Studio
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur eu adipiscing lacus, a iaculis diam. Nullam placerat blandit auctor. Sed at enim ipsum. Nulla accumsan ipsum et nibh rhoncus, eget tempus sapien ultricies. Donec mollis lorem vehicula.
Section With Background
To change the background image, open HTML file and replace the value of data-background attribute of this construction:
...
Section Extra Classes
You can use next modification classes to customize page section:
| Class Function: |
Modification class for
<section>
tag
|
|---|---|
| To make dark background: |
.bg-dark .bg-dark-lighter
|
| To make dark overlay: |
.bg-dark-alfa-30 .bg-dark-alfa-50 .bg-dark-alfa-70 .bg-dark-alfa-90 .bg-dark-alfa
|
| To make gray background: |
.bg-gray .bg-gray-lighter
|
| To make light overlay: |
.bg-light-alfa-30 .bg-light-alfa-50 .bg-light-alfa-70 .bg-light-alfa-90 .bg-light-alfa
|
| To make color background: |
.bg-yellow .bg-orange .bg-red .bg-purple .bg-blue .bg-cyan .bg-green
|
| To make active color overlay: |
.bg-color-alfa-30 .bg-color-alfa-50 .bg-color-alfa-70 .bg-color-alfa-90 .bg-color-alfa
|
| Parallax for image background: |
.parallax-1 .parallax-2 .parallax-3 .parallax-4 .parallax-5 .parallax-6 .parallax-7 .parallax-8 .parallax-9 .parallax-10
Note: If you want to use parallax, you need delete class
bg-scroll from section tag. |
Vertical Rhythm Utility
You can use next modification classes to set block margins and paddings:
| Screen size: | Modification class |
|---|---|
| Default |
margin-top
mt-10 mt-20 ... mt-140
margin-bottom
mb-10 mb-20 ... mb-140
padding-top
pt-10 pt-20 ... pt-140
padding-bottom
pb-10 pb-20 ... pb-140
|
| max-width: 1200px |
margin-top
mt-lg-10 mt-lg-20 ... mt-lg-140
margin-bottom
mb-lg-10 mb-lg-20 ... mb-lg-140
padding-top
pt-lg-10 pt-lg-20 ... pt-lg-140
padding-bottom
pb-lg-10 pb-lg-20 ... pb-lg-140
|
| max-width: 1024px |
margin-top
mt-md-10 mt-md-20 ... mt-md-140
margin-bottom
mb-md-10 mb-md-20 ... mb-md-140
padding-top
pt-md-10 pt-md-20 ... pt-md-140
padding-bottom
pb-md-10 pb-md-20 ... pb-md-140
|
| max-width: 768px |
margin-top
mt-sm-10 mt-sm-20 ... mt-sm-140
margin-bottom
mb-sm-10 mb-sm-20 ... mb-sm-140
padding-top
pt-sm-10 pt-sm-20 ... pt-sm-140
padding-bottom
pb-sm-10 pb-sm-20 ... pb-sm-140
|
| max-width: 767px |
margin-top
mt-xs-10 mt-xs-20 ... mt-xs-140
margin-bottom
mb-xs-10 mb-xs-20 ... mb-xs-140
padding-top
pt-xs-10 pt-xs-20 ... pt-xs-140
padding-bottom
pb-xs-10 pb-xs-20 ... pb-xs-140
|
| max-width: 480px |
margin-top
mt-xxs-10 mt-xxs-20 ... mt-xxs-140
margin-bottom
mb-xxs-10 mb-xxs-20 ... mb-xs-140
padding-top
pt-xxs-10 pt-xxs-20 ... pt-xxs-140
padding-bottom
pb-xxs-10 pb-xxs-20 ... pb-xxs-140
|
Portfolio Section
The structure of the filter of works looks like this:
Data-filter attribute is the name of the category of the works, on the basis of which the dynamic filtering is made. More - http://isotope.metafizzy.co/filtering.html
Lightbox Project Item
The lightbox with photo project item structure looks like this:
Hand
The lightbox with video project item structure looks like this:
Hand
The last classes of the tag <li class="work-item mix category-1 category-2"> belong to categories by which the projects are filtered.
Single Page Project Item
The single HTML page project item structure looks like this:
Bicycles
The last classes of the tag <li class="work-item mix category-1 category-2"> belong to categories by which the projects are filtered.
Contacts Section
You able to use two different send mail methods: PHP Mail function and SMTP.
PHP Mail Function Method
To configure the contact form, open file contact_me.php and enter your email in this line (~line 4):
$to_Email = "your-email@domain.com";
SMTP Method
If your web hosting doesn't support PHP Mail function, you can use SMTP method. To configure the contact form with SMTP method, open file contact_me_smtp.php and enter your email, host, username and password in this code fragment (~line 4-11):
$to_Email = "support@bestlooker.pro"; // Replace with recipient email address
$subject = 'Message from my website'; // Subject line for emails
$host = "smtp.mail.yahoo.com"; // Your SMTP server. For example, smtp.mail.yahoo.com
$username = "your.email@yahoo.com"; //For example, your.email@yahoo.com
$password = "1234567"; // Your password
$SMTPSecure = "ssl"; // For example, ssl or tls
$port = 465; // For example, 465
After that you need to open file contact-form.js (line ~39) and change this line:
$.post('contact_me.php', post_data, function(response){
to this line:
$.post('contact_me_smtp.php', post_data, function(response){
Reservations Form
To configure the reservations form, open file contact_reservations.php and enter your email in this line (~line 4):
$to_Email = "your-email@domain.com";
SMTP Method (Reservations Form)
To configure the reservations form with SMTP method, open file contact_reservations_smtp.php and enter your email, host, username and password in this code fragment (~line 4-11):
$to_Email = "support@bestlooker.pro"; // Replace with recipient email address
$subject = 'Message from my website'; // Subject line for emails
$host = "smtp.mail.yahoo.com"; // Your SMTP server. For example, smtp.mail.yahoo.com
$username = "your.email@yahoo.com"; //For example, your.email@yahoo.com
$password = "1234567"; // Your password
$SMTPSecure = "ssl"; // For example, ssl or tls
$port = 465; // For example, 465
After that you need to open file contact-reservations-form.js (line ~39) and change this line:
$.post('contact_reservations.php', post_data, function(response){
to this line:
$.post('contact_reservations_smtp.php', post_data, function(response){
Newsletter Form
To configure the newsletter form, open file /js/jquery.ajaxchimp.min.js and replace mailchimp form action url with your mailchimp list url (~line 9):
url: "http://bestlooker.us10.list-manage.com/subscribe/post?u=e16312d09b1b43f5c26fc526c&id=195aaab5cb" //Replace this with your own mailchimp post URL.
NOTE: How to find mailchimp form action URL?
Google Maps
The Google Maps code looks like this:
Open the map
Close the map
Replace the value of attribute data-address with your own address.
Appear Animation
If you want to use appear inimation for some element, you need to add class wow fadeIn to this element and set data attribute like this:
...
The full list of appear animation effects you can find here - http://daneden.github.io/animate.css/.
FAQ
-
How to remove smooth scroll?
Find and delete the line (in the end of the page):
-
How to remove appear animation from page elements?
Find and delete the classappear-animateform<body>tag.
-
Why some videos might not work?
Ajax methods of Jquery are used for some videos and they can work only on the real server. For the correct operation of all functions, upload your website on a real server.
-
Why contact form may doesn’t work?
For the correct operation of contact form, the php support is necessary. Upload your website on a server with support of PHP.
-
Why there are no images that were in live demo?
Envato forbids including demonstration images to templates’ files.
Credits
All the photos used in this template are intended only to illustrate the template and all the rights on them belong to their legal owners.
- jQuery
- jQuery Easing Plugin
- Bootstrap
- Jquery WOW
- jQuery.appear
- Owl Carousel
- jQuery countTo Plugin
- Jquery Gmap3
- FitVids
- jQuery.localScroll
- jQuery.scrollTo
- mb.YTPlayer
- jQuery Parallax
- Isotope
- Masonry
- Smooth Scroll
- Sticky
- jQuery.Viewport
- Placeholder
- Magnific Popups
- Simple Text Rotator
Support
If you have any questions, feel free to contact us at support@bestlooker.pro.
© www.bestlooker.pro 2016