Documentation by “Ansonika” v1.6

“FINDOCTOR - HTML Site template”

Created: 13 October 2017
Last update: 1 December 2018
By: Ansonika

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to post a comment on item page. If you are happy with the theme, please TAKE A MOMENT TO RATE IT from your DOWNLOADS PAGE. Thanks so much!

Table of Contents

  1. HTML Structure
  2. CSS Files, Structure and basic modifications
  3. PHP contact form, newsltetter form and plan a visit form
  4. JavaScript
  5. Sources and Credit
  6. UPDATES

A) HTML Structure - top

This theme has a fixed centered layout 1170px. It's based on Boostrap 4 framework grid. It's ULTRA RESPONSIVE!!.

B) CSS Files Structure and basic modfication - top

The css files are inside the css folder (not minified and minified versions included) .To modify colors, typografy, button style ecc....find the realtive comment line in style.css. We reccomend to apply every changes in css/custom.css in order to makes future updates easly to apply. Below how the file is organized:

1. SITE STRUCTURE and TYPOGRAPHY
- 1.1 Typography
- 1.2 Buttons
- 1.3 Structure

2. CONTENT
- 2.1 Home
- 2.2 Listing
- 2.3 Map listing
- 2.4 Detail page
- 2.5 Login/register
- 2.6 404 page
- 2.7 Contact page

3. COMMON
- 3.1 Misc
- 3.2 List
- 3.3 Spacing
- 3.4 Scroll top button
- 3.5 Community badges
- 3.6 Pagination
- 3.7 Cookie bar

Note
Some pages required additional specific css (example) in the header, for example the detaild page and the blog page.
<!-- SPECIFIC CSS -->
<link href="css/date_picker.css" rel="stylesheet">
<link href="css/blog.css" rel="stylesheet">
The items comes with SASS  files.

Change the logo
To change the logo, simply use your PNG24 file (suggested logo height is 34px)Below how is coded

LOGO HOME VERSIONS WITH H1 FOR SEO PURPOSES (change sizes via css if you need in style.css). 
Suggested max height 35px.

<div id="logo_home">
	<h1><a href="index.html" title="Findoctor">Findoctor</a></h1>
</div>

LOGO INNER PAGES
<a href="index.html" title="Findoctor">
<img src="img/logo.png" data-retina="true" alt="" width="163" height="36">
</a>

REMEMBER to create the retina version that have double size of the orginal dimension and name it with _2x
(in this case for example width:290px height:68px logo_2x.png).

How MAPS works
Open js/map.js and find this line of code:

Let's take as example the map used in list.html page. Open js/map_listing.js.

'Doctors': [
			{
				name: 'Dr. Jhoanna Steel',
				location_latitude: 48.873792, 
				location_longitude: 2.295028,
				map_image_url: 'img/doctor_listing_1.jpg',
				type: 'Psicologist - Pediatrician',
				url_detail: 'detail-page.html',
				name_point: 'Dr. Jhoanna Steel',
				description_point: '35 Newtownards Road, Belfast, BT4.',
				get_directions_start_address: '', // leave empty if the user want to fill with his address
				phone: '+3934245255'
			},


The marker/pins are located in img/pins folder. Each pin name have to match with the category
name. In this case for example is Doctors.png...so automatically every point in the same category has the
same pin/marker (in this case doctors category). 
Of course you can add how many markers you need for multiple points or multimple categories.

CHANGE THE DEFAULT COLOR STYLE OF THE MAP
You can add you onw style for example in js/map_listing.js...look for this line (aprox line 84):

styles: []

inside of the square graphs, place you styles. You can find some nice premade styles 
here https://snazzymaps.com/.

HOW TO FIND THE PROPER COORDINATES
https://www.latlong.net/

Change the address of Google map in contact page: open mapmarker_func.js and change with your latitude and longitude + your full address. You can change also your map marker (that has to be png24); you can use also the psd provided in the psd folder.

//set up markers 
		var myMarkers = {"markers": [
				{"latitude": "51.511732", "longitude":"-0.123270", "icon": "img/map-marker.png"}
			]
		};
		
		//set up map options
		$("#map").mapmarker({
			zoom	: 14,
			center	: 'Covent Garden London', //YOUR FULL ADDRESS 
			markers	: myMarkers
		});
COMMON ISSUE ON GOOGLE MAP (if the Google map works locally but does not works once the site will be online)
In some cases Google require an api key for the Google map.

You can create your own "Standard api key" here 
by clicking on "GET KEY" BUTTON (on Authentication for the standard API—API keys section), 
and follow the steps.
https://developers.google.com/maps/documentation/javascript/get-api-key#key

Here some additionale info on how to create an API KEY http://thegrue.org/google-map-javascript-api-key/

Then replace at the bottom of every page that use Google map, this line

<script src="http://maps.googleapis.com/maps/api/js"></script> OR 
<script type="text/javascript" src="http://maps.googleapis.com/maps/api/js?sensor=false"></script>

with your api key included, like the example below
<script src="http://maps.googleapis.com/maps/api/js?key=YOUR_API_KEY"></script>


NOTE: if you apply an api key, the map locally does not load. You must upload your site.

Home with video header (fallback with a background image in tablets and mobile)

1)Save you mp4 and ogv video in the video folder.The name of the files must match the datasource tag:

Example
data-teaser-source="video/intro" (folder/name_files)=
intro.mp4
intro.ogv

You can change also the opacity in style.css 

video {
	position: absolute;
	top: 0;
	bottom: 0;
	left: 0;
	right: 0;
	opacity: 0.6;
}

2) To change the fallback background image for mobiles and tablets open css/style.css and 
find this class in the "responsive section"

@media (max-width: 1024px):
#hero_video{
background: #333 url(../img/hero_bg_1.jpg);
background-size:cover;
background-position: center bottom;}

THE GRID
Please refer to this documentation Boostrap

REVOLUTION SLIDER
Documentation


C) PHP files: Contact form - top

All the files you need are located in assets folder. If you need to change the allert messages open assets/validate.js. Below an example taken from contact.php; all the files are well commented.

Check availability form and contact form
It's the same logic and script of check newsletter. If you doesn't recieve the email please first check:
1) Your spam folder
2) If you hosting requires special settings (SMTP Authentication is not supported by the sc ript)
3) If your email has to be managed from the same hosting provider
4) Set the permission of the asset folder on your host to 755 your FTP client

D) JavaScript - top

This theme use these Javascript (minified versions included). i've included the common theme scripts in a single file for a fast edit and load (or if you prefer you can find the same js in separate files in js folder).

common_scripts.js content:

E) Sources and Credits - top

I've used the following images, icons or other files as listed. For the js listed below, you can find the more documentation on the relative sites.

Images are not included.

E) Updates - top

Version 1.6 1 December 2018

HOW TO UPDATE FROM PREVIOUS VERSION

1) Update the following files:
- js/bootstrap.js
- js/bootstrap.min.js
- css/bootstrap.css
- css/bootstrap.min.css
- js/common_scripts.js
- js/common_scripts.min.js

2) Update css/style.css - scss/style.scss or remove @import for google font
Add on every html pages:
<!-- GOOGLE WEB FONT -->
<link href="https://fonts.googleapis.com/css?family=Poppins:300,400,500,600,700,800" rel="stylesheet">

Same changes for the coming soon page and admin section (html pages + css/admin.css - scss/admin.scss)

3) Update css/menu.css - scss/menu.scss for the both versions of the item. Takes as reference the html pages
on how the third level is coded

4) Update js/common_scripts.js + js/common_scripts.min.js + js/functions.js (or follow the comments on code)
In css/style.css copy and paste the section /*Show/hide password*/ in 3.1 Misc or update css/style.css.
Takes as reference of course login.html, login_2.html, register.html for minor changes in the html input code.

5) Copy and paste this file js/markerclusterer.js + update js/map_listing.js

6) Update css/style.css or copy and paste the code in section /* Checkbox style */ in 3.1 Misc

7) Fixed table view: take as reference the html table code for example in detail_page.html

8) Update style.css or copy and paste the new code in section 2.9 Pricing page

9) Update style.css or copy and paste the new code in section 2.11 Home with map + new js/map_home.js

10) Update style.css or copy and paste the new code in section 2.10 Submit review

11) Update css/style.css or copy and paste the new code in section 2.12 About + update js/function.js (// Carousel)
+ update in css/style.css the section /*Carousel home page*/

12) Copy and paste the entire folder in admin_section/js/editor/. Taking as reference for example doctor-profile.html:

12.1 In the head add
<!-- WYSIWYG Editor -->
<link rel="stylesheet" href="js/editor/summernote-bs4.css">

12.2 The textarea in the html becomse <div class="editor"></div>

12.3 On footer
<!-- WYSIWYG Editor -->
	<script src="js/editor/summernote-bs4.min.js"></script>
	<script>
      $('.editor').summernote({
		fontSizes: ['10', '14'],
		toolbar: [
			// [groupName, [list of button]]
			['style', ['bold', 'italic', 'underline', 'clear']],
			['font', ['strikethrough']],
			['fontsize', ['fontsize']],
			['para', ['ul', 'ol', 'paragraph']]
		  ],
        placeholder: 'Write here your description....',
        tabsize: 2,
        height: 200
      });
    </script>

Version 1.5 23 March 2018

HOW TO UPDATE FROM PREVIOUS VERSION

1) Just take as reference index_6.html and copy the new folder rev-slider-files

2) Update the following files: common_scripts.js, common_scripts.min.js, bootstrap.js, bootstrap.min.js,
bootstrap.css, bootstrap.min.css

3) Update css/blog.css (class changed .article.blog .post_info line 106)

Version 1.4 16 January 2018

HOW TO FIX FROMPREVIOUS VERSIONS:
Open css/style.css  (both for menu_1 and menu_2) and under the section /*-------- 2.1 Home--------*/  
1) Aprox line 774

change this class
.hero_home.version_2 {
  background: none;
  position: relative;
  overflow: hidden;
}

into
.hero_home.version_2 {
  background: none;
  position: relative;
  overflow: hidden;
  height: 500px;
  display: block;
}

2) Aprox line 801

change this class
.hero_home.version_2 .content {
  background-color: #3e3f77;
  background-color: rgba(63, 64, 121, 0.9);
  padding: 0 20%;
}

into
.hero_home.version_2 .content {
  background-color: #3e3f77;
  background-color: rgba(63, 64, 121, 0.9);
  padding: 0;
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
}

Version 1.3 23 November 2017

Version 1.2 17 November 2017

Version 1.1 12 November 2017

How to update from previous versions

Please update the folling files: js/functions.js, css/style.css, css/menu.css

New content:
- Coming soon folder
- pricing-tables.html/pricing-tables-2.html: js/tables_func.js, tables_func_2.js, js/modernizr_tables.js, 
css/tables.css, img/small-arrow.svg
- faq.html
- register-doctor-working.html (update the assets folder)
- detail-page-working-booking.html (update the assets folder)

SASS UPDATES
_variables.scss
style.scss
menu.scss

SASS NEW FILES
_layout.scss
tables.scss

If you have question on specific sections updated please contact me via profile page 
https://themeforest.net/user/ansonika


========================================================================
ENCOURAGE ME FOR FURTHER UPDATES
Please take a moment to rate the item in your Themeforest downloads page.
How to rate: http://ansonika.com/profile/how-to-rate-themeforest-item.jpg

Maybe you are interested in




Once again, thank you so much for purchasing this theme. Please take a moment to rate it from your Downloads page.

Need support?

For support contact me using the form on my profile page with subject [ThemeForest Support] Template name, or submit a comment on item page. You will receive an answer within 24-48 hours (working days) GMT +1.

Need customization or availability for freelance projects?

Just send an email via profile page form; please don't forget to specify:

Ansonika

Go To Table of Contents