BizBookDirectory & Listings Template

Overview

After downloaded the template package from Themeforest, unzip it if you haven't already. Inside the package you will find the following files and folders:

• World Tour
  • Documentation
  • HTML
    • css
      • icon.woff2
      • bootstrap.css
      • fileinput.min.css
      • fonts.css icon.woff2
      • jquery-ui.css
      • style.css
      • theme-color.css
    • font
    • images
    • js
      • slick.js
      • blazy.min.js
      • bootstrap.min.js
      • custom.js
      • custom_validation.js
      • html5shiv.js
      • image-upload-24.js
      • imageuploadify.min.js
      • jquery.min.js
      • jquery.simplePagination.min.js
      • jquery.validate.min.js
      • jquery-ui.js popper.min.js
      • respond.min.js
      • select-opt.js
    • index.html
    • all-listing.html
    • listing-details.html
    • login.html
    • pricing-details.html

Installion

Follow these easy steps to install the template from scratch:

1. Connect to your website with an Ftp client (eg. FileZilla)
2. Upload the contents of the whole /Template folder to your desired root folder
3. Once uploaded, edit the template files according to your needs, than save
4. Refresh your browser in order to see the modifications

Editing

To edit the files in this template, you need a text / code editor software installed on your computer. Below, there are some popular free code editor softwares:

• Visual Studio Code (Recommended)
• Sublime Text (Recommended)
• Notepad++ (Windows)
• TextMate (Mac)

Html Files

In the unzipped archive, you will find the following html template files:

The main html template file is index.html

Css Files

In the HTML/css folder, you will find the following structure:

• css/
  • bootstrap.css
  • fileinput.min.css
  • jquery-ui.css
  • style.css
  • theme-color.css

The default css stylesheet of the theme is style.css

Script Files

In the HTML/js/ folder, you will find the following structure:

• js/
  • slick.js
  • blazy.min.js
  • bootstrap.min.js
  • custom.js
  • custom_validation.js
  • html5shiv.js
  • image-upload-24.js
  • imageuploadify.min.js
  • jquery.min.js
  • jquery.simplePagination.min.js
  • jquery.validate.min.js
  • jquery-ui.js popper.min.js
  • respond.min.js
  • select-opt.js

The main javascript files of the theme is custom.js

Icon Files

In the HTML/css/ folder, you will find the following structure:

• css/
  • Materializecss Icons
  • fonts.css
  • icon.woff2

The above fonts are same font family and it's support all browsers.

view more Materializecss Icons MaterializeCSS Icons

3.1: SOURCE CODE STRUCTURE: HEADER SECTION

The header section defind for meta tags, website title, fav icon, google fonts and style sheets(css files)

1. Meta tag : The meta tag provides metadata about the HTML document. Metadata will not be displayed on the page, but will be machine parsable. Meta elements are typically used to specify page description, keywords, author of the document and more
2. Title tag : Title for your website
3. Fav icon : Favicons appear in the browser tab, address bar, browser history, bookmarks bar, etc
4. Google Font : A simple and easy way to add custom google fonts to your website.
5. Style Sheets(CSS Files) Style Sheet files

3.2: SOURCE CODE STRUCTURE: BODY SECTION

The body section defind for header, slider, band, services, free consultant and more..

1. Pre loader : This division shows from before website loading.
2. Header : Contain logo, login details and search options
3. Services category : This section showing the service category
4. Trending cetegory : Contain the trending categoy listings
5. Top service providers : This section showing the top service provider details
6. Feature events : This section showing the feature event with image and caption
7. Footer add business banner :
8. Footer : This footer section common for all pages and it's covered quick support, top category, trending category and more quick links.

3.3: SOURCE CODE STRUCTURE: FOOTER SECTION

The footer section defind for tips before travel, popular travels, contact details and copyrights

1. Tips before travel This section contain Tips before travel, customer testimonials and Arrangements..
2. Footer 1 This section show Offer tour packages and Popular Vacations
3. Footer 2 This section show Address,Subscribe,FAQ,Locations and Social Media.
4. Footer Copyrights Copy rights section
5. Script files All Jquery and JavaScript files here.

HOME PAGE

3.1.1: Change logo

1. Open up index.html from the /HTML/ folder
2. On find this class".ic-logo ", here update your logo path.

3.1.2: Searchbox value update

1. Open up custom.js from the /HTML/js folder
2. Go to search function
3. Common search: Update your search terms one by one.
4. City search: Update your city names one by one.

3.1.3: Home page services box

1. Open up index.html from the /HTML/ folder
2. Image size: Service category image size should be 640 X 480 px
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

3.1.4: Home page trending category

1. Open up index.html from the /HTML/ folder
2. Image size: Trending category background image size should be 640 X 960 px
3. Image size: Trending category tail image size should be 150 X 150 px
4. Image format: You better to use .JPG, .PNG or .JPEG image format
5. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

3.1.5: Youtube video

1. Open www.youtube.com
2. Get iframe code from your video(Ex:Right click over the video and copy your iframe code)
3. Open up index.html from the /HTML/ folder
4. Find the class name ".country-inn" and replace your ifame code to execting code

ALL LISTING

3.1.6: All listing page: Add new feature in LHS feature filter

1. Open up all-listing.html from the /HTML/ folder
2. You can copy one "li" tag and page it the same place.

3.1.7: All listing page: Add new sub-category

1. Open up all-listing.html from the /HTML/ folder
2. You can copy one "li" tag and page it the same place.

3.1.8: ADS banners on LHS

1. Open up all-listing.html from the /HTML/ folder
2. Image size: Service category image size should be 590 X 300 px
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

3.1.9: Add new listing in all listing page

1. Open up all-listing.html from the /HTML/ folder
2. Find this class name "all-list-sh".
3. Each and every listings inside the "li" tag
4. If you need any additional listing means you just copy and past "li" tag like below

3.1.10: Listing quick view

1. Open up all-listing.html from the /HTML/ folder
2. Once you clicking the "Quick view" button then showing short information on right panel.
3. Mouse leaveing option disable: Just remove below code from js/custom.js

3.1.11: Listing rating

1. Open up all-listing.html from the /HTML/ folder
2. Rating icons you can refer this link www.materializecss.com/icons.html

LISTING DETAILS

3.1.12: Listing detail: profile and banner image

1. Profile image size: listing banner image size should be 250 X 250 px
2. Banner image size: listing banner image size should be 1600 X 400 px
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

3.1.13: Listing detail: slider

1. Slider image size should be 700 X 450 px
2. Copy "carousel-item" div and paste it bottom
3. Image format: You better to use .JPG, .PNG or .JPEG image format
4. Image compressed: Please compressed your images before upload to server, it's helpful for increase page loading time. You can use this website for compress your images www.tinypng.com

3.1.14: 360 Degree MAP

1. Find this class name("list-360") on listing-details.html from the /HTML/ folder
2. Copy your code from execting code
3. Open your 360 image on google(click share or embed image)
4. Get your iframe code from google and paste execting code
5. Note: Remove all inline css

3.1.14: GOOGLE MAP

1. Open up listing-details.html from the /HTML/ folder

2. Get your iframe code from google map
3. Note: Remove all inline css

LOGIN AND REGISTER

3.1.6: Login

1. Open up login.html from the /HTML/ folder

3.1.7: Register

1. Open up login.html from the /HTML/ folder

3.1.8: Forgot password

1. Open up login.html from the /HTML/ folder

Script Sources

• jQuery
• Bootstrap

Font Sources

• Google Webfonts
• FontAwesome

Css Sources

• Bootstrap 5

Image Sources

• Allfreephotos

Note: Images used in the theme preview are only for demo purposes and not included in the main download.