Version: 1.9 | Dated: 05th May 2016

Mowasalat Documentation

introduction

Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.

While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.

This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.

Also by simply adding classes in code, user can get variations in styles.

We have optimized the code for load speed and extensively used CSS for effects etc.

The code is 100% bug free and follows W3C standards.

We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.

It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.

Mowasalat is a multipupose Template that has following feature

Home & Inner Pages
  • 10 + Home Pages
  • 4 About Us Pages
  • 6 Services Pages
  • 2 Team Pages
  • 3 Shop Pages
  • 5 Blog Pages
  • 1 Gallery Page
  • 1 Partners Page
  • 1 Career Page
  • 1 Pricing Page
  • 1 Branches Page
  • 1 Error Page
Some Extra Feature
  • 10 Header
  • 10 Footer

Setting up Mowasalat Theme

Follow these guide lines below to get started with your Site:

  1. Open the Mowasalat/markup Folder to find all the Templates Files
  2. You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
  3. Make sure you upload the required files/folders listed below:
    • markup/css - Required css files
    • markup/fonts - Required fonts files
    • markup/images - Required images files
    • markup/js - Required Javacripts files
    • markup/revolution - Revolution Slider
    • markup/process.php - Required PHP file
    • markup/index.html - Index File/Homepage
    • The other files can be used according to your requirement.
  4. After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.

HTML Structure

We have Developed Mowasalat with a simple coding structure. here is the sample:

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- All Stylesheets here -->
  
  </head>
  <body>   

	<!-- nav of the page -->
	<nav class="navbar">
            ...
	</nav>
	
	<!-- slider -->
	<div class="slider">
            ...
	</div>
	
	<!-- Contents Containers -->
	<div class="container">
            ...
	</div>
	
	<!-- footer of the page -->
	<footer>
		
	</footer>	
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    
  </body>
</html>

Page PreLoaders

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions. 

<div id="preloader">
	<div id="status">
	<!-- Here you can add preloader style -->
	</div>
	</div>

Color Schemes

You can change your Website's Color Scheme in an instant.

  1. Changeing path of Color CSS Stylesheets in HTML
  2. Changeing just HEX value in css/color/color.css

Make sure you add the css/color/color.css stylesheet in your head after the css/all-stylesheets.css stylesheet.

<head>
	...
	<link rel="stylesheet" href="css/all-stylesheets.css" type="text/css" />

	<!-- include the site color stylesheet -->
	<link rel="stylesheet" href="css/color/color.css" type="text/css" />
	...
</head>

Changing Fonts

Changing Fonts in Mowasalat is very easy. By default, Mowasalat uses Poppins from the Google Fonts Library.

1- Add this code to your website, "css/all-stylesheets.css" file.

<!-- Fonts Poppins -->
@import url(https://fonts.googleapis.com/css?family=Poppins:400,300,500,600,700);

2- Integrate the fonts into your CSS:

font-family: 'Poppins', sans-serif;

Nav Dropdown Menu

You can start using the Dropdown Menu. Try using the Following code:

<nav class="navbar navbar-default">
<div class="container">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="index.html"><img src="images/logo/logo.png" alt=""></a>
	</div>
	<div id="navbar" class="navbar-collapse collapse">					
		<ul class="nav navbar-nav navbar-right">
			<li class="dropdown active">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home <span class="caret"></span></a>
				<ul class="dropdown-menu dropdown-menu-left">
					<li><a href="index.html">Home Page 01</a></li>								
				</ul>
			</li>	
		</ul>
	</div>
	<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>

Page Titles

Mowasalat has following base HTML structure for page title.

Images classes, b-img-01, b-img-02, b-img-03, b-img-04,---, b-img-13 

<div class="inner-banner b-img-01">
	<div class="black-overlay">
		<div class="container">
			<div class="row">
				<div class="col-lg-12">
					<div class="info">
						<h1>About 01</h1>
						<h2>Go beyond logistics, make the revolution business.</h2>
					</div>
				</div>
			</div>
		</div>
		<div class="bread-crumb">
			<div class="container">
				<div class="row">
					<div class="col-lg-12">
						<ol class="breadcrumb">
							<li><a href="">Home</a></li>
							<li><a href="">Company</a></li>
							<li class="active">About 02</li>
						</ol>
					</div>
				</div>
			</div>
		</div>
	</div>
</div>

Columns & Grid

Bootstrap Grid

.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-1
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-2
.col-md-3
.col-md-3
.col-md-3
.col-md-3
.col-md-4
.col-md-4
.col-md-4
.col-md-5
.col-md-5
.col-md-2
.col-md-6
.col-md-6
.col-md-1
.col-md-11
.col-md-2
.col-md-10
.col-md-3
.col-md-9
.col-md-4
.col-md-8
.col-md-5
.col-md-7

Slider Types & their Options

Mowasalat includes 2 Unique Sliders & Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:

  • Revolution Slider
  • Owl Slider


Revolution Slider

You can find the Revolution Slider related Documentation here.

Read Revolution Slider Docs



Blog Setup

Mowasalat has 2 different type of Blog Posts. Use the Code Sample below:

Blog post

<div class="row post">
	<div class="col-lg-8 col-md-8 picture"><img src="images/blog/1.jpg" class="img-responsive" alt=""></div>
	<div class="col-lg-4 col-md-4">
		<ul class="info clearfix">
			<li class="category"><i class="fa fa-picture-o" aria-hidden="true"></i></li>
			<li class="date">18 Jan, 2016</li>
		</ul>
		<h1><a href="">We take pride in serving our customers safely.</a></h1>
		<div class="description">Lorem ipsum dolor sit , consectet adipisi elit, sed do eiusmod tempor 
			for enim adesg ens minim veniam ipsum consectet adipisi elit, sed do minim veniam..</div>
		<div class="button"><a href="" class="fill-blue">Read More</a></div>
	</div>
</div>

Blog post - Grid Style

<div class="col-lg-4 col-md-4 col-sm-6">
	<div class="post">
		<div class="picture">
			<a href=""><img src="images/latest-news/1.jpg" class="img-responsive center-block" alt=""></a>
			<div class="info">
				<div class="category"><i class="fa fa-picture-o" aria-hidden="true"></i></div>
				<div class="date">18 Jan, 2016</div>
			</div>
		</div>
		<h1><a href="">Possibility in every direction</a></h1>
		<div class="description">Lorem ipsum dolor sit , consectet adipisi elit, sed do eiusmod tempor for enim adesg ens minim veniam ipsum   consectet adipisi elit, sed do minim veniam..</div>
	</div>
</div>

Post Types

You can use a 14 different types of Post Types:

  • Image
  • image full width
  • 3 column
  • blockquote
  • lEFT SIDEBAR
  • right SIDEBAR
  • both sidebar
  • slider
  • audio
  • sound cloud
  • vimeo
  • youtube
  • html5 video

Vehicle Gallery Setup


Mowasalat provides a very elegant way to showcase your vehicles.


Setting up Gallery Items:


<div class="col-lg-4 col-md-4 col-sm-6 block">
	<div class="picture">
		<img src="images/vehicle-park/1.jpg" class="img-responsive center-block" alt="">
		<!-- Picture Overlay Starts -->
		<div class="portfolio-overlay">
			<div class="icons">
				<div><span class="icon"><a class="image-popup-vertical-fit" href="images/vehicle-park/1.jpg" title="Pellentesque habitant morbi"><i class="fa fa-search"></i></a></span></div>
			</div>
		</div>
		<!-- Picture Overlay Ends -->
	</div>
	<div class="caption">Vehicle Name</div>
</div>

Setting Up Parallax Sections:

Make sure your Parallax Images are of enough Width & Height, preferably 1920x1080 or above.

<div class="parallax-1">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				
			</div>
		</div>
	</div>
</div>

Tabs, Toggles & Accordions

You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.

Tabs

Use this code to display Tabs:

<div class="tabs-section">
	<ul class="tabset">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>
	<div class="tab-content">
		<div id="tab-1">
			This is Tab 1 Content
		</div>
		<div id="tab-2">
			This is Tab 2 Content
		</div>
		<div id="tab-3">
			This is Tab 3 Content
		</div>
	</div>
</div>

Note: Make sure you add unique IDs for each Tab Container and Tab Items.

Accordions

You can add an Accordion using the Code below:

<ul class="beans-accordion">

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

</ul>

Lightbox

Setting up Lightboxes:

Adding a .lightbox class to 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="image-popup-vertical-fit" href="images/vehicle-park/1.jpg" title="Pellentesque habitant morbi"></a>
Video:
<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Lightbox Video</a>

Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.

Google Maps

You can add Embedded Google Maps iframe to any Page using the following setup:

Add a section which will contain your Google Map:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen></iframe>

Countdown

You can add a Countdown Timer to any Page using the following setup:

<div class="count"></div>
<script>
	$(window).load(function() {
		$('.count').counterUp({
			delay: 10,
			time: 1000
		});
	});
</script>

Contact AJAX Form Setup

Update email address. Please open “process.php” update your email address in line#2.
$adminemail = "youremailhere@googlemail.com";

Images

Note: If you need the Default Mockups PSD Files used in the Mowasalat Template, you can Buy them here

CSS & Fonts

Initial Release V1.0

Released on 8th June 2016