“Dental Clinic Medical HTML Template” Version 1.8


“Dental Clinic Medical HTML Template”

Thank you for purchasing our theme. If you have any questions that are beyond the scope of this help file, please contact us at fvdthemes@gmail.com


Table of Contents

  1. Files Structure
  2. HTML Structure
  3. LESS Files and Structure
  4. Color schemes
  5. JavaScript
  6. Sources and Credits
  7. Changelog
  8. Location Map
  9. Booking form

A) Files Structure - top

HTML Structure

B) HTML Structure - top

This theme is a responsive layout with 1-12 columns. Here is the general structure.

HTML Structure

C) LESS File and Structure - top

The file is separated into sections using:

	/*---------------------------------------
         1 VARIABLES           
        -----------------------------------------*/

        some code

        /*---------------------------------------
         2 GLOBAL STYLES           
        -----------------------------------------*/
	
        some code
	
        /*---------------------------------------
         3 TOP BAR           
        -----------------------------------------*/
	
        some code
	
        etc, etc. 

If you would like to edit a specific section of the site, simply find the appropriate label in the LESS file, and then scroll down until you find the appropriate style that needs to be edited. Then compile LESS file to theme.css


D) Color schemes - top

Check the "css/master.css". You will find an available link with all colors. Blue is the default color. Likewise, if you want to use any other color, you can remove the comment and make another color active.

HTML Structure

Otherwise, simply replace the variables in the file "less/theme.less" to create your own unique color scheme. Then compile LESS file to theme.css

HTML Structure

E) JavaScript - top

This theme imports three Javascript files.

  1. jQuery
  2. Bootstrap
  3. OWL Carousel
  4. Fancybox - plugin for popups
  5. Isotope - plugin for masonry layout and filtering items
  6. Form Validator - plugin for animation
  7. My custom scripts
  8. And some other plugin

F) Sources and Credits - top


G) Changelog - top

Contact Form

Attachment contains the working script for the contact form sendmail.php

In order for the script to work, you must add the form tag to the page - contacts.html

<form action="js/sendmail.php" role="form" method="post" autocomplete="off" id="contactForm">

Contact form

So, you need to make the connection to the library jquery.form.js

<script src='js/jquery.form.js'></script>

Contact form

To initialize your form, you need to access the file theme.js

var options = {
target: '.message .alert',
beforeSubmit: showRequest,
success: showResponse
};
$('#contactForm').ajaxForm(options);
function showRequest(formData, jqForm, options) {
var queryString = $.param(formData);
return true;
}
function showResponse(responseText, statusText) {
}

Contact form

Added styles for the contact form

Contact form


H) Location Map - top

To change the location in the map, please read following instructions:

1. Open Google map, select an object and copy its coordinates (location).

Google map

2. Open the file js/theme.js and replace the coordinates in line 526 with correct ones.

Google map

3. Refresh the page.


I) Booking Form - top

Change email

To change the email that will be receiving all incoming emails, you need to update /js/sendmail-book.php

Booking email

If you want to receive incoming email at several emails, you need to write the emails using comma: email_1, email_2, email_3 etc...

Instruction of booking form installation, in the template v1.2-1.5 (in version 1.6 and above you don't need to do that)

1. To make the form operational, you need to add the code that will include the script. You need to add it to all pages.
	<!-- JQUERY FORM -->
	<script src='js/jquery.form.js'></script> 
			

2. Add file sendmail-book.php in the folder name js

3. In theme.js add Ajax Bookform script. Add after the Contact form:
	/*=======================================
    Bookform
    =========================================*/

    $(document).on('click', '.message-close-button', function(){
        $(this).parents('.message').dequeue().hide('fast');
    });

    if($('.bookform-form').length !== 0){

        $(document).on('focusin', '.bookform-form .error', function(){
            $(this).parents('.bookform-form').find('.form-messages .message').dequeue().hide('fast');
        });


        $('.bookform-form').submit(function(){

            var $form_block = $(this),
                form_url = $form_block.prop('action'),
                $messages = $form_block.find('.form-messages'); 

            $.ajax({
                type: "POST",
                data: $form_block.serialize(),
                url: form_url,
                success: function(data){
                    $messages.html('');
                    $(data).appendTo($messages);

                    $suc = $form_block.find('.message-success');
                    $er = $form_block.find('.message-error');

                    if ($suc.is(':visible')){
                        $er.hide('fast');
                        $suc.show('fast').delay('4000').hide('fast');
                        $form_block.clearForm();
                    } else {
                        $suc.hide('fast');
                        $er.show('fast');
                    }
                }
            });

            return false;

        });

    }
		

Booking form

4. In the booking forms you need to remove the numbers located in the end of attribute name.
Example:
name="name1,2,3..." -> name="name"
name="phone1,2,3..." -> name="phone"
name="email1,2,3..." -> name="email"
name="date1,2,3..." -> name="date"
name="time1,2,3..." -> name="time"
name="message1,2,3..." -> name="message"
because sendmail-book.php uses such names.

5. In the end of the Form, after latestrow add <div class="form-messages form-messages-modal"></div>, where class form-messages-modal which is responsible for form notifications will appear as modal windows. All booking forms are required to have that class.

Booking form

6. You need to add the followingto the tag
<form class="bookform-form" action="js/sendmail-book.php" role="form" method="post">
class bookform-form is required!

Booking form

7. In the styles /css/theme.css pleaese add the following:
	.message-close {position:relative;}
	.form-messages-modal .message {
		position:absolute;
		left:50%;
		top:50%;
		z-index:20;
		transform:translate(-50%,-50%);
	}
	.message-close-button {
		display:block;
		position:absolute;
		right:5px;
		top:5px;
		background:none;
		border:none;
		width:20px;
	}
	.message-close-button .fa {
		font-size:16px;
	}
	.message-item-list {
		padding:5px 0 0 0;
	}
	.message-close .alert {
		padding:25px;
	}
			



If you want to add Doctor name in the email, add his/her name in hidden input, where there are no doctor names
<input type="hidden" name="form-doctor" value="Custom Doctor Name">
anywhere in the form.


Once again, thank you so much for purchasing this theme. Like I said in the beginning, I'd be glad to help you, if you have any questions related to this theme. No guarantees, but I'll do my best to assist. If you have any other general questions related to the theme at ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

Go To Table of Contents