Smarty Multipurpose v2.3.0 Responsive Template

First Release: Tuesday, August 25, 2015
Latest Update: Saturday, August 11, 2018
Author: Dorin Grigoras [www.stepofweb.com]
Seller: stepofweb [wrapbootstrap.com/user/stepofweb]
Email: stepofweb@gmail.com

Thank you for purchasing Smarty.
If you have any questions that are beyond the scope of this help file, please feel free to email me via the email address above.

Introduction

Smarty – is unique design and a fully responsive layout.
Smarty comes with 50+ customized jquery plugins to fit your needs & over 550 HTML files.
Smarty is built with the latest version of Bootstrap Framework.
You can find more about bootstrap and its documentation in the following languages below:

Bootstrap English (US)
Bootstrap (Russian)
Bootstrap en Français (French)
Bootstrap auf Deutsch (German)
Bootstrap ua (Ukrainian) 
Bootstrap en Español (Spanish)
Bootstrap (Chinese)

Resend Download Link

To resend download links by email: https://wrapbootstrap.com/support/download-resender

Page Structure

		<!DOCTYPE html>
		<html lang="en-us">
		 
			<head>
				[HEAD_META]
			</head>

			<body class="smoothscroll enable-animation">

				<div id="slidetop">
					[SLIDE_TOP]
				</div>

				<div id="wrapper">
				
					<div id="topBar">
						[TO_BAR]
					</div>

					<div id="header">
						[BUTTONS]
						[LOGO]
						[NAV_MAIN]
					</div>

					<section>
						[SECTION_1]
					</section>

					....

					<section>
						[SECTION_N]
					</section>

				</div>
		 

				
				<footer id="footer">
					[FOOTER_CONTENT]
				</footer>
				

				[PAGE_JAVASCRIPTS]

			</body>
		</html>
	

CSS/JAVASCRIPT

CSS

essentials.css - contains bootstrap rewrites, plugins and common rules like .nomargin, .nopadding, etc
layout.css - website main layout rules
layout-dark.css - add this style only if you need a dark layout website
layout-RTL.css - add this style only if you need RTL. Example: arabic language.
layout-shop.css - shop layout
layout-datatables.css datatables table [shortcode/tables]
layout-footable-minimal.cssfootable table [shortcode/tables]
layout-jqgrid.cssjqgrid table [shortcode/tables]
thematics-*.css - thematic layout. Include the chosen style only if you use a predefined thematic.
color_scheme/ - is a folder containing 10 predefined color scheme. Create your own scheme replaceing the color (replace only one color, extremly simple)

JAVASCRIPT

Some javascript plugins are loaded asynchronously ONLY where a plugin is needed.

Example: if a specific page needs twitter widget plugin, the twitter javascript is loaded ONLY where the .widget-twitter class is detected.
This is achived using loadScript() function from assets/js/scripts.js

You can use this feature on your custom.js like this:

	// Load single script and do something (alert in this example)
	loadScript(plugin_path + 'plugin.js', function() {
		alert("plugin loaded");
	});

	// Load multiple scripts and call a final function (alert in this example)
	loadScript(plugin_path + "script1.js", function(){
		loadScript(plugin_path + "script2.js", function(){
			loadScript(plugin_path + "script3.js", function(){
				loadScript(plugin_path + "script4.js", function() {
					alert('do something');
				});
			});
		});
	});
	

PLUGINS LOADED ASYNCHRONOUSLY (by scripts.js)

The plugins above - you don't need to add them in a classic way: <script src="plugin.js"></script>
All of them are loaded by assets/js/scripts.js automaticaly ONLY when a specific class or ID is detected on HTML code.
This is the reason why var plugin_path = 'assets/plugins/'; is used on the bottom of each html template.

Please note: using this technique, the page loads faster because the scripts are not included if not needed. Few Mb in size are not loaded if not used!!!


assets/plugins/bootstrap/js/bootstrap.min.js
bootstrap javascript - always first loaded by scripts.js

assets/plugins/smoothscroll.js
loaded only if <body> contain .smoothscroll class

assets/plugins/jquery.nav.min.js
loaded by one page templates if #topMain.nav-onepage ID is detected

assets/plugins/owl-carousel/owl.carousel.min.js
loaded if .owl-carousel class is detected

assets/plugins/slider.flexslider/jquery.flexslider-min.js
flexslider is a very common slider used by many people. If .flexslider is detected on HTML code, the plugin is loaded. Example: feature-slider-flexslider-fullwidth.html

assets/plugins/magnific-popup/jquery.magnific-popup.min.js
is the 'lightbox' used on this template. If .lightbox class is detected, the plugin is loaded.

assets/plugins/jquery.mb.YTPlayer.min.js
if #YTPlayer ID is detected, the plugin is loaded

assets/plugins/mixitup/jquery.mixitup.min.js
loaded if .mix-grid is detected. Example: portfolio-grid-3-columns.html

assets/plugins/text-rotator/jquery.simple-text-rotator.min.js
loaded if .word-rotator class is detected. Example: shortcode-headings.html#wrotator

assets/plugins/lazyload/jquery.lazyload.min.js
loaded if .lazy class is detected. Example: start.html

assets/plugins/isotope/isotope.pkgd.min.js
loaded if isotope filter is needed. Example: portfolio-masonry-4-columns.html

assets/plugins/custom.fle_upload.js
loaded if .custom-file-upload class is detected. Example: page-contact-1.html

assets/plugins/countdown/jquery.countdown.pack.min.js
loaded if .countTo class is detected. Example: shortcode-counters.html

assets/plugins/toastr/toastr.js
loaded if .toastr-notify is detected OR if _toastr() used on javascript. Example: shortcode-notifications.html

assets/plugins/chart.easypiechart/dist/jquery.easypiechart.min.js
loaded if .piechart class is detected

assets/plugins/select2/js/select2.full.min.js
loaded if .select2 is detected. shortcode-forms.html

assets/plugins/form.validate/jquery.validation.min.js
loaded if .validate class detected on a form. Example: shortcode-forms.html

assets/plugins/form.masked/jquery.maskedinput.js
loaded if .masked is detected on an input field. Example: shortcode-forms-masked.html

assets/plugins/bootstrap.datepicker/js/bootstrap-datepicker.min.js


assets/plugins/bootstrap.daterangepicker/daterangepicker.js
loaded if .datepicker class is detected. shortcode-forms-pickers.html

assets/plugins/timepicki/timepicki.min.js
loaded if .timepicker class is detected. shortcode-forms-pickers.html

assets/plugins/spectrum/spectrum.min.js
loaded if .colorpicker class is detected. shortcode-forms-pickers.html

assets/plugins/editor.summernote/summernote.min.js
loaded if .summernote class is detected. shortcode-forms-editors.html

assets/plugins/editor.markdown/js/bootstrap-markdown.min.js
loaded if .markdown class is detected. shortcode-forms-editors.html

assets/plugins/pajinate/jquery.pajinate.bootstrap.min.js
loaded if .pajinate class is detected. portfolio-loading-jpagination.html

assets/plugins/infinite-scroll/jquery.infinitescroll.min.js
loaded if .infinite-scroll class is detected. portfolio-loading-infinite-scroll.html

assets/plugins/image.zoom/jquery.zoom.min.js
loaded if figure.zoom is detected. shortcode-thumbnails.html#figzoom

assets/plugins/typeahead.bundle.js
loaded if .autosuggest class is detected. shortcode-forms-autosuggest.html

assets/plugins/form.stepper/jquery.stepper.min.js
loaded if input.stepper class is detected.

assets/plugins/slimscroll/jquery.slimscroll.min.js
loaded if .slimscroll class is detected.

assets/plugins/jquery.backstretch.min.js
loaded if data-background="image.jpg" detected on <body>

assets/plugins/widget.jflickr/jflickrfeed.min.js
loaded if .widget-flickr class is detected. shortcode-widgets.html

assets/plugins/widget.twittie/twittie.min.js
loaded if .widget-twitter class is detected. shortcode-widgets.html

assets/plugins/widget.dribbble/jribbble.min.js
loaded if .widget-dribbble class is detected. shortcode-widgets.html

assets/plugins/widget.mediaelementbuild/mediaelement-and-player.min.js
loaded if .widget-media class is detected. Also, you can find it used on index-thematics-music.html loaded via an external file: assets/js/view/demo.music.js

STYLESWITCHER

Styleswitcher is a plugin created from scratch for demo purposes only.
At the bottom of each page, find and remove:

<!-- STYLESWITCHER - REMOVE -->
<script async type="text/javascript" src="assets/plugins/styleswitcher/styleswitcher.js"></script>
Also, you can delete the plugin from: assets/plugins/styleswitcher/ on your production site.

GOOGLE FONTS

3 Fonts used:


CSS Classes:
.font-open-sans Force Open Sans Font
.font-lato Force Lato Font
.font-raleway Force Raleway Font

If you want to rewrite the fonts used on Smarty, use assets/css/_layout-font-rewrite.css and modify it according to your needs.

GOOGLE FONTS

There is a very simple way to enable Google Recaptcha: COPY/PASTE THE CODE BELOW inside your form (usualy before "Submit" button)

PLEASE NOTE: You need a Google Recapcha Api Key (it's free). Click here to create your own Key for your domain!

INFO: You might want to be able to use recaptcha on your localhost prouction environment. Add to Google Api: localhost

<!-- 
	START: REMOVE IF RECAPTCHA NOT USED 
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
-->
<div class="clearfix mt-30">

	<!-- 
		+ GET YOUR GOOGLE RECAPTCHA KEY
		https://www.google.com/recaptcha/admin#list
	-->
	<script src="https://www.google.com/recaptcha/api.js" async defer></script>
	<div class="g-recaptcha" data-sitekey="YOUR-API-KEY-HERE"></div>

</div>
<!-- 
	+++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
	END: REMOVE IF RECAPTCHA NOT USED 
-->

ESSENTIALS

Essential classes (assets/css/essentials.css) that helps you to quick position elements without writing new css rules.

You are encouraged to use these classes

Class Description Class Description
.fs-11 Force font size to 11px (text, icons) .fw-300 Force font weight to 300 (text)
.fs-12 Force font size to 12px (text, icons) .fw-400 Force font weight to 400 (text)
.fs-13 Force font size to 13px (text, icons) .fw-500 Force font weight to 500 (text)
.fs-14 Force font size to 14px (text, icons) .fw-600 Force font weight to 600 (text)
.fs-15 Force font size to 15px (text, icons) .fw-700 Force font weight to 700 (text)
.fs-16 Force font size to 16px (text, icons) .font-lato Force font family: 'Lato', Arial, sans-serif
.fs-17 Force font size to 17px (text, icons) .padding-0 Force padding to 0px
.fs-18 Force font size to 18px (text, icons) .padding-3 Force padding to 3px
.fs-19 Force font size to 19px (text, icons) .padding-6 Force padding to 6px
.fs-20 Force font size to 20px (text, icons) .padding-8 Force padding to 8px
.fs-26 Force font size to 26px (text, icons) .padding-10 Force padding to 10px
.fs-30 Force font size to 30px (text, icons) .padding-0 Force padding to 0px
.fs-40 Force font size to 40px (text, icons) .padding-15 Force padding to 15px
.fs-50 Force font size to 50px (text, icons) .padding-20 Force padding to 20px
.fs-60 Force font size to 60px (text, icons) .padding-30 Force padding to 30px
.fs-70 Force font size to 70px (text, icons) .padding-40 Force padding to 40px
.fs-80 Force font size to 80px (text, icons) .padding-50 Force padding to 50px
.fs-90 Force font size to 90px (text, icons) .padding-60 Force padding to 60px
.fs-100 Force font size to 100px (text, icons) .padding-70 Force padding to 70px
.mt-0 Force margin top to 0px .mb-0 Force margin bottom to 0px
.mt-3 Force margin top to 3px .mb-3 Force margin bottom to 3px
.mt-6 Force margin top to 6px .mb-6 Force margin bottom to 6px
.mt-8 Force margin top to 8px .mb-8 Force margin bottom to 8px
.mt-10 Force margin top to 10px .mb-10 Force margin bottom to 10px
.mt-20 Force margin top to 20px .mb-20 Force margin bottom to 20px
.mt-30 Force margin top to 30px .mb-30 Force margin bottom to 30px
.mt-40 Force margin top to 40px .mb-40 Force margin bottom to 40px
.mt-50 Force margin top to 50px .mb-50 Force margin bottom to 50px
.mt-60 Force margin top to 60px .mb-60 Force margin bottom to 60px
.mt-80 Force margin top to 80px .mb-80 Force margin bottom to 80px
.mt-100 Force margin top to 100px .mb-100 Force margin bottom to 100px
.mt-130 Force margin top to 130px .mb-130 Force margin bottom to 130px
.mt-150 Force margin top to 150px .mb-150 Force margin bottom to 150px
.mt-180 Force margin top to 180px .mb-180 Force margin bottom to 180px
.mt-200 Force margin top to 200px .mb-200 Force margin bottom to 200px
.margin-left-0 Force margin left to 0px .margin-right-0 Force margin right to 0px
.margin-left-3 Force margin left to 3px .margin-right-3 Force margin right to 3px
.margin-left-6 Force margin left to 6px .margin-right-6 Force margin right to 6px
.margin-left-8 Force margin left to 8px .margin-right-8 Force margin right to 8px
.margin-left-10 Force margin left to 10px .margin-right-10 Force margin right to 10px
.margin-left-20 Force margin left to 20px .margin-right-20 Force margin right to 20px
.margin-left-30 Force margin left to 30px .margin-right-30 Force margin right to 30px
.margin-left-40 Force margin left to 40px .margin-right-40 Force margin right to 40px
.margin-left-50 Force margin left to 50px .margin-right-50 Force margin right to 50px
.margin-left-60 Force margin left to 60px .margin-right-60 Force margin right to 60px
.margin-left-80 Force margin left to 80px .margin-right-80 Force margin right to 80px
.margin-left-100 Force margin left to 100px .margin-right-100 Force margin right to 100px
.margin-left-130 Force margin left to 130px .margin-right-130 Force margin right to 130px
.margin-left-150 Force margin left to 150px .margin-right-150 Force margin right to 150px
.margin-left-180 Force margin left to 180px .margin-right-180 Force margin right to 180px
.margin-left-200 Force margin left to 200px .margin-right-200 Force margin right to 200px
Class Description Class Description
.h-10 Force height to 10px .w-10 Force width to 10px
.h-20 Force height to 20px .w-20 Force width to 20px
.h-30 Force height to 30px .w-30 Force width to 30px
.h-50 Force height to 50px .w-50 Force width to 50px
.h-100 Force height to 100px .w-100 Force width to 100px
.h-150 Force height to 150px .w-150 Force width to 150px
.h-200 Force height to 200px .w-200 Force width to 200px
.h-250 Force height to 250px .w-250 Force width to 250px
.h-250 Force height to 250px .w-250 Force width to 250px
.h-300 Force height to 300px .w-300 Force width to 300px
.h-350 Force height to 350px .w-350 Force width to 350px
.h-400 Force height to 400px .w-400 Force width to 400px
.h-450 Force height to 450px .w-450 Force width to 450px
.h-500 Force height to 500px .w-500 Force width to 500px
.h-550 Force height to 550px .w-550 Force width to 550px
.h-600 Force height to 600px .w-600 Force width to 600px
.h-650 Force height to 650px .w-650 Force width to 650px
.h-700 Force height to 700px .w-700 Force width to 700px
.h-750 Force height to 750px .w-750 Force width to 750px
.h-800 Force height to 800px .w-800 Force width to 800px
You might also need to use .block together with one of above classes.
Class Description Class Description
.nopadding Force no paddings .nomargin Force no margins
.pl-0 Force no padding left .nomargin-left Force no nomargin left
.pr-0 Force no padding right .nomargin-left Force no nomargin left
.pt-0 Force no padding top .nomargin-left Force no nomargin left
.pb-0 Force no padding bottom .nomargin-left Force no nomargin left
.b-0 Force no border .lowercase Force text to lowercase
.r-0 Force to radius 0 .uppercase Force text to uppercase
.italic Force text to italic .pointer Force cursor pointer (link)
.block Force display to block .bold Force text bold
.w-100p Force width 100% .justify Force text to justify
.halfwidth Force width 50% .nofloat Force float:none
.softhide diplay:none , without !important .no-text-underline No underline (link)
.border-bottom-dashed dotted bottom border .border-bottom-dotted dashed bottom border
Class Description Class Description
.letter-spacing-0 Letter spacing 0px .overlay.dark-0 0% opactity - used for parallax or slider
.letter-spacing-1 Letter spacing 0.1em .overlay.dark-1 10% opactity - used for parallax or slider
.letter-spacing-2 Letter spacing 0.2em .overlay.dark-2 20% opactity - used for parallax or slider
.letter-spacing-3 Letter spacing 0.3em .overlay.dark-3 30% opactity - used for parallax or slider
.letter-spacing-4 Letter spacing 0.4em .overlay.dark-4 40% opactity - used for parallax or slider
.letter-spacing-5 Letter spacing 0.5em .overlay.dark-5 50% opactity - used for parallax or slider
.letter-spacing-6 Letter spacing 0.6em .overlay.dark-6 60% opactity - used for parallax or slider
.letter-spacing-7 Letter spacing 0.7em .overlay.dark-7 70% opactity - used for parallax or slider
.letter-spacing-8 Letter spacing 0.8em .overlay.dark-8 80% opactity - used for parallax or slider
.letter-spacing-9 Letter spacing 0.9em .overlay.dark-9 90% opactity - used for parallax or slider
.letter-spacing-10 Letter spacing 1em .overlay.dark-10 100% opactity - used for parallax or slider
Overlay usage example: <span class="overlay dark-5"><span>
Class Description
section.alternate <section class="alternate"> means a slightly darker section.
section.dark <section class="dark"> means the section will be dark: #212121
section.nopadding <section class="nopadding"> means no section padding top and no section padding bottom
section.pb-0 <section class="pb-0"> means no section padding bottom
section.pt-0 <section class="pt-0"> means no section padding top
.txt-success Lorem ipsum dolor sit amet.
.txt-danger Lorem ipsum dolor sit amet.
.txt-warning Lorem ipsum dolor sit amet.
.txt-info Lorem ipsum dolor sit amet.

Dark Layout

To enable Dark Layout, add to <head>, AFTER layout.css

<link href="assets/css/layout-dark.css" rel="stylesheet" type="text/css" />

Boxed Layout

Simple Boxed Layout

To enable Boxed Layout, add .boxed class to <body>

<body class="boxed">

Image Pattern on Boxed Layout

Smarty contains 11 image background patterns you can use on boxed layout:

<!-- pattern1 ... patern11 -->
<body class="boxed pattern1">

Background Image on Boxed Layout

Smarty support fixed background image on boxed layout:

<body class="boxed" data-background="assets/images/boxed_background/1.jpg">

RTL

To enable RTL, add to <head>, AFTER layout.css

<link href="assets/plugins/bootstrap/RTL/bootstrap-rtl-merged.min.css" rel="stylesheet" type="text/css" />
<link href="assets/css/layout-RTL.css" rel="stylesheet" type="text/css" />

PRELOADER

To remove the page preloader, remove the lines from the bottom of each HTML:

<!-- PRELOADER -->
<div id="preloader">
	<div class="inner">
		<span class="loader"></span>
	</div>
</div><!-- /PRELOADER -->

NEW PROJECT / DEMO FILES

When you start a new project, you may want to remove all demo files.
Remove assets/images/demo/ folder - this will remove all demo images.
All demo images are free to use, if you want to.

PHP

CONFIG PARAMS

php/config.inc.php params:


1. ATTACHMENTS
When a visitor send you an attachment email, the files are uploaded on php/_upload/ folder.

define('UPLOAD_FOLDER',		'_upload/');						// upload folder path - slash at the end!
define('UPLOAD_FOLDER_URL',	'http://localhost/PRJ/Smarty/HTML/php/_upload/');	// Full url path to upload folder (used for contact files) - slash at the end!
define('UPLOAD_MAX_SIZE',	10000000);						// 1000000 = 10Mb



2. CACHE
The cache is used by twitter plugin to load faster
define('CACHE_ENABLED', 	true);			// cache (example usage: twitter widget)
define('CACHE_LIFETIME', 	3600); 			// in seconds


3. TWITTER WIDGET SETTINGS
Like facebook, yahoo or google, twitter needs the api key to work.
Get the consumer key from http://dev.twitter.com/apps

define('CONSUMER_KEY', 		'');
define('CONSUMER_SECRET', 	'');

// User Access Token
define('ACCESS_TOKEN', 		'');
define('ACCESS_SECRET', 	'');

CONTACT FORM

Regarding contact form as main part of Contact section, only thing you need to do is to setup your email address.
Please open "/php/config.inc.php" file and edit with your own credentials.

PHPMailer is used to send emails - you need a valid email account that accept SMTP connections.

// USE SMTP OR mail()
// SMTP is recommended, mail() is disabled on most shared hosting servers.
// IF false : SMTP host/port/user/pass/ssl not used, leave empty or as it is!
$config['use_smtp']				= true;						// true|false

// SMTP Server Settings
$config['smtp_host'] 			= 'smtp.gmail.com';   		// eg.: smtp.gmail.com
$config['smtp_port'] 			= 587;						// eg.: 587
$config['smtp_user'] 			= ''; 						// you@gmail.com
$config['smtp_pass'] 			= '';						// password
$config['smtp_ssl']				= false;					// should remain false

// Who receive all emails?
$config['send_to']				= 'youremail@gmail.com';	// destination of all emails sent throught contact form

// Email Subject
$config['subject']				= 'Smarty Contact Form';	// subject of emails you receive


PLEASE NOTE:

For some reason, on some hosting servers, you get "[SMTP] Error! Internal server error!" because the external SMTP connection is blocked/firewalled.
If you tried a SMTP gmail account (or other external email server), this could be the reason.

Please, try to create an internal email account using your domain (something like noreply@yourdomain.com).

NEWSLETTER

php/newsletter.php is a newsletter script that write to a text file all subscriptions.
The file is named "_newsletter.txt" and can be found on the same folder.
Please note: "_newsletter.txt" must have write permission on your webserver.

HEADERS

HEADER STYLES

You can combine the header classes to get the header style you want.
NOTE: Never remove .clearfix class.

Type Class Features Code Example
Default Header Default Header with a White Background & Dark text.
	<div id="header" class="clearfix">
		...
	</div>
	
.dark Dark Header with a Dark Background & White text.
	<div id="header" class="dark clearfix">
		...
	</div>
	
.sticky Sticky Header with a White Background & Dark text.
	<div id="header" class="sticky clearfix">
		...
	</div>
	
.sticky .dark Sticky Dark Header with a Dark Background & White text.
	<div id="header" class="sticky dark clearfix">
		...
	</div>
	
.static Static Header with a White Background & Dark text.
	<div id="header" class="static clearfix">
		...
	</div>
	
.static .dark Static Dark Header with a Dark Background & White text.
	<div id="header" class="static dark clearfix">
		...
	</div>
	
.sticky .bottom Bottom Header with a White Background & Dark text. With or without sticky!
	<div id="header" class="sticky bottom clearfix">
		...
	</div>
	
.sticky .bottom .dark Bottom Dark Header with a Dark Background & White text. With or without sticky!
	<div id="header" class="sticky bottom dark clearfix">
		...
	</div>
	
.transparent Transparent Header
	<div id="header" class="sticky transparent clearfix">
		...
	</div>
	
.translucent Translucent Header
	<div id="header" class="sticky translucent clearfix">
		...
	</div>
	

MENU DROPDOWN

Type Class Features Code Example
Default Default (white) dropdown header menu
<div class="navbar-collapse pull-right nav-main-collapse collapse">
...
</div>
.submenu-dark Dark dropdown header menu
<div class="navbar-collapse pull-right nav-main-collapse collapse submenu-dark">
...
</div>
.submenu-color Theme color dropdown header menu
<div class="navbar-collapse pull-right nav-main-collapse collapse submenu-color">
...
</div>

MEGA MENU

This example is for 5 columns mega menu. Replace .col-md-5th width any bootstrap grid class:
.col-md-6 - 2 columns
.col-md-4 - 3 columns
.col-md-3 - 4 columns
.col-md-5th - 5 columns (used on this example)


PAGE SUBMENU





200+ SHORTCODES

With more than 200 shortcodes (including variations), the limit is the sky.
Shortcodes are reusable elements - can be used anywhere on any page by simply copy/paste.
Each shortcode is self explained on Shortcodes section. Just click the "show code" link and you can see the code and available classes you can use for that specific shortcode.

WIDGETS

Flickr, Twitter, Dribble and Facebook - are the widgets that help you to build fast website, no extra coding needed from your side.
How to use the widgets? Just copy/paste the code on any page of the website and change the params to fit your needs. That's all!

FLICKR WIDGET

<!--
	data-id="37304598@N02"	- your flickr id
	data-limit="16"			- maximum images to load
-->
<div class="widget-flickr clearfix lightbox margin-bottom-60" data-id="37304598@N02" data-limit="16" data-plugin-options='{"delegate": "a", "gallery": {"enabled": true}}'></div>

TWITTER WIDGET

<!--
	data-php="php/twitter/tweet.php"	- widget php path
	data-username="stepofweb"			- twitter username
	data-limit="3"						- maximum twwts to load
	
	PLEASE NOTE!
	php/_cache/ - folder should be writable by the webserver!
		    - it's used to cache tweets
-->
<ul class="widget-twitter margin-bottom-60" data-php="php/twitter/tweet.php" data-username="stepofweb" data-limit="3">
	<li></li>
</ul>

DRIBBLE WIDGET

<!--
	data-token				- your dribble token!
	Create your app token: https://dribbble.com/account/applications/new
	
	data-shots="2046896" 	- dribbble shots id
	data-col="4"			- columns (1 to 6 - recommended 3 to 6 and 1,2 only on sidebars)
	data-target				- optional (_blank|_self) - open the image in a new windows or on the same window (default: _blank)
-->
<ul class="widget-dribbble clearfix" data-col="4" data-shots="2046896" data-token="f688ac519289f19ce5cebc1383c15ad5c02bd58205cd83c86cbb0ce09170c1b4"></ul>

FACEBOOK WIDGET

<!--
	Replace stepofweb with your facebook id

	.hidden-xs = hide on mobile
-->
<iframe class="hidden-xs noborder" 
	src="//www.facebook.com/plugins/likebox.php?href=https%3A%2F%2Fwww.facebook.com%2Fstepofweb&width=263&height=258&colorscheme=light&show_faces=true&header=false&stream=false&show_border=false" 
	width:263px; height:258px;">
</iframe>

FACEBOOK LIKE

<!--
	Replace http://www.stepofweb.com with your webiste or page URL.
	
	Button Layouts:
	data-layout="standard|box_count|button_count|button"
	
	Button Types
	data-action="like|recommend"
	
	data-show-faces="true|false" 
	data-share="true|false"
-->
<div class="fb-like" data-href="http://www.stepofweb.com" data-layout="button_count" data-action="like" data-show-faces="false" data-share="false"></div>

FACEBOOK SHARE

<!--
	Replace http://www.stepofweb.com with your webiste or page URL.
	
	Button Layouts:
	data-layout="box_count|button_count|button|icon_link|icon|link"
-->
<div class="fb-share-button" data-href="http://www.stepofweb.com" data-layout="box_count"></div>

PREMIUM PLUGINS

Revolution Slider 4.x

Revolution Slider is a premium plugin, used as a main slider for this template.
Please note: Stepofweb is not the creator of this plugin!

Revolution Slider inline settings (also commented on the HTML files)

<!-- 
Navigation Styles:
	data-navigationStyle="" theme default navigation

	data-navigationStyle="preview1"
	data-navigationStyle="preview2"
	data-navigationStyle="preview3"
	data-navigationStyle="preview4"
	
Bottom Shadows
	data-shadow="1"
	data-shadow="2"
	data-shadow="3"
	
Slider Height Recommended (do not use on fullscreen mode)
	data-height="300"
	data-height="350"
	data-height="400"
	data-height="450"
	data-height="500"
	data-height="550"
	data-height="600"
	data-height="650"
	data-height="700"
	data-height="750"
	data-height="800"
-->
<div class="fullwidthbanner" data-height="550" data-navigationStyle="">
	.....
</div>

NOTE: Revolution Slider uses assets/js/view/demo.revolution_slider.js as a demo. You can edit or use it as it is (recommended to use it as it is).

Revolution Slider 5+

NOTE: HTML files must be uploaded to a webserver to work.
Otherwise, add after jquery.themepunch.revolution.min.js:

	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.actions.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.carousel.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.kenburn.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.layeranimation.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.migration.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.navigation.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.parallax.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.slideanims.min.js"></script>
	<script type="text/javascript" src="assets/plugins/slider.revolution.v5/js/extensions/revolution.extension.video.min.js"></script>

Revolution Slider is a premium plugin, used as a main slider for this template.
Please note: Stepofweb is not the creator of this plugin!

This is a new revolution slider - include many more features and demos.
Because the prior version is very different, will not be removed from smarty very soon.

Layer Slider

Layer Slider is a premium plugin.
Please note: Stepofweb is not the creator of this plugin!
Unfortunately, the vendor do not provide caption/trnaisiton editor, like Revolution Slider has.

NOTE: Layer Slider uses assets/js/view/demo.layerslider_slider.js as a demo. You can edit or use it as it is (recommended to use it as it is).

Credits

Plugins used on both: Website & Admin

Images

* Images optimised (compressed) using compressjpeg.com

The font used for the logo: Coolvetica RG . Can be downloaded from here