# 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

- ####

- ####

- ####

- ####

- ####

####

####

                        Search...

                         Add Listing

                        5

                    Sign In

                                Keywords

                                Categories

                                Price Range

                                                        Affordable Urban Room
                                                         40 Journal Square  , NJ, USA
                                                        Price:  $ 1500 / per month

                                                        Family House
                                                         34-42 Montgomery St , NY, USA
                                                        Price:  $ 50.000

                                                        Apartment to Rent
                                                        75 Prince St, NY, USA
                                                        Price:  $100 / per night

                                         Clear all

                                                            Gorgeous house for sale
                                                              70 Bright St New York, USA
                                                            Price:  $ 52.100

                                                            Family Apartments
                                                             W 85th St, New York, USA
                                                            Price:  $ 72.400

                                             Compare

                                Language: EN

                                        English
                                        Franais
                                        Espaol
                                        Deutsch

                                Currency: USD

                                        USD
                                        EUR
                                        GBP
                                        RUR

### 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 :

Youtube

add 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"

VImeo

add 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"
        });

### Share your pages

To configure the plugin in file scripts.js find line :

            networks: [ "facebook", "pinterest" , "twitter", "linkedin" ]

You can simply add a comma in line: social: 'facebook','pinterest', 'twitter','linkedin' 'foursquare' , 'flickr', 'digg' , 'tumblr', 'vimeo' , 'stumbleupon' separated names of social networks .

### 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".

How to find icon code : Open https://fontawesome.com/icons?d=gallery , click on icon and copy and paste code .

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 :

Add your your date in : data-countDate="09/12/2019" .

### Sources & Credits

Fonts
http://www.google.com/fonts
Images
Shutterstock
http://www.shutterstock.com/

Icons
Font-Awesome
http://fortawesome.github.io/Font-Awesome/

Javascripts
JQuery
http://jquery.com

JQuery Easing
http://gsgd.co.uk/sandbox/jquery/easing/

Swiper
https://swiperjs.com/

isotope
http://isotope.metafizzy.co/

Lightgallery
http://sachinchoolur.github.io/lightGallery/

### Updates

### Thanks

Thanks for purchasing template and for supporting my work. If we fail here in this documentation, please e-mail me support@kwst.net. If you have a spare time, please go and rate my template. I will apreciate that.

Thanks