Created: 29/05/2014
By: ThemeStarz
Email: [email protected]
Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!
You can choose between three header types:
To set your favorite header style you need to add some classes in the <body> tag:
1. For Default Navigation:
<body class="">
// your HTML content
</body>
For default navigation you don't need to use any class.
2. For Navigation Fixed to Bottom:
<body class="navigation-fixed-bottom has-fullscreen-map">
// your HTML content
</body>
Note: Note the has-fullscreen-map class. It must be used when you use navigation-fixed-bottom
3. For Navigation Fixed to Top:
<body class="navigation-fixed-top">
// your HTML content
</body>
Zoner is the first real estate template which supports OpenStreetMap. So you can choose between these maps:
Setting the Homepage map:
map-google class to the <body> tag<script type="text/javascript" src="assets/js/custom-map.js"></script>_latitude, _longitude and call function createHomepageGoogleMap(_latitude,_longitude); before </body> end tag
<body class="map-google">
// your HTML content
<script type="text/javascript" src="assets/js/custom-map.js"></script>
<script type="text/javascript" src="assets/js/custom.js"></script> // this script needs to be called every time
<script>
_latitude = 48.87; // These two lines represent the center of your map
_longitude = 2.29; // These two lines represent the center of your map
createHomepageGoogleMap(_latitude,_longitude);
</script>
</body>
map-osm class to the <body> tag<script type="text/javascript" src="assets/js/custom-map.js"></script>_latitude, _longitude and call function createHomepageOSM(_latitude,_longitude); before </body> end tag
<body class="map-osm">
// your HTML content
<script type="text/javascript" src="assets/js/custom-map.js"></script>
<script type="text/javascript" src="assets/js/custom.js"></script> // this script needs to be called every time
<script>
_latitude = 48.87; // These two lines represent the center of your map
_longitude = 2.29; // These two lines represent the center of your map
createHomepageOSM(_latitude,_longitude);
</script>
</body>
You can use parallax effect when scrolling on map and slider.
For the Map:<div id="map" class="has-parallax"></div>
<div id="slider" class="has-parallax">...</div>
You can enable small thumbnails in the footer to make your web more interesting for users. This is just a funny feature,
but it can make your real estate site quite unique. Properties are loaded from locations.js so they
are your real properties.
In case you don't want to display these thumbnails, open custom.js and delete the call for
drawFooterThumbnails(); function.
Zoner loads properties data from locations.js file as default. It contains array with properties parameters.
Example:
[
"2479 Murphy Court", // Title
"Minneapolis, MN 55402", // Locations
"$36,000", // Price
48.87, // Latitude
2.29, // Longitude
"property-detail.html", // Link to the property detail page
"assets/img/properties/property-01.jpg", // Property thumbnail image
"assets/img/property-types/apartment.png" // Property type icon
],
You can use block class if you want to add padding-up and padding-down to the whole section. To enable this effect, simply add
has-parallax class on map or slider element.
<div class="block">
<section id="your-section">
// your HTML content
</section>
</div>
Zoner uses an SCSS files for styling. If you want to edit source SCSS files, you need to use an SCSS Compiler. Or you can edit regular CSS files located in assets/css
To edit colors, you can open SCSS file located atassets/scss/_variables.scss. But you need mentioned SCSS compiler. Otherwise you can replace all occurrences of the same color in CSS file located at assets/css/style.css
An user can contact you using contact form in the footer. To set e-mail address where you want to receive e-mails and other settings open contact.php located in root directory.
contact.php settings you can change:$to = '[email protected]'; // Here you can set address for receiving emails (usually your email) $subject = 'Message From Your Website Contact Form'; // Message displayed in "subject" label in email
Direct reply to users email
You can also change, how you want to reply to email. You can set the email "from" to be the email which user has provided in contact form,
so you can directly reply him, just to click on "reply" button in your email interface. The code is this:
$headers = 'From: ' .$email . "\r\n"; // Email "from" the same as user has provided. Default state
One incoming email address or "noreply" address
Or you can use one address widely known as "[email protected]" and users email address
will be displayed in body of the message. Then you need to uncomment (remove "//" dashes) of the commented code and comment the code above.
The final code should look like this:
//$headers = 'From: ' .$email . "\r\n"; $headers = 'From: [email protected]' . "\r\n"; $body .= ""; $body .= "Email: "; $body .= $email; $body .= "\n";
Note: Your hosting provider has to support PHP in order to make the contact form work.
// newMarkers[i].setVisible(true); and remove slashes //// newMarkers[i].setVisible(false); and remove slashes //To enable RTL support for Zoner you need to add:
<link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" type="text/css"> <link rel="stylesheet" href="assets/css/rtl.css" type="text/css">
after the style.css in <head> tag, so it looks like:
<link rel="stylesheet" href="assets/css/style.css" type="text/css"> <link rel="stylesheet" href="assets/css/bootstrap-rtl.min.css" type="text/css"> <link rel="stylesheet" href="assets/css/rtl.css" type="text/css">
You need also call for using or not using RTL in Owl Carousel. Default is false. There are two states:
These states are use in function initializeOwl() which is at the bottom of the page.
$(window).load(function(){
initializeOwl(true);
});
Icons used
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.
Theme Starz