To launch a website swiftly, SWIFTEX can be a right choice.It is a clean, well coded, multipurpose professional HTML template.
This template have been fabricated for corporate, agencies, business, creative, personal, SME and individual institutions Websites. We emphasized on user friendly compatibility
keeping mind on its simplicity. This gorgeous but clean template could be a life saver for
companies, professional and freelancers..
Thank you for purchasing our theme. 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 HERE. Thanks so much!
We assume that you possess html, css and bootstrap knowledge. Moreover if you fell more about this matter please visit HTML and Bootstrap3. Hope that will be sufficient for you. If you need custom development as well as need to know any thing specific for this theme that doesn't cover in this documentation, you are always welcome to contact us.
The image has used at live demo is not available with download package. That means you will get "http://placehold.it/" image instead of live demo image. Just need to replace place holder image with your own image. Be careful about the image path of html and css file. If you find any type of difficulties with image or want to get any live demo image, just contact with us by the mail [email protected].
Master Stylesheet Table of Contents
Global Styles
Typography
Section Title
Brand Button
Animation
404 Page
Content
Header Section
Site Navigation
Top Menu
Left Menu
Right Menu
Header Slider
Awesome Section
Milestone Section
About Section
Work/Portfolio Section
Testimonial Section
Service Section
Explore Section
Export Section
Latest News
Team Section
Partner Section
Tweet Section
Pricing Section
Contact Section
Footer Section
Single Page Style
Single Page Style
Global Responsive
Responsive Style
How to Modify or Customize
This theme has only four html file for four layout. So that, do any kind of changes please open specific file that you want to modify for your personal website.
Quick Customization Tips
Google Font is embedded in head section of every html file. You can change that easily as your own choice.
Most typography and font size are available in typography section, So, you can re-decorate from here.
Most of the responsive code of any specific section is placed at that section. Some of global responsive code and media query are included at the bottom portion of the stylesheet. You can use that for future customization.
During development we use grunt. If you want to know more, please follow this Link
.
We minified some very common javascript library as "swiftex.library.min.js" for faster loading of site. These library also exist in js folder under aseets file. If you need to use them, please remove minified library js and uncomment your required js link from bottom of html file. Here you can see some comment line for adding your desired library.
Custom Javascript file are not minified. So you can easily customize all custom javascript code.
How to Change Layout?
In Our Theme Package, There are more than 15 variations inside three folders. They are:
clean
vivid
coming-soon
Each folder contains some variation. Index.html is only default layout. If You Want to use Default layout, You Have to keep index.html file and remove rest if you want.
To use another Layout as a default layout instead of index.html, it is necessary to rename that specific file as index.html file. For example: to make clean-rightmenu.html as default layout you have to rename it as index.html.
How to Change Color?
Eight Pre-defined unique style sheets are available in our package which are located under
assets/css Folder.
Here style-default.css is the default color. If you want to use other predefined color you can do it two way: Firstly, you can go to html file and find the following code chunk, rename it as your desired color. For example: to use blue color as your default, please rename style-default.css as style-blue.css.
You can do it easily following the second way, just rename any style sheet as style-default.css and enjoy your desired color.
NOTE : Moreover you can use your own strategy also. For a specific type, one style sheet is enough.
Additional Information: If you want to customize your own color for your site, there are a great opportunity for you. Just open less folder under assets folder and generate your unlimited color schemes by changing variable. Also, you can take the grunt facility to customize the theme.
How to Change Background?
Firstly, go to your master style sheet (For Example: style-default.css ).
you will find some codes there as mentioned bellow. Change the background properties in your own way.
body {
background: #ffffff;
}
How to Change Icone Fonts?
Here we have used Font Awesome for icon. If you want change or add new one then you can find all font collection from
here.
Section Title
We followed same coding standard for all section title and subtitle. That make it high customisable.
If you want to customize Title & Subtitle, just find out this type of code chunk from top of every section and change it as your own choice:
Our Service
Nulla condimentum leo eget selerisque. Sed are sed laoreet magna
eleifend turpis. Cras sed eleifend dseo deget tortor Duis sit.
Header Section
In header section contains total five type sub section in all variation. They are: Top Bar, Top Menu, Right Menu, Left Menu and Header slider. Most of them constructed using basic html. So you can customize it easily.
Top Menu
In top menu we have followed a strategy for better responsive view. It is a common problem to show a nav bar perfectly on small device such as tab. For this devices we added an extra menu called "more>>" which contains the sub menu with predefined items.
This sub menu only visible for specific devices or media queries. For this case, you must put desired item inside sub menu (i.e: more>>) and add extra class "hidden-sm" to that items which are enlisted outside of sub menu.
It means, to set any main menu item as a more menu sub item, it is needed to add an extra class "hidden-sm" to first one(Main menu item). Please follow the code:
This is a owl carousel based Slider. We Used Version 2. We mixed animation.css with owl carousel to add animation effect in slider content. You can get more animation by adding respective classes at any owl based slider in this theme. The classes are: lgx-anim-zoomInRight, ..................
If you want to add new data or customize header slider, you Will find a single item here just like bellow. Now you can edit according your need.
we are creative & hard worker
We Ensure quality & support. People love us & we love them
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Deleniti ea
labore minus nesciunt provident sapiente sequi similique ut
veritatis voluptates!
Every slider Item has an background image. You should replace them with Master Stylesheet (For Example: style-default.css ). Here is the code:
.lgx-owltopheader .lgx-itemone {
background: #d1d1d1 url('../img/bg/slider-image.jpg') center center no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
If you want to add more items that does not exist in our slider, you must keep in your mind that it is necessary to add an extra class like "lgx-itemone" at your new item. After this write some css for this item. For example, suppose your new slider item class name is "lgx-itemnew". Now add some css as like bellow with new image name :
.lgx-owltopheader .lgx-itemnew{
background: #d1d1d1 url('../img/bg/your-new-slider-image.jpg') center center no-repeat;
-webkit-background-size: cover;
-o-background-size: cover;
-moz-background-size: cover;
background-size: cover;
}
For this slider there are some respective jquery code in our custom.script.js file. For more adjustment please find the respective code form custom jquery file and re-configure it. You can easily find the respective jquery code by the section name. For more options please visit
here
Awesome Section
This section contains a heading with some lead text. Also has two action button. You can change it easily.
About Us
This section contains a image as well as two list column. You can change it easily as your demand. There is an image also that does not appear in small device because of better responsive purpose. The respective code shown bellow.
Milestone
This section has four box items and the code is just like bellow. So you can modify or add new item easily.
Facebook Likes18,5870
Work Section
This is a filterable product or work showcase with dynamic modal. So, it is necessary to customize carefully for getting perfect result.
Filter Area
First you need to add carefully filter select menu item in top of the section with proper data attribute "data-filter", which is more important to item filtering. It is noted that only fist menu item has been contains a class name "active".
Here we represent a code chunk of a single portfolio item. This contains a image with caption. At the bottom of the caption area you will find a button for modal action.
You can easily achieve your own portfolio by customize this.
It is need to add data attribute value of "data-cat" which was predefined at "data-filter" in filter select menu.
There are dynamic modal. The content of this modal will be appeared automatically through data attribute. The date attributes "title" and "data-description" need to change for each item to get actual modal preview.
Service Section
There are two types of layout for service section. One contains a list of item and an image. So you can customize it easily with own data. Another contains some similar box items, like:
In this section a simple owl based slider has been used. The single item box has an image with two action button just like bellow. You can input your data as your demand.
For this slider there are some respective jquery code in our custom.script.js file. For more adjustment please find the respective code form custom jquery file and re-configure it. You can easily find the respective jquery code by the section name. For more options please visit
here
Expertness Section
This section contains some simple description list and progress bar.
If you want to customize or add new progress bar with new value, you have to find out this type of repeated code chunk just like bellow, then customize or repeat it as your demand.
Html5 & Css3 ( 98% )
Respective code for Circular progress bar like bellow. You can change it as your demand.
HTML5 & CSS3
85/100
85%
Latest News Section
Latest section has a featured latest news box like bellow.
Lorem ipsum dolor sit amet, consectetur adipisicing elit. Ea eos maiores saepe sapiente voluptatem. A iusto nam odio quas. Blanditiis dicta dolor ex laborum optio, qui voluptate. Dolor, molestias quo? Read More
Rest of the news boxes are similar, they have shown bellow.
Now you are able to customize this boxes with your own data.
Team Section
Introducing Information of every team member has been included at respective member box. Each box contains an image, name, designation and some social profile link of the member. Behind every member box same types of code chunk has been used. Now you can customize that according to your wish. A code chunk of a team member has shown bellow for example.
Elina Jannathe Elina
UX/UI Designer & Developer
Partner Section
This is a owl based simple image slider. So you will easily customize it with previous slider customization experience.
Latest Tweets Section
Here you can exhibit your latest tweet feed from your tweeter account. For this at first you need some information like CONSUMER_KEY, CONSUMER_SECRET, ACCESS_SECRET, ACCESS_TOKEN and Twitter user name. To get first four information you need to create a twitter app using your desired twitter account whose latest tweet will be shown. To create a new app at first login your twitter account and follow this
link.
After getting the information which you acquired by creating the app, please open twitter folder from assets. Now open config.php file from api folder. Just give the data as input like the code given bellow.
You are almost done. All you need to do just open custom.script.js file from js folder and find the code chunk like bellow. Now submit your desired twitter account's(which has been used to create twitter app) user name. Now you are ok to get latest tweet feed. Enjoy!
$('.lgx-tweet-feed').twittie({
username: 'themearth', // Please Change User Name (Important)
}
Pricing Section
This is a simple pricing section. For creating a pricing table, the code chunk have been used shown bellow. For featured pricing item you need to add "lgx-recommended" class.
In our contact form we used html, javascript and php validation for all field validation.
For send email we have used a popular classic email sending library for PHP name PHPMailer
To configure email sending options, you have to open config.php file from php folder.You can see the code just like bellow. Where we have describe all with comment.
It is noted that, you just change only variable value from config.php. Which will found under
"LGX ALL EMAIL CONFIGURATION".
//---------------------------------------------------------------------------------
//LGX ALL EMAIL CONFIGURATION
//---------------------------------------------------------------------------------
$admin_email_to = '..........'; /* Admin Email; Who Will Get The Contact Email Alert */
$admin_email_name = "Company Name"; /* Admin Name/Company name who will get the email alert */
$admin_email_from = '..........'; /* Admin email from which email address email will be sent */
$admin_email_from_name = 'System Admin'; /* Admin name from which email will be sent */
$use_custom_subject = false; /* If you want to use custom subject then set true. To use form subject just ignore it. */
$admin_email_subject = 'A new message from LogicHunt.com'; /* Custom email subject what the admin will get as contact email alert*/
$copy_email_subject = 'Thanks for contact'; /* Email subject what the user will get if the user agreed or select "copy me" */
/**
* To save all contacted email address is a csv file
* @type boolean
* @value Either true or false
* @default true
*/
$save_in_csv = false; /*If You Want to save as csv then just make it true */
/**
* keep false for default mail, set true for smtp
* if you set true, make sure configure smtp properly
* @value false|true
* @default: false
*/
$mail_send_type = false; /*if $mail_send_type is set to smtp, then complete this config*/
//---------------------------------------------------------------------------------
//LGX MAIL CONFIGURATION END
//---------------------------------------------------------------------------------
GOOGLE MAP
A jquery based plugin is used to show google map.For any need of customization you need to open customscript.js
from js folder.
The HTML Code for google Map :
Here you can change location by changing latitude and longitude from coords. you can change the icon by changing image icon path.
You also can change title and content . Also, you can change the look by changing the
maptype(roadmap,satellite,hybrid,terrain).
$(".map-canvas-default").googleMap({
zoom: 10, // Initial zoom level (optional)
coords: [23.810637, 90.400615], // Map center
type: "ROADMAP" // Map type (optional)
});
//for marker
$(".map_canvas").addMarker({
coords: [34.32, 117.14], // GPS coords
title: 'LogicHunt',
text: 'Lorem ipsum dolor sit amet, natus quaerat voluptas. Possimus quae quaerat quam reiciendis, sunt.',
icon: lgx_path + '/img/map-icon.png'
});
Sometimes you need to change file path. Then you will find it from customscript.js
var lgx_path = window.location.protocol + '//' + window.location.host;
var pathArray = window.location.pathname.split( '/' );
for (i = 1; i < (pathArray.length - 1); i++) {
lgx_path += '/';
lgx_path += pathArray[i];
}
Subscriber Section
For subscription section you need MailChimp API KEY and MailChimp LIST ID. Please go to your MailChimp account and create a list. After collecting api key and list id please go to "assets/php" folder and open subscribe-config.php file. Now put your data according to bellow.
$save_in_csv = false; // If You Want to save in csv format then set it true
$send_email = true;
$api_key = '..........'; // MailChimp API KEY
$list_id = '..........'; // MailChimp LIST ID
FOOTER
There are some basic html code and copyright message in footer section. So, you can easily customize or modify as your demand.
Single Page
Single page contains an article and sidebar section. This page also contains some data for example purpose. So you can customize or re decorate it at your own way.
Coming Soon
The maximum sections belongs to coming soon have already discussed above. You may follow the above tips to customize these. Some of this sections may also load inside modal.
This is a bootstrap based modal just like bellow. So you can easily trace them.
