Documentation for Klinik Template

Welcome

Thank you for purchasing our Klink template. If you have any questions that are beyond the scope of this help file, please feel free to contact us here pepdev or mail us at support@pepdev.com.

Klinik is a HTML5 & CSS3 responsive template created for clinic and hospital but also can be used for generalised website.Klinik is best suited for Hospital like Doctor Portfolio, Clinic, Hospital and Dental Clinic etc. It’s fully responsive design and clean, was tested on all major handheld devices. It is a fully responsive, feature rich and beautifully designed to host a website or create online identity. We have created 40+ pages and 90+ components or shortcodes for this template and much more in future. It supports bootstrap framework and intergrated font awesome icon set so easy to customise and develop your own styles. Klinik is a retina ready so it works nicely on smartphones, tablet PCs and desktops. Easily customisable, 24/7 support time.

General Information

Software requirements

  • Sublime Text 3 used to edit the .HTML, .JS, .PHP, .CSS and .SCSS files.
  • Koala used as precompiler for SCSS to CSS convert.

The following scheme displays the theme files structure.

  • Documentation - contains documentation on template cusotmisation and support
  • Template - contains the main files of the template. which will be uploaded on server.
    • CSS - contains all Stylesheets used for UI.
    • Font Awesome - contains Font awesome files.
    • Fonts - contains Bootstrap icon files.
    • Images - contains all the images.
    • Inc - contains PHP files ofr Form.
    • Js - contains all javascript library or plugin files.
    • SASS - contains all SCSS and variable files.
    • Upload - contains all uploaded files.
    • index.html - contains all UI code.
    • + More.html - contains all UI code.
  • Screenshot - Contains screenshot of template.
  • Sources - contains source files.
    • sass - contains .scss files used in template.
    • Multiple Color Stylesheet - contains .css files used in template.
  • readme.txt - contains the information about theme

File Strucutre

HTML Structure

This template has a responsive layout. It has a block structure, one block on grey background and the other on an image (pattern) background.

CSS Structure

If any styles need to be changed just replace it with the wanted styles in the respective block in your colored style-color.css.

Js Strucutre

This template has dynamic animations, which have been implemented in JavaScript. The JS file is custom.js

Reference File

In this theme we have used google font open+sans. You can learn more on using Google Web Fonts by checking the tutorial on how to work with Google web Fonts.

JQuery Plugin:

In this theme jQuery libraries and plugins have been used for dynamic animation.

  • jQUery (js/jquery-2.1.4.min.js)
  • Bootstrap (js/bootstrap.min.js)
  • Bootstrap Datetimepicker (js/bootstrap-datetimepicker.min.js)
  • Metarial Theme (js/material.min.js)
  • Fullcalendar (js/fullcalendar.min.js)
  • Counterup (js/jquery.counterup.js)
  • Flexslider (js/jquery.flexslider.min.js)
  • Magnific Popup (js/jquery.magnific-popup.min.js)
  • Waypoint (js/jquery.waypoints.min.js)
  • Scroll to Fixed (js/jquery-scrolltofixed-min.js)
  • Momento (js/moment.min.js)
  • Owl Carousel (js/owl.carousel.min.js)

Stylesheet (CSS) Reference File

  • Animate (css/animate.css)
  • Bootstrap (css/bootstrap.min.css)
  • Bootstrapdatetimepicker (css/bootstrap-datetimepicker.min.css)
  • Material Theme (css/material.min.css)
  • Material Select list (css/mdl-selectfield.min.min.css)
  • Fullcalendar (css/fullcalendar.min.css)
  • Flexslider (css/flexslider.css)
  • Magnific Popup (css/magnific-popup.css)
  • Owl Carousel (css/owl.carousel.min.css)
  • Owl Carousel theme (css/owl.theme.default.css)

Font awesome Icon

Font Awesome icons have been used in this theme. Learn more about font awesome icon from font awesome website. In a single collection, Font Awesome is a pictographic language of web-related actions. Easily style icon color, size, shadow, and anything that's possible with CSS. Font Awesome icons are vectors, which mean they're gorgeous on high-resolution displays.

Pages Nomenclature

We have designed 40+ pages for klinik template. You can easily use it and customise it as you want. We have used bootstrap layout structure. See below for their file nomenclature.

  1. Home Style 1 - index.html
  2. Home Style 2 - index-1.html
  3. Home Style 3 - index-2.html
  4. Home Style 4 - index-3.html
  5. Home Style 5 - index-4.html
  6. Home Style 6 - index-5.html
  7. Services Style 1 - service-1.html
  8. Services Style 1 with Right Sidebar - service-4.html
  9. Services Style 1 with Left Sidebar - service-7.html
  10. Services Style 2 - service-2.html
  11. Services Style 2 with Right Sidebar - service-5.html
  12. Services Style 3 - service-3.html
  13. Services Style 3 with Right Sidebar - service-6.html
  14. Services Style 3 with Left Sidebar - service-8.html
  15. Services Style 4 - service-9.html
  16. Services Style 4 with Right Sidebar - service-10.html
  17. Single Service Page - service.html
  18. Doctors Style 1 - doctors-1.html
  19. Doctors Style 1 with Right Sidebar - doctors-4.html
  20. Doctors Style 1 with Left Sidebar - doctors-7.html
  21. Doctors Style 2 - doctors-2.html
  22. Doctors Style 2 with Right Sidebar - doctors-5.html
  23. Doctors Style 3 - doctors-3.html
  24. Doctors Style 3 with Right Sidebar - doctors-6.html
  25. Doctors Style 3 with left Sidebar - doctors-8.html
  26. Doctor Details Style 1 - doctor-1.html
  27. Doctor Details Style 2 - doctor-2.html
  28. Blog Style 1 - blogs-1.html
  29. Blog Style 1 with Right Sidebar - blogs-3.html
  30. Blog Style 1 with Left Sidebar - blogs-5.html
  31. Blog Style 2 - blogs-2.html
  32. Blog Style 2 with Right Sidebar - blogs-4.html
  33. Blog Style 3 with Right Sidebar - blogs-6.html
  34. Blog Style 3 with left Sidebar - blogs-7.html
  35. Single Blog Style 1 - blog-1.html
  36. Single Blog Style 2 - blog-2.html
  37. Department Style 1 - departments-1.html
  38. Department Style 2 - departments-2.html
  39. Invoice Style - invoice.html
  40. Event Style 1 - event-1.html
  41. Event Style 2 - event-2.html
  42. Event Style 3 - event-3.html
  43. About Us Page - about.html
  44. Contact Us Page - contact.html
  45. Gallery Page 1 - gallery.html
  46. Gallery Page 2 - gallery-1.html
  47. Login Page - login.html
  48. Register Page - register.html
  49. Forgot Page - forgot.html
  50. MyAppointment Page - myappointment.html
  51. MyRequest Page - myrequest.html
  52. MyProfile Page - myprofile.html
  53. 404 Page not Found Page - 404.html
  54. 503 Temporarily Unavailable Page - 503.html
  55. FAQ Page - faq.html
  56. Privacy Policy Page - privacy-policy.html
  57. Terms & Conditions Page - terms-conditions.html

Customization

It is HTML5, CSS3 and Js based template so you cna edit it yourself.

This template use bootstrap grid to make it very easy for anybody to understand the grid system and we have created other grid for layout. See below for more info

Classes of Sections

.layer-stretch and .layer-wrapper class is used to creating the out layer of section

        <div class="layer-stretch">
            <div class="layer-wrapper">
            </div>
        </div>
    

.layer-ttl class is used to creating the mail title of section

        <div class="layer-ttl">
            <h3> Section Title </h>
        </div>
    

.layer-container class is used to creating container for section content

        <div class="layer-container">
            Secton content element
        </div>
    

.colored-background class is used to give background color of section

        <div class="colored-background">
            <div class="layer-stretch">
                <div class="layer-wrapper">
                    <div class="layer-ttl">
                        <h3> Section Title </h>
                    </div>
                    <div class="layer-container">
                        Secton content element
                    </div>
                </div>
            </div>
        </div>
    

.hm-parallax class is used to creating backgrund parallax effect for section

        <div class="hm-parallax hm-service-picture">
            <div class="layer-stretch">
                <div class="layer-wrapper">
                    <div class="layer-ttl">
                        <h3> Section Title </h3>
                    </div>
                    <div class="layer-container">
                        Secton content element
                    </div>
                </div>
            </div>
        </div>
    

Theme block, This is used to create card for this template

        <div class="theme-block">
            <div class="theme-block-inner theme-block-hover">
				<div class="theme-block-picture">
				    <img src="uploads/495x420.jpg" alt="">
                    </div>
				<div class="theme-block-data">
				    <h4>
                       <a href="#">Card Title</a>
                    </h4>
                </div>
            </div>
        </div>
    

Metrial Theme Card

        <div class="theme-material-card">
            content element
        </div>
    

Image and Images on hover

       <img src="image-link" class="theme-img" alt="">
       <img src="image-link" class="theme-img theme-img-scale" alt="">
       <img src="image-link" class="theme-img theme-img-scalerotate" alt="">
    

We have created much more components for this template. For more info about componenents, please visit component page

Upload Document

Unzip package in an empty directory and you will see template folder. In template folder change content according to yours then upload this folder on server root directory.

Help & Support

24/7 Support, Just mail us any issue we will be happpy to help.

For any issue create ticket by clicking here support

Or you can email us.

Email - support@pepdev.com

Thank you for purchasing Klinik template . If you have any question that is beyond the scope of this documentation, Please feel free to create a support ticket using Our Support Site or send an email to support@pepdev.com.

Manasa theme