Installation
mitex Follow the steps below to get started with your Site Template:
- Open the
Package/HTMLFolder to find all the Templates Files - You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
- Make sure you upload the required files/folders listed below:
HTML/css- Extra Stylesheets Folder plus Main Stylesheet FileHTML/images- Images FolderHTML/js- Javacripts FolderHTML/index.html- Index File/Homepage
- You're now good to go..! Start adding your Content and show off your Brand New Beautiful Website in style.
HTML Structure
mitex follows a simple coding structure. here is the sample:
<!DOCTYPE html> <html lang="en"> <head> <!-- Your Stylesheets, Title ============================================= --> ... </head> <body data-spy="scroll" data-target=".navbars" data-offset="90> <!-- The Loader Before Site Load ============================================= --> <div class="loader"> .... </div> <!-- Header ============================================= --> <header > <nav class="navbar navbar-default navbar-fixed-top navbars"> ... </nav> </header> <!-- Site Content ============================================= --> <section id="home"> </section> <section id="about-us"> </section> <section id="portfolio"> </section> <section id="pricing-table"> </section> <section id="blog"> </section> <section id="contact-us"> </section> <!-- Footer ============================================= --> <footer> <div class="container"> </div> </footer> <!-- Your All Scripts will be here ============================================= --> ... </body> </html>
Favicons & Apple Touch Icons
You can add a Favicon to your Website using the following code just bottom to the Stylesheet files links:
<link rel="icon" href="favicon.png" type="image/png" sizes="16x16">
You can add Apple Touch Icons to your Website using the following code:
<link rel="apple-touch-icon" href="touch-icon-iphone.png"> <link rel="apple-touch-icon" sizes="76x76" href="touch-icon-ipad.png"> <link rel="apple-touch-icon" sizes="120x120" href="touch-icon-iphone-retina.png"> <link rel="apple-touch-icon" sizes="152x152" href="touch-icon-ipad-retina.png">
Page Loading Transitions
You can show Interactive loaders to your Visitors while the Pages of your Website loads
in the background & then Reveal show Interactive loaders to your Visitors while your
Pages with CSS3 Transitions. Page Loading Transitions are enabled by default. To disable
the Transition, you can simply remove .cssload-loader Class just after the
<body> Tag.
You can also add transition effects on any section or any contantent used in the web site
for the purpose of smooth loading effects and scrolling.
TO use it you have to need just add the .wow and .fdeIn(transition
name class which you want to use)
<div class="wow fadeIn" data-wow-delay="500ms" data-wow-duration="300ms">
Logo Settings
The Logo Container can be found in the navbar Container - .navbar
<div class="navbar-header"> <a href="index.html" class="navbar-brand"><img src="images/logo.png" alt="logo" class="img-responsive"></a> </div>
Change Colors
We have different colors scheme with different files
- On index.html we have
#f73246reddish color scheme. - On index2.html we have
#008cba6blue color scheme. - On index3.html we have
#73ae20green color scheme. - On index4.html we have
#ffb600yellow color scheme. - On index5.html we have mix color scheme we color red green yellow etc colors.
if u want to include one the color scheme (mention on top) at main index.html just
include the colors
following css file at bottom of all css files and after the style.css
file in the head tag
<head>
<!-- Your Stylesheets, Title ============================================= -->
...
<link href="css/style.css" rel="stylesheet">
<link href="css/green-color.css" rel="stylesheet">
</head>
Changing Fonts
Change your Fonts from Google Fonts Library directly if you plan to use a Google Font You
can find the Linking to the Font
Files at top of the style.css file.
@import url(https://fonts.googleapis.com/css?family=Raleway:400,200italic,200,100,100italic,300,300italic,400italic,500,500italic,600,600italic,700,700italic,800);
In order to change the Fonts, you will need to Edit the Above Links with your Custom Font if you plan to use a Google Font or Remove it complete if you plan to use a Self Hosted font. Here is an Example for using Self Hosted Fonts.
By default, mitexuses 2 Fonts namely: Raleway, Opensans from
the Google Fonts Library.
Website Optimization Tips
A Fast & Optimized Website has several factors which needs to be implemented in order to achieve the desired results. There are several Optimization Techniques available which will definitely affect your Website's Performance in a Positive Way & we want to share a few of them with you:
-
gZip Compression & Browser Caching
This is probably one of the Most Important Techniques you should definitely implement in order to bump up your Website's Loading Speed. gZip Compression is used to compress the Files that are delivered when loading a Website. It covers HTML, CSS, Javascript & Font Files along with other miscellaneous text files. Where as Browser Caching also covers Images & Videos apart from including the above files. This is used to saves the Static Data in your Browser itself so that when you open the Next Pages on the Same Website, the content does not gets Downloaded again, loading the Website fast.
gZip Compression & Browser Caching can be enabled using the
.htaccessFile on an Apache Web Server. You can use the Codes from here: https://github.com/h5bp/html5-boilerplate/blob/master/dist/.htaccess to enable these modules on your server. -
Image Compression & Optimization
We tend to use Lots of Images on our Websites but we often do not make efforts to Compress & Optimize them. Remember, the Larger the Image, the more time it takes to download and therefore this slows your website loading times affecting User Experience. Your customer will leave your website if it does not load within 3-5 Seconds which adversely affects your Sales. Therefore, it is important to Resize, Optimize & Compress your Images before using it on your Website. Here are some Tips which might come handy in optimizing images:
- Resize your Images: Resize your Images before using it on
your Website. Do not just Download an Image & place it as it is in your
Website's
<img>Tag without resizing it. The size/resolution of the Image matters since it is not recommended to use an Image size of1200pxx800pxin a Content Size of300pxx200pxas this is unnecessary. Resize it to300pxx200px - Image Formats: There are three common file types that are used for web images which are JPEG, GIF, & PNG. For images with a Flat Background use JPEG images, for images with a Transparent background use PNG images and for images with Animations use GIF images.
- Compressing Images: Images Compression is important as it
considerably reduces the size without losing the quality. There are several
FREE Image Optimization Tools available to Download.
For MAC use ImageOptim
For Windows use Riot for compressing JPEG Images & PNG Gauntlet for PNG Images.
- Resize your Images: Resize your Images before using it on
your Website. Do not just Download an Image & place it as it is in your
Website's
-
CSS & jQuery Minifications
It is also recommended that you Combine & Minify all your CSS Files to a single CSS File & all Javascript Files to a single JS File since Minification reduces the size of the File and Combining the files helps in reducing the number of HTTP requests made to the server. This is also an Important Factor in increasing the speed of your website. There are several tools available online to Minify your CSS & JS Files. Our recommendations are:
For CSS use CSS Minifier and For Javascript use Javascript Minifier. -
Content Delivery Network
You can use a CDN to further speed up your website. You can use the CDN to deliver static files of your website like CSS, JS, Images & Font Files. There are several CDN Hosting Providers available on the Internet but we would recommend MaxCDN or CloudFlare. Note: CDN setup requires Extra monthly Fees to setup, so it is completely optional & according to your needs.
-
Fast Web Hosting Servers
A lot depends on your Web Hosting Servers, so it is recommended that you choose a Hosting Company/Server that provides a Reliable & a Fast Hosting Service. You can check out some recommended Hosting Services here: http://themeforest.net/get_hosting.
Header
You can choose the headers while creating your Page. Default Header with a transparent
Background while turns Sticky with White background
after a little scrolling &,you can make header without sticky effect
for this just remove the .navbar-fixed-top Class from nav/code>
Tag.Simply follow the structure below:
<header ">
<nav class="navbar navbar-fixed-top">
...
</nav>
</header>
Note its Onepage Template ,so for scrolling
purpose you can add .scroll Class in the
a tag.
Note mitex use two template you can delete on of them if u want.
Page Titles
We have added another page for Blog purpose or any other as you want or required. for this the Page title is designed with background image and page title with unique caption and back link also here, with right aligned as below:
<!--Page header & Title-->
<section class="innerpage-banner">
<div class="container">
<div class="row">
<div class="col-md-12">
<h2>Blog</h2>
<p class="tagline">classsic news posts</p>
</div>
<div class="col-md-12 text-right">
<div class="other-page-link"> <a href="index.html"><i class="fa fa-circle"></i>Home</a> <span><i class="fa fa-angle-right"></i>Blog</span> </div>
</div>
</div>
</div>
</section>
Columns & Grid
Bootstrap Grid
Side Panel
mitex use side panal on blog page with Additional Information about your Website. Here is sample of side panel with all possible information about website, Simply use the Code below:
<aside>
<div class="widget search_box">
<form>
<input type="search" placeholder="Search">
<i class="fa fa-search"></i>
</form>
</div>
<div class="widget">
<h4>title </h4>
<img class="img-responsive" src="images/about-blog.jpg" alt="who we are">
<p>Lorem ipsum dolor sit amet, nec in adipiscing purus luctus, urna pellentesque fringilla vel non sed arcu integer.</p>
</div>
<div class="widget">
<h4>title (Latest Posts)</h4>
<ul class="category">
<li><a href="#">Benny Parker<span class="date">October 16, 2015</span></a></li>
.......
</ul>
</div>
<div class="widget">
<h4>CATEGORIES</h4>
<ul class="category">
<li><a href="#">DESTINATION (6)</a></li>
.......
</ul>
</div>
<div class="widget">
<h4>tags</h4>
<ul class="tag-cloud">
<li><a href="#">ANALYSIS</a></li>
.......
</ul>
</div>
</aside>
Note: Make sure that you add
the Side Panel's Code just after the .blog-item ends.
Helper Classes
We have created some really useful helper classes for you. Here are a few of them:
.padding-one- padding of 85px on top and bottom of sections..padding-one- padding of 55px on top and bottom of sections..padding-three- padding of 30px on top and bottom of sections..padding-one-top- padding of 85px on top of sections..padding-top-80- padding of 80px on top of sections..margin-100-top- margin of 100px on the top of any element..margin-60-top- margin of 60px on the top of any element..margin-100-bottom- margin of 100px on the bottom of any element..margin-right-plus- margin of 15px on the right of any element.
Slider Types & their Options
mitex includes 2 Unique Sliders for you to be used on any Page with 100s of Options. The List of all the Sliders included are mentioned as follows:
- Swiper Slider
- Owl Slider
Swiper Slider
You can find the Swiper Slider related Documentation here.
Read Swiper Slider Docs
You can find the Owl Slider related Documentation here.
Read
Owl Slider Docs
Blog Setup
Posts use Simple Markup. Use the Code Sample below in the .container Class:
<!-- Blogs --> <section id="area-main" class="padding"> <div class="blog-item "> <h2>Blog Post title</h2> <ul class="comments"> <li><a href="#">May 10, 2016</a></li> <li><a href="#"><i class="icon-chat-2"></i>5</a></li> </ul> <!--Featured blog post image--> <img src="images/blog1.jpg" class="img-responsive" alt="blog post"> <p>That also the leap into electronic typesetting, remaining essentially unchanged. Etharums ser quidem rerum facilis dolores nemis omnis fugats vitaes nemo minima rerums unsers sadips amets. Sed ut perspiciatis unde omnis iste natus error sit voluptatem...</p> <a class="btn-common button3" data-text="Read more" href="blog_detail.html">Read more</a> </div> </section>
Post Types
You can use different types of Post Types:
- Image
- Blockquotes
Comment Types
You can different types of Comments System on Post Single Pages:
- Default
- Wrapped in box
Wrapped in box
Code Sample for Wrapped in box Comments:
<div class="media blog-reply">
<div class="pull-left">
<a href="#">
<img alt="Bianca Reid" src="images/blog-commenter1.jpg">
</a>
</div>
<div class="media-body">
<h4>John Smith</h4>
<span>September 30, 2016 at 3:21 pm</span>
<p>It is a long established fact that a reader will be distracted by the readable content of a page when looking at its layout.
The point of using Lorem Ipsum is that it has a more-or-less normal distribution of letters.</p>
<a class="reply" href="#">Reply</a>
</div>
</div>
Introduction
mitexboasts of a huge number of handy Shortcodes which are quite powerful, flexible, functional & easy to use. Setting up shortcodes is very easy & Self Explanatory. Here is the List of Shortcodes included with mitex:
Each of the above mentioned Shortcodes are easily extendable, flexible & easy to use. You can find the sample codes in their respective files. We are explaining a few of them for your Reference.
Animations
Scroll to reveal Animations are latest in the Trends. You can do them too with mitex. You can use animations on any element you want. Here is the Sample Code:
<div data-animate="fadeInLeft"></div>
You can also use delays for your Animations:
<div data-animate="fadeInLeft" data-delay="500"></div>
Note: Delay Duration is in milliseconds.
Here is the list of the Animation Types you can use:
bounceflashpulserubberBandshakeswingtadawobblebounceInbounceInDownbounceInLeftbounceInRightbounceInUpbounceOutbounceOutDownbounceOutLeftbounceOutRightbounceOutUpfadeInfadeInDownfadeInDownBigfadeInLeftfadeInLeftBigfadeInRightfadeInRightBigfadeInUpfadeInUpBigfadeOutfadeOutDownfadeOutDownBigfadeOutLeftfadeOutLeftBigfadeOutRightfadeOutRightBigfadeOutUpfadeOutUpBigflipflipInXflipInYflipOutXflipOutYlightSpeedInlightSpeedOutrotateInrotateInDownLeftrotateInDownRightrotateInUpLeftrotateInUpRightrotateOutrotateOutDownLeftrotateOutDownRightrotateOutUpLeftrotateOutUpRighthingerollInrollOutzoomInzoomInDownzoomInLeftzoomInRightzoomInUpzoomOutzoomOutDownzoomOutLeftzoomOutRightzoomOutUp
Lightbox & Notifications
Setting up Lightboxes:
Adding a data-fancybox attribute and class .fancyboxto any Link
or Button will turn it into a Lightbox Element.
You can use different Types of Lightbox with an Easy Setup:
Single Image:
<a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox="image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
Iframe:
<a class="fancybox fancybox.iframe" href="iframe.html">ifram</a>
Video:
<a fancybox-media href="http://www.youtube.com/watch?v=kuceVNBTJio" data-lightbox="iframe">Lightbox Video</a>
Note: It is recommended that
you use only this Format
http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.
AJAX:
<a class="fancybox fancybox.ajax" href="ajax.txt">AJAX Content in a Lightbox</a>
Note: It is recommended that
you use the
.fancybox.ajax Class to wrap your AJAX Content to get it displayed
properly. You can also design your AJAX Content in any
way using your own Custom CSS.
Gallery:
<a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a> <a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a> <a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a> <a class="fancybox" href="link-to-lightbox-image.jpg" data-fancybox-group="gallery"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
Showing Lightbox Captions:
To show Captions for your Lightbox/Fancybox Images you will need to add the data-title Attribute for your Lightbox Links:
<a class="fancybox" href="link-to-lightbox-image.jpg" data-lightbox="image" data-title="Lightbox Image"><img src="link-to-small-thumb.jpg" alt="Lightbox Image"></a>
Icons
Widgets Setup
Widgets are simple & easy to setup, completely flexible & can be used anywhere on a page. Here's a sample code:
<!--Setting up links categories and tags also by follow this widget structure--<
<div class="widget">
<h4>Widget Title</h4>
<ul class="widget_links">
<li><a href="">some content</a></li>
</ul<
</div>
Info: Most widgets are easy to use & understand and can be checked on the Sidebar Pages.
CSS & Fonts
- Bootstrap
- Animation
- Font-Awesome (Font Icons)
- Google Fonts
- Raleway
- Opensans