"Medico" HTML template by Modern Web Templates

Created: 25/06/2015
By: MW Templates
Email: [email protected]

Thank you for purchasing our Template. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form. Thanks so much!

Download Package Content

You can find following folders in download package

  • "documentation" folder contains this documentation.
  • "HTML" - folder contains actual template with all of HTML, JS and PHP files. It's content will explored below.
  • "LayerSlider-5.4.0" folder contains Layer Slider source code, that we use in our template and bought for you.
  • "PSD" folder contains all of PSD files.

HTML folder contents

  • "builder" folder contains visual builder files. You should not upload it on a production server!
  • "css" folder contains CSS files. You can find more about CSS files in HTML Structure section of this documentation.
  • "fonts" folder has all of custom fonts which used in this template, such as icon fonts, font awesome, social icons etc.
  • "images" folder contents all of images that used on template pages. It has several subfolders:
    • "events" folder contents images for events page.
    • "gallery" folder contents images for isotope carousel galleries and other subpages.
    • "icons" folder contents icon images teasers with images.
    • "parallax" folder contents background images for parallax sections.
    • "parthers" folder contents images for partners carousel.
    • "shop" folder contents images for shop pages.
    • "team" folder contents photos of team members.
  • "img" folder contents all of images that used in CSS files for template styling (such as patterns, preloader etc).
  • "js" folder contents javascript files that are used in this template. It has "vendor" subfolder that contents all of thirdpart plugins and libs. Go to Sources and Credits section for list of thirdpart libs and plugins.

HTML Structure

This HTML Template is based on Twitter Bootstrap v3.3. It is compatible with a IE9 browser and all other modern browsers.

It has several main section classes that may or may not be present on page (depending on certain page). You can use it depending on your needs. They are:

  • "ls" - light_section - section with white background.
  • "ls ms" - light_section muted_section - section with light grey background.
  • "ds ms" dark_section mudet_section - section with dark grey background.
  • "ds" - dark_section - section section with dark color background.
  • "cs" - color_section - section with main template color background.

Also there are some of predefined unique sections (class and id attributes) that you can use with classes above:

  • "page_topline" class - contains some contact information, social icons etc.
  • "page_toplogo" class - contains logo in various header layouts.
  • "page_header" class - contains site site Main Menu.
  • "page_mainslider" class - contains homepage main slider.
  • "page_map" class - contains google map.
  • "page_breadcrumbs" class section - contains site navigation (breadcrumbs).
  • "page_content" class section - used for main content section.
  • "page_footer" class section has footer widgets.
  • "page_copyright" class section contains copyright information.
  • "preloader" div element which located at the bottom of HTML page is a page preloader. Remove it if you do not need a preloader on your pages.

CSS Files and Structure

There are four main CSS files in this HTML Template. The first one is a standard Bootstrap v3 CSS file. Second css file is "animation.css" library, which contains various animation classes that are used in this template.

The third file is "main.css" and it contains all of the specific stylings for the pages. The file is separated into following sections:

  • bootstrap overrides - Here we override some of predefined bootstrap styles.
  • vertical margins and paddings - Here we set up vertical margins and paddings for main sections of our HTML Temlpate.
  • general styles - In this section we set up a base template styles, such as links color, general section styles.
  • styled lists - styles for predefined template lists
  • icons - styles for icons inside buttons, headings and paragraphs
  • buttons - styles for template buttons.
  • common sections styles - common styles for general template sections:
    • light section
    • grey section
    • dark section
    • color section
  • boxed layout - styles for boxed version of the template.
  • template styles - styles for this certain template.
  • main menu (min 768px) styles - styles for desktop version of main menu.
  • main menu mobile styles - styles for mobile version of main menu.
  • blog - This section contains styles for a blog page and a single post page.
  • widgets - In this sections we styled all the major widgets.
  • shortcodes - In this sections we styled all of template's shortcodes.
  • utilites - some helper classes for margins and paddings etc.
  • plugins - Styles for plugins that we used in our template:
    • Owl Carousel
    • FlexSlider
    • prettyPhoto
    • Easy pieChart
    • toTop
    • Isotope Portfolio

Fourth file is "fonts.css" that has styles for all of our icon fonts that we used in our template.

Changing template layout

To change template layout from wide to boxed you need to do two things:

  1. add "boxed" class to div with ID "canvas" HTML element
  2. add "container" class to div with ID "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
    <div id="box_wrapper" class="container"> 
        ... 
    </div>
</div>

To add pattern in boxed layout just add one of following predefined CSS classes to div with ID "canvas" HTML element:

  1. pattern1
  2. pattern2
  3. pattern3
  4. pattern*

Example:

<div id="canvas" class="boxed pattern2"> 
        ... 
</div>

To add top and bottom margins for boxed version just add class "top-bottom-margins" for diw with id "box_wrapper"

Example:

<div id="canvas" class="boxed"> 
    <div id="box_wrapper" class="container top-bottom-margins"> 
        ... 
    </div>
</div>

Changing main color

If you want to change main color for this template, just replace all instances of main color hex code with hex color value that you want inside the "main.css" file.

Also you can change "main.css" to "main2.css" or "main3.css" which are the same except predefined colors within it.

Changing Light and Dark versions

You can change a class for any section inside "#box_wraper" div to change your template version from light to lightgrey or dark.

Available section classes are:

  • ls - light background section
  • ls ms - light section, muted section (lightgrey background)
  • ds - dark background section
  • ds ms - dark muted section (darkgrey background section)
  • cs - color background section

Examples:

<section class="ls" id="content"> 
        ... 
</section>

You can change to:

<section class="ds ms" id="content"> 
        ... 
</section>

Delete Style Switcher

If you want to remove style switcher from your site, just remove following code at the bottom of your HTML page:

<script src="js/switcher.js"></script>

JavaScript Files

Following files are located in "js" subfolder

All of JS files (except "main.js" file and "switcher.js") are compressed in single "compressed.js" file for best perfomance.

Setup Widgets and Shortcodes.

Widgets and Shortcodes that need to setup are:

  • Google Map
  • Flickr
  • Twitter
  • Subscribe
  • Contact form

To setup a Google Map do follofing:

  • Scroll to the bottom of HTML page with Google Map (index page and contacts page) and find code " //type your address after "address=" "
  • Provide your address as a regular string.
  • To change a marker text and title find code "//type your map title and description here" and type your values.

To setup a Flickr Widget do following:

  • Go to http://idgettr.com/ and search for your Flickr ID
  • Edit your "main.js" file. Just replace "63512867@N07" ID with your Flickr ID

To setup a Twitter Widget do follofing:

  • Go to https://dev.twitter.com/apps and register a new application to receive Consumer Key, Consumer Secret Word, User Token and User Secret Word
  • Edit lines from 27 to 36 of your "twitter/index.php" file. Place your secret keys and words onto corresponding placeholders.
  • Edit "number of tweets" and "username" in your "main.js" file.

To setup a Contact Form do following:

  • Edit lines from 7 to 22 of your "contact-form.php" file. Place your email and messages text.

To setup a MailChimp Subscribe form do following:

Edit the "mailchimp/store-address.php" file:

Line 19: replace "your_apikey" with an API Key retrieved from here:

http://admin.mailchimp.com/account/api/

Line 23: replace "my_list_unique_id" with the List Unique Id obtained by going to: http://admin.mailchimp.com/lists/.

Click the "settings" link for the list - the Unique Id is at the bottom of that page.

Setup Animation for any HTML elements

To set up animation for single element, just add class "to_animate", attributes "data-animation" with this class, and "data-delay" with number in milliseconds to any HTML element and you're done.

Available values for "data-animation" attribute

  • fadeIn
  • fadeInLeft
  • fadeInUp
  • fadeInRight
  • fadeInDown
  • fadeInUpBig
  • fadeInDownBig
  • fadeInLeftBig
  • fadeInRightBig
  • slideRight
  • slideUp
  • slideLeft
  • slideInDown
  • slideInLeft
  • slideInRight
  • expandUp
  • slideExpandUp
  • expandOpen
  • bigEntrance
  • hatch
  • tossing
  • pulse
  • floating
  • bounce
  • pullUp
  • pullDown
  • stretchLeft
  • stretchRight
  • moveFromLeft

This template has 46 layered PSD files:

1.1_main_medico.psd
1.2_main_veterinary.psd
1.3_main_boxed.psd
1.4_main_dark.psd
1.5_main_singlepage.psd
2.01.1_about_1.psd
2.01.2_about_2.psd
2.02.1_staff_1.psd
2.02.2_staff_2.psd
2.02.3_member.psd
2.03.1_events.psd
2.03.2_event_page.psd
2.04.1_services_1.psd
2.04.2_services_2.psd
2.05_departments.psd
2.06_timetable.psd
2.07_pricing.psd
2.08_faq.psd
2.09_testimonials.psd
2.10.1_404_1.psd
2.10.2_404_2.psd
2.11.1_coming_soon_1.psd
2.11.2_coming_soon_2.psd
2.11.3_coming_soon_3.psd
4.1_gallery_regular.psd
4.2_gallery_full_width.psd
4.3_gallery_extended.psd
4.4_gallery_carousel.psd
4.5_gallery_tile.psd
4.6_gallery_left_sidebar.psd
4.7.1_gallery_item_1.psd
4.7.2_gallery_item_2.psd
4.7.3_gallery_item_3.psd
5.1_blog_right_sidebar.psd
5.2_blog_full_width.psd
5.3_blog_post_sidebar.psd
5.4_blog_post_full_width.psd
6.1.1_shop_table_1.psd
6.1.2_shop_table_2.psd
6.1.3_shop_list.psd
6.2_single_product.psd
6.3_cart.psd
6.4_registration.psd
7.1_contacts_1.psd
7.2_contacts_2.psd
7.3_contacts_3.psd

Credits ans Sources

As we mentioned earlier, we used Twitter Bootstrap v3 as CSS framework and HTML5 Boilerplate for this template.

Fonts:

Template Scripts

Layer Slyder is a jQuery slider plugin that we use on Home Page. Please read documentation in "LayerSlider-5.4.0" folder for more information

Builder scripts

Images