Homeradar
- Real Estate Listing Template
- Created: 26/10/2021
- latest Update: 26/10/2021
- By: KWST
- Email: support@kwst.net
Thanks for purchasing tempalte and for supporting my work. Homeradar - Real Estate Listing Template. This documentation will not teach you HTML & CSS, it's just showcase of custom elements used in template.
Very important ! In order to work php scripts (contact form)- your site files must reside on the local host or server. In turn, you can easily edit any page (all JavaScript files will work).
Files
All site files are divided into folders:
css folder - css files that are responsible for the style themes.
js folder - javascript files.
php folder - php files.
video folder - video files.
images folder - folder that contains all images.
fonts folder - folder that contains fonts plugin "Font-Awesome".
Header
Contains : Logo , naviagtion , search form , button "add listing" , singin/out form , user navigation (dashboard pages) , language menu and wishlist container
5
Sign In
-
-
-
Clear all
Wrapper
Contains : Tempale code (text images etc ).
.........Content.......
Footer
Contains : about widget , contact widget , last news and language menu.
Colors
By default, 'Homeradar' has uses three colors - light blue (#40B69E).To change the color, you must do the following steps:
1. Locate the folder css file color.css and open it with your text editor.
2.In this file, you should find a line responsible for the color theme. Look at the code below.
3. Just replace the six numbers and letters after the lattice in the file "color.css". Forgot to mention the theme color using hex format. If you want to add color format "rgba" then need to remove the lattice. If you do not know where to find the code of the color you click on this link.
/*--
color style
--*/
.color-bg , .sb-btn-wrap:before , .irs-bar , .irs-slider , .irs-bar-edge , .nice-select .option.focus, .nice-select .option.selected.focus , .main-register-holder .tabs-menu li.current a , .tolt::after , .scrollbar-inner .simplebar-scrollbar:before , .list-single-carousel-wrap .sw-btn , .breadcrumbs-list a:before , .slick-dots li.slick-active button , .footer-social li a , .scroll-nav li a.act-scrlink , .scroll-nav li span , .gal-link , .show-info span , .accordion a.toggle.act-accordion , .accordion a.toggle span , .pac-item:hover , .progress-indicator:before , .header-modal .tabs-menu li.current a , .categoties-column_container li a span , .categoties-column_container li a.act-category , .pagination a.current-page, .pagination a:hover , .cluster-visible , .more-filter-option-btn.mfilopact , .agent-card-social li a , .card-info-content_social li a , .content-tabs li.current a , .tags-stylwrap a:hover , .cat-item li span , .user-profile-menu li a.user-profile-act:before , .user-profile-menu li a span , .dashboard-stats i , .chat-contacts-item:after , .message-counter , .dashboard-addnew_btn:hover , .onoffswitch-inner:before , .dashboard-title-item:before , section.single-par2 .section-title:after , .contact-social li a:hover , .category-column:hover , .hero-notifer a , .listing-filters a.gallery-filter-active , .services-opions li i , .listing-carousel-wrapper.lc_hero .lc-wbtn , .hero-title.ht-column:before , .soc-log a {
background:#3270FC;
}
.nav-holder nav li a i , .login-btn i , .header-search-button i , .dec-icon , .close-reg , .filter-tags input:checked:after , .custom-form .filter-tags input:checked:after , .lost_password a:hover , .filter-tags label a , .show-reg-form:hover i , .cart-btn:hover i , .clear-wishlist , .widget-posts-descr-price span , .geodir-category-location a i , .widget-posts-descr h4 a:hover , .list-single-carousel-wrap .sw-btn:hover , .breadcrumbs-list span , .show-more-snopt , .like-btn i , .show-more-snopt-tooltip a i , .pwh_counter span , .profile-widget-header-title h4 a , .contats-list li a:hover , .contats-list li span i , .pass-input-wrap .eye ,.footer-list li:before , .footer-list li a:hover , .subfooter-nav li a , .footer-contacts li a:hover , .fw_hours span strong , .scroll-nav li a:hover , .list-single-header-price , .list-single-stats li span i , .list-single-facts .inline-facts-wrap i , .footer-contacts li span i , .share-btn i , .list-single-main-item-title h3 span , .reviews-comments-item-date span i, .reviews-comments-item-date a i , .rate-review span , .reviews-comments-item-text .box-widget-menu-btn , .print-btn , .label:before , .info-window-content h1 , .pac-icon:before , #sbt , .geodir-category-content_price , .geodir_save-btn , .compare-btn , .lc-wbtn , .compare-top-btn , .header-opt_btn span:after , .header-opt-modal-item h4.lang-cur-act:after , .bwc_download-list a i , .bwc_download-list a:hover:before , .listing-features li i , .profile-widget-footer .custom-scroll-link:hover , .grid-opt li.grid-opt_act span.act-grid-opt , .list-main-wrap-title h2 span , .more-opt_btn span i , .close_msotw , .map-popup-price, .list-searh-input-wrap-title i , .more-filter-option-btn i , .loc-acta , .nice-select:after , .rooms-details-header h5 span , .rooms-area , .ssw-btn , .map-modal-close , .ftr-btn:hover , .agent-card-social li a:hover , .agent_card-title h4 a:hover , .agent-post_descr_counter span , .small-facts li span strong , .price-num-item , .pricing-header h3 span , .cat-item li a:hover , .search-widget .search-submit , .post-opt li i , .cat-item.cat-item_dec li:after , .accordion-lite-header i , .accordion-lite-header.acc_open , .faq-nav li a.act-scrlink , .faq-nav li a:before , .error-wrap a.btn , .error-wrap form .search-submit , .compare-link h4 a:hover , .compare-counter span , .dashbard-menu-avatar h4 span , .user-profile-menu li a i , .log-out-btn , .dashboard-stats-count , .tfp-btn:before , .tfp-btn strong , .tfp-det p a , .dasboard-widget-title h5 i , .chat-contacts-item .chat-contacts-item-text span , .main-dashboard-message-text a , .main-dashboard-message-time i , .mark-btn , .reviews-comments-item-text h4 a span , .dashboard-listings-item_opt li a , .dashboard-listings-item_opt .viewed-counter i , .dashboard-listings-item_content h4 a:hover , .dashboard-search-listing button , .radio input[type="radio"]:checked + span:before , .fuzone .fu-text i , .remove-rp , .add-room-item i , .dasboard-scrollnav-wrap li a:hover , .dasboard-scrollnav-wrap li a.act-scrlink , .photoUpload-files span i , .bookings-item-header h4 a , .bookings-item-footer li a , .agent-card-facts li span , .dashbord-totop , .dashboard-footer-links li a , .section-title h4 , .team-content h5 , .team-social li a , .services-item i , .serv-link , .about-title h4 , .services-item h4 span , .share-container a , .contact-social li a , #message div strong , .cnt-list a , .contact-notifer a , .contact-form-header h4 , .header-opt-modal-item h4 span , .card-info .box-widget-menu-btn:hover i , .listing-filters a i , .hero-notifer a:hover , .secondary-nav li a:hover , .nav-holder nav li a:hover , .menusb a.act-link , .menusb a.back , .menusb li i , .close_sb-filter , .map-close , .dashboard-submenu li a i , .dashboard-submenu-title span , .dashboard-submenu li a:hover , .dashbard-menu-close , .nav-holder nav li a.act-link{
color:#3270FC;
}
.cluster-visible:before , blockquote , .fuzone {
border-color:#3270FC;
}
.gradient-bg , .api-btn:hover , #subscribe-button:hover , .notification.success-notif , .dashboard-list:hover , .onoffswitch-inner:after , .add-room-item:hover , .btn:hover , .add-list:hover , .clear_wishlist:hover , .log_btn:hover , .testim-link:hover , .footer-social li a:hover , .main-search-button:hover , .slsw_vis , .vishf , .vis-hiddenfilter2 , .dashboard-menu-btn:hover , .soc-log a:hover{
background: linear-gradient(to right, #3C6AFD, #57C7FA);
}
.green-color , .verified-badge , .header-opt-modal-list li a:before , .card-verified , .pricing-content li:before , .dashboard-stats-count span strong {
color:#40B69E;
}
.green-bg , .review-notifer , .new-bookmark{
background:#40B69E;
}
.blue-bg{
background:#3270FC;
}
.card-verified.cv_not , .pricing-content li.not-included:before{
color:#EF8C9B;
}
Images
All images are in the folder "images".
How to add and change the background image
To change the background you can simply change the path in the style rendered in html code, for example :
Icons
All icons are generated by the plugin "Font-Awesome". List of all the icons can be found here.
To change the icon, you have to copy and paste the code icon at the right place for you.
For example:
Contact Form
Find the file "contact" in the folder php . In this file, find the line $to_Email = "myemail@gmail.com"; and add you e-mail.
How to forward mail to your mailbox ask your Hosting Service Provider. Because providers use different control panel site and I find it hard to predict what you use. Server side script for sending emails is in "contact.php" . Ajax submit is initialized in "scripts.js" file.
// contact form ------------------
$("#contactform").submit(function() {
var a = $(this).attr("action");
$("#message").slideUp(750, function() {
$("#message").hide();
$("#submit").attr("disabled", "disabled");
$.post(a, {
name: $("#name").val(),
email: $("#email").val(),
comments: $("#comments").val()
}, function(a) {
document.getElementById("message").innerHTML = a;
$("#message").slideDown("slow");
$("#submit").removeAttr("disabled");
if (null != a.match("success")) $("#contactform").slideDown("slow");
});
});
return false;
});
$("#contactform input, #contactform textarea").keyup(function() {
$("#message").slideUp(1500);
});
Video
This template uses Youtube Vimeo and html5 video as background . To add your video in html file find line :
Youtubeadd you video id in data-vid="" if you want add sound change data-mv="1" on data-mv="0"
Html5
add you video id in source src="video/1.mp4" type="video/mp4"
VImeoadd you video id in source data-vim="97871257"
And yet the video does not play on smartphones :( - so if a user comes to your site from a mobile browser - the background is replaced by a picture :)
Subscribe mailchimp
To set up the subscription form, you must perform the following steps :
1. Sign up on mailchimp . It's free.
2. Next, open the Lists --- Signup forms --- Embedded forms
3. Locate the folder js file scripts.js and open it with your text editor.
4.In this file, you should find a code :
// mailchimp------------------
$("#subscribe").ajaxChimp({
language: "eng",
url: "https://gmail.us1.list-manage.com/subscribe/post?u=1fe818378d5c129b210719d80&id=a2792f681b"
});
$.ajaxChimp.translations.eng = {
submit: "Submitting...",
0: ' We will be in touch soon!',
1: ' You must enter a valid e-mail address.',
2: ' E-mail address is not valid.',
3: ' E-mail address is not valid.',
4: ' E-mail address is not valid.',
5: ' E-mail address is not valid.'
};
5.In the form Copy/paste onto your site copy code "https://gmail.us1.list-manage.com/subscribe/post?u=1fe818378d5c129b210719d80&id=a2792f681b" For example :
$('#subscribe').ajaxChimp({
language: 'eng',
url: "https://gmail.us1.list-manage.com/subscribe/post?u=1fe818378d5c129b210719d80&id=a2792f681b"
});
Map Single
To configure the single map in HTML file find code :
And add your own values data-latitude="40.7427837" data-longitude="-73.11445617675781". To find the coordinates - visit this link
Show on the map (popup map) . Add coordinates in data-newlatitude="40.72956781" data-newlongitude="-73.99726866"
Example:
On the map
Map Listing
To configure the Listing map in file maps.js find code :
var locations = [
[locationData('listing-single2.html', 'Apartment', 'images/all/3.jpg', 'Gorgeous house for sale', "70 Bright St New York, USA", "600.000" , "Sale"), 40.72956781, -73.99726866, 0, markerIcon],
[locationData('listing-single.html', 'Apartment', 'images/all/1.jpg', 'Luxury Family Home', "40 Journal Square , NJ, USA", "320.000" , "Sale"), 40.76221766, -73.96511769, 1, markerIcon],
[locationData('listing-single.html', 'House', 'images/all/9.jpg', 'Family house for Rent', "34-42 Montgomery St , NY, USA", "700 / per month" , "Rent"), 40.88496706, -73.88191222, 2, markerIcon],
[locationData('listing-single.html', 'House', 'images/all/6.jpg', 'Contemporary Apartment', "W 85th St, New York, USA", "1,600.000" , "Sale"), 40.72228267, -73.99246214, 3, markerIcon],
[locationData('listing-single.html', 'Villa', 'images/all/5.jpg', 'Kayak Point House', "75 Prince St, NY, USA", "500.000" , "Sale"), 40.94982541, -73.84357452, 4, markerIcon],
[locationData('listing-single.html', 'Apartment', 'images/all/8.jpg', ' Urban House', "70 Bright St, Jersey City, NJ USA", "1500 / per month" , "Rent"), 40.90261483, -74.15737152, 5, markerIcon],
[locationData('listing-single.html', 'Apartment', 'images/all/4.jpg', 'Park Avenue apartment', "123 School St. Lynchburg, NY ", "1000 / per month" , "Rent"), 40.79145927, -74.08252716, 6, markerIcon],
[locationData('listing-single2.html', 'Hotel', 'images/all/25.jpg', 'Fancy Hotel', "Mt Carmel Pl, New York, NY", "1.200.000" , "Sale"), 40.58423508, -73.96099091, 7, markerIcon],
[locationData('listing-single2.html', 'Office', 'images/all/7.jpg', 'New York Office Center', "1-30 Hunters Point Ave, Long Island City, NY", "510 / per month" , "Rent"), 40.58110616, -73.97678375, 8, markerIcon],
[locationData('listing-single3.html', 'Hotel', 'images/all/27.jpg', 'Apartment to rent in Queens', "726-1728 2nd Ave, New York, NY", "1800 / per month" , "Rent"), 40.73112881, -74.07897948, 9, markerIcon],
[locationData('listing-single3.html', 'Office', 'images/all/3.jpg', 'Beautiful Flat in Manhattan', "9443 Fairview Ave, North Bergen, NJ", "800.000" , "Sale"), 40.67386831, -74.10438536, 10, markerIcon],
];
Options :
1.'listing-single2.html' - link To single listing.
2.'Apartment' - category.
3.'images/all/1.jpg' - path to image.
4.'Gorgeous house for sale' - listing name.
5.'70 Bright St New York, USA' - address.
6.'600.000' - price.
6.'Sale' - status.
8.'40.72956781' - longitude.
9.'-73.99726866' -latitude.
10.'0' - id for function "Show on the map".
Next step you need api key . To find key visit this link . And add your key in each page in code :
Counter
To configure the date in html file find code :