Citybook
Directory Listing Template
- Created: 03/02/2018
- latest Update: 22/04/2023
- By: KWST
- Email: support@kwst.net
Thanks for purchasing tempalte and for supporting my work. Citybook -Directory 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" , user navigation (dashboard pages)
Header style 2
Uses a class "center-header"
Wrapper
Contains : Tempale code (text images etc ).
.........Content.......
Footer
Fixed footer Uses a class "fixed-footer" .
Colors
By default, 'Citybook' has a global color - light blue ( 4DB7FE).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.
@charset "utf-8";
/*--
Color styles
--*/
.info-button:hover , .footer-social li a , .lost_password a:hover , .nav-holder nav li a.act-link , .nav-holder nav li a:hover , .testi-text:before , .testi-text:after , #footer-twiit .timePosted a:before , .map-popup-location-phone i , .map-popup-location-info i , .dark-header .nav-holder nav li ul a:hover , .main-register h3 span strong , .main-register label i , .listsearch-header h3 span , .listing-view-layout li a.active , .listsearch-input-text label i , .distance-title i , .listsearch-input-item i , .filter-tags input:checked:after , .more-filter-option:hover , .distance-title span , .selectbox li.selected , .mapzoom-in:hover , .mapzoom-out:hover , .footer-widget .widget-posts-date , .listsearch-input-text span.loc-act , .list-single-header-contacts li i , .viewed-counter i , .list-single-header-column .custom-scroll-link i , .list-single-header-cat span i , .scroll-nav-wrapper .scroll-nav li a.act-scrlink , .listing-features li i , .list-author-widget-contacts li span i , .list-author-widget-contacts li a:hover , .current-status i , .scroll-nav-wrapper .save-btn i , .list-single-contacts li i , .list-post-counter.single-list-post-counter i , .reviews-comments-item-date i , .list-single-main-item-title span , .custom-form label i , .custom-form .quantity span i , .box-widget.widget-posts .widget-posts-date i , .box-widget.widget-posts .widget-posts-descr a:hover , .team-social li a , .team-info h3 a:hover ,.section-title h2 a , section.color-bg .header-sec-link a:hover , .user-profile-menu li a.user-profile-act , .user-profile-menu li a:hover , .log-out-btn , .pass-input-wrap span , .header-user-name:before , .header-user-menu ul li a:hover , .reply-mail a , .dashboard-message-text h4 span , .profile-edit-page-header .breadcrumbs span , .profile-edit-page-header .breadcrumbs a:hover , .reviews-comments-item-link , .fuzone:hover .fu-text i , .radio input[type="radio"]:checked + span:before , .booking-details a , .booking-details span.booking-text , .dashboard-listing-table-address i , .post-opt li i , .list-single-main-item-title h3 a:hover , .post-opt li a:hover , .post-link i , .post-link:hover , .tl-text i , .tl-text h3 , .features-box .time-line-icon i , .features-box h3 , .images-collage-title span , .process-item .time-line-icon i , .card-post-content h3 a:hover , .card-listing .list-post-counter i , .section-subtitle , .process-item:hover .process-count , .footer-contacts li i , .main-search-input-item.location a , .card-listing .geodir-category-location i , .show-reg-form:hover , .show-search-button i , .menusb li a i , .menusb a.back:before , .menusb a.act-link , .sp-cont , .list-single-tags a:hover , .card-listing .geodir-category-content h3 a:hover , #footer-twiit a:hover , .subscribe-message.error a , .share-holder.hid-share .share-container .share-icon , .footer-contacts li a:hover , .listing-title a:hover {
color:#4DB7FE;
}
.navslide-wrap , .slide-progress , nav li a.act-link:before , .hs-nav .navslide-wrap.next-slide-wrap a , .folio-counter , .add-list , .section-separator:before , .listing-carousel-wrap .swiper-pagination .swiper-pagination-bullet.swiper-pagination-bullet-active , .card-btn:hover, .footer-widget #subscribe-button , .custom-form .log-submit-btn , .add-list , .parallax-section .section-separator:before , .sw-btn , .color-bg , .mapzoom-in , .mapzoom-out , .infoBox-close , .close-reg , .header-search-button , .listing-view-layout li a , .listsearch-input-item .selectbox , .rangeslider__fill , .fs-map-btn , .more-filter-option span , .back-to-filters , .back-to-filters span , .pin , .load-more-button , .footer-menu li:before , .pagination a.current-page, .pagination a:hover , .section-title .breadcrumbs a:before , .showshare , .scroll-nav-wrapper .scroll-nav li a:before , .list-single-main-wrapper .breadcrumbs , .list-widget-social li a , .btn.transparent-btn:hover , .btn.flat-btn , .accordion a.toggle.act-accordion , .custom-form .quantity input.qty , .widget-posts-link span , .box-item a.gal-link , .custom-form .selectbox , .photoUpload , .user-profile-menu li a span , .tabs-menu li.current a , .tabs-menu li a:hover , .header-social li a:hover , .main-search-button , .selectbox li:hover , .color-overlay , .trs-btn , .testi-counter , .to-top , .header-sec-link a , .card-btn , .profile-edit-page-header .breadcrumbs a:before , .dashboard-listing-table-opt li a.del-btn , .search-widget .search-submit , .box-widget-item .list-single-tags a , .reviews-comments-item-text .new-dashboard-item:hover , .step-item , .video-box-btn , .slick-dots li.slick-active button , .time-line-container:before , .error-wrap form .search-submit , .testimonials-carousel .slick-current .testimonilas-text , .cs-social li a , .cs-countdown-item:before , .listing-counter , .price-head , .price-link , .sp-cont:hover , .cluster div , .lg-actions .lg-next, .lg-actions .lg-prev , .log-out-btn:hover , .map-popup-category , .mapnavigation a:hover {
background:#4DB7FE;
}
.listing-view-layout li a.active , .rangeslider__handle , .list-author-widget-text .btn , .btn.transparent-btn , .log-out-btn , blockquote , .cluster div:before {
border-color:#4DB7FE;
}
.listing-rating i {
color:#FACC39;
}
.gradient-bg , .listing-geodir-category , .list-single-header-cat a , .box-widget-item .list-single-tags a:hover , .nav-holder nav li a:before{
background-color: #3EAAFD;
background: -webkit-gradient(linear, 0% 0%, 0% 100%, from(#3EAAFD), to(#49CEFF));
background: -webkit-linear-gradient(top, #3EAAFD, #49CEFF);
background: -moz-linear-gradient(top, #3EAAFD, #49CEFF);
background: -ms-linear-gradient(top, #3EAAFD, #49CEFF);
background: -o-linear-gradient(top, #3EAAFD, #49CEFF);
}
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. Icons size-five . Read the documentation plugin - it is described in detail how to change the icons size.
For example:
Contact Form
Find the file "contact_me" 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_me.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
Map Listing
To configure the Listing map in file maps.js find code :
var locations = [
[locationData('listing-single2.html', 'Hotels', 'images/all/1.jpg', 'Luxary Hotel-Spa', "1327 Intervale Ave, Bronx, NY ", "+38099231212", "5", "27"), 40.72956781, -73.99726866, 1, markerIcon],
[locationData('listing-single.html', 'Food and Drink', 'images/all/1.jpg', 'Luxary Restaurant', "W 85th St, New York, NY ", "+38099231212", "4", "5"), 40.76221766, -73.96511769, 2, markerIcon],
[locationData('listing-single.html', 'Gym - Fitness', 'images/all/1.jpg', 'Gym In CityCenter', "40 Journal Square Plaza, Jersey City, NJ", "+38099231212", "4", "5"), 40.88496706, -73.88191222, 3, markerIcon],
[locationData('listing-single.html', 'Shop - Store', 'images/all/1.jpg', 'Shop In City Mol', "75 Prince St, New York, NY ", "+38099231212", "4", "127"), 40.72228267, -73.99246214, 4, markerIcon],
[locationData('listing-single.html', 'Food and Drink', 'images/all/1.jpg', 'Luxary Restaurant', "34-42 Montgomery St, New York, NY", "+38099231212", "5", "43"), 40.94982541, -73.84357452, 5, markerIcon],
[locationData('listing-single.html', 'Gym - Fitness', 'images/all/1.jpg', 'Gym In CityCenter', "70 Bright St, Jersey City, NJ", "+38099231212", "4", "7"), 40.90261483, -74.15737152, 6, markerIcon],
[locationData('listing-single.html', 'Shop - Store', 'images/all/1.jpg', 'Shop In City Mol', "123 School St. Lynchburg, NY ", "+38099231212", "3", "4"), 40.79145927, -74.08252716, 7, markerIcon],
[locationData('listing-single2.html', 'Hotels', 'images/all/1.jpg', 'Fancy Hotel', "Mt Carmel Pl, New York, NY", "+38099231212", "5", "3"), 40.58423508, -73.96099091, 8, markerIcon],
[locationData('listing-single2.html', 'Hotels', 'images/all/1.jpg', 'Luxary Hotel-Spa', "1-30 Hunters Point Ave, Long Island City, NY", "+38099231212", "5", "12"), 40.58110616, -73.97678375, 9, markerIcon],
[locationData('listing-single3.html', 'Conference and Events', 'images/all/1.jpg', 'Web Design Event ', "726-1728 2nd Ave, New York, NY", "+38099231212", "5", "17"), 40.73112881, -74.07897948, 10, markerIcon],
[locationData('listing-single3.html', 'Conference and Events', 'images/all/1.jpg', 'Apartment Design Event ', "9443 Fairview Ave, North Bergen, NJ", "+38099231212", "4", "11"), 40.67386831, -74.10438536, 11, markerIcon],
];
Options :
1.'listing-single2.html' - link To single listing.
2.'Hotels' - category.
3.'images/all/1.jpg' - path to image.
4.'Luxary Hotel-Spa' - listing name.
5.'1327 Intervale Ave, Bronx, NY' - address.
6.'+38099231212' - phone number.
7.'5' - stars.
8.'27' -number of reviews.
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 :