Shipper was created and developed for all type of logistic companies. Design and colors makes item more attractive & unique. Also item comes with bootstrap features and exclusive plug-ins. With shipper you are able to create your own website easily. Working ajax - php contact form included.
Thank you for purchasing my 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!
This theme is a builted on bootstrap framework with four columns. All of the information within the main content area is nested within a 'section'.
The general template structure is the same throughout the template. Here is the general structure.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="user-scalable=no, initial-scale=1.0, maximum-scale=1.0">
<title>Shipper Logistic - Transportation Template</title>
<meta name="author" content="Themezinho">
<meta name="description" content="Logistic and Transportation Template">
<meta name="keywords" content="logistic, transportation, package, delivery, cargo, carousel, post, moving, caring">
<!-- SOCIAL MEDIA META -->
<meta property="og:description" content="Shipper Logistic - Transportation Template">
<meta property="og:image" content="http://www.themezinho.net/shipper/preview.png">
<meta property="og:site_name" content="SHIPPER">
<meta property="og:title" content="SHIPPER">
<meta property="og:type" content="website">
<meta property="og:url" content="http://www.themezinho.net/shipper">
<!-- TWITTER META -->
<meta name="twitter:card" content="summary">
<meta name="twitter:site" content="@SHIPPER">
<meta name="twitter:creator" content="@SHIPPER">
<meta name="twitter:title" content="SHIPPER">
<meta name="twitter:description" content="Shipper Logistic - Transportation Template">
<meta name="twitter:image" content="http://www.themezinho.net/shipper/preview.png">
<!-- FAVICON FILES -->
<link href="ico/apple-touch-icon-144-precomposed.png" rel="apple-touch-icon-precomposed" sizes="144x144">
<link href="ico/apple-touch-icon-114-precomposed.png" rel="apple-touch-icon-precomposed" sizes="114x114">
<link href="ico/apple-touch-icon-72-precomposed.png" rel="apple-touch-icon-precomposed" sizes="72x72">
<link href="ico/apple-touch-icon-57-precomposed.png" rel="apple-touch-icon-precomposed">
<link href="ico/favicon.png" rel="shortcut icon">
<!-- CSS FILES -->
<link href="css/main.css" rel="stylesheet">
<!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
<!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
<!--[if lt IE 9]>
<script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
<script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
<![endif]-->
</head>
<body>
content goes here
</body>
</html>
It is very easy to change main color of link
/* LINKS */
a{ color:#5b5b5b;}
a:hover{ color:#5b5b5b; text-decoration:none;}
a:focus{ color:inherit; text-decoration:none;}
a{-webkit-transition: .25s ease-in-out;-moz-transition: .25s ease-in-out;-ms-transition: .25s ease-in-out; -o-transition: .25s ease-in-out; transition: .25s ease-in-out;}
Here is the css style for site section title.
/* TITLE */
.section-title{ width:100%; float:left; margin:40px 0; position:relative; font-size:40px; font-weight:700; color:#413686;}
.section-title span{ position:absolute; left:-10px; top:-20px; opacity:0.1;}
Here is the css style for transition elements and classes.
/* TRANSITIONS */
.soft-transition{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:99; background:#fff;}
.soft-transition{-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-ms-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.soft-transition.hide-me{ opacity:0; visibility:hidden;}
.transition-overlay{ width:100%; height:100%; position:fixed; left:0; top:0; z-index:99; background:#fff; opacity:0; visibility:hidden;}
.transition-overlay{-webkit-transition: .5s ease-in-out;-moz-transition: .5s ease-in-out;-ms-transition: .5s ease-in-out; -o-transition: .5s ease-in-out; transition: .5s ease-in-out;}
.transition-overlay.open{ opacity:1; visibility: visible;}
Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:
| File Name | Description |
|---|---|
bootstrap-datepicker.css |
Datepicker |
bootstrap-select.css |
Bootstrap select |
bootstrap.css |
Detault bootstrap css file |
bootstrap.min.css |
Detault bootstrap min css file |
et-line-fonts.css |
ET line icons |
ionicons.css |
ION font icons |
jquery.fancybox.css |
Litebox plug-in css |
main.css |
All the css files included here |
slick.css |
Slick carousel |
style.css |
Template main css |
The second file contains all of the specific stylings for the page. The file is separated into sections using:
===== TABLE OF CONTENTS ===== 1. Body 1.1 Google Fonts 1.2 Elements of body 1.3 Links 1.4 Customized html 1.5 Form Elements 1.6 Customized Select 1.7 Date picker 1.8 Customized pagination 1.9 Customized accordion 1.10 Customized alerts 1.11 Customized slick carousel 2. Title 2.1 Elements of title 2.2 Headlines 2.3 Title number 3. Sidebox 3.1 Elements of sidebox 3.2 Headlines 3.3 Images 3.4 Icons 3.5 Transition 4. Transition 4.1 Elements of transition 4.2 Overlay 4.3 Transition 5. Sections 5.1 Elements of section 5.2 Main 5.3 Header 5.4 Aside 5.5 Footer 6. Full Header 6.1 Elements of header 6.2 Topbar 6.3 Weather 6.4 Phone 6.5 Language 6.6 Main nav 6.7 Icon nav 6.8 Social Media 7. Slider 7.1 Elements of slider 7.2 Slick dots 7.3 Main slider 7.4 Form 7.5 Inputs 7.6 Slide images 8. Sub Header 8.1 Elements of subheader 8.2 Page title 8.3 Breadcrumbs 9. About Us 9.1 Elements of about us 9.2 Thumb imgages 9.3 Pdf catalog 9.4 Features 10. Members 10.1 Elements of members 10.2 Intro 10.3 Member 10.4 Images 10.5 Headlines 11. Featured Services 11.1 Elements of services 11.2 Left side 11.3 Paragraph 11.4 Listing 11.5 Right side 11.6 Service boxes 11.7 Images 12. Calculate Shipping 11.1 Elements of calculate shipping 11.2 Form 11.3 Inputs 11.4 Images 13. Steps Features 13.1 Elements of steps 13.2 Step Boxes 13.3 Box Backgrounds 13.4 Headlines 13.5 Links 14. Testimonials 14.1 Elements of testimonials 14.2 Images 14.3 Quotes 14.4 Icons 14.5 Headlines 15. Latest News 15.1 Elements of news 15.2 News box 15.3 Images 15.4 Caption 15.5 Headlines 15.6 Links 16. Clients 16.1 Elements of clients 16.2 Listing 16.3 Images 16.4 Headlines 17. About Intro 17.1 Elements of about intro 17.2 Left side 17.3 Headlines 17.4 Paragraph 17.5 Fun facts 17.6 Icons 17.7 Right side 17.8 Overlay 18. Services 18.1 Elements of services 18.2 Listing 18.3 Images 18.4 Other features 18.5 Side bar 18.6 Pdf Catalog 18.7 Side Banner 19. Vehicles 19.1 Elements of vehicles 19.2 Section title 19.3 Figures 19.4 Ficaptions 19.5 Headlines 20. Dealers 20.1 Elements of dealers 20.2 Map 20.3 Headlines 20.4 Listing 21. News 21.1 Elements of news 21.2 Post 21.3 Post Images 21.4 Headlines 21.5 Sidebar 21.6 Listing 21.7 Gallery 22. Career 22.1 Elements of career 22.2 Panel group 22.3 Headlines 22.4 Paragraph 22.5 Listing 22.6 Buttons 23. Video 23.1 Elements of video 23.2 Video container 23.3 Video 24. Gallery 24.1 Elements of gallery 24.2 Transitions 24.3 Listing 24.4 Images 25. Elements 25.1 Elements of element 26. Contact 26.1 Elements of contact 26.2 Address 26.3 Headlines 26.4 Paragraph 26.5 Links 26.6 Left side 26.7 Right side 26.8 Map 26.9 Form 26.10 Inputs 27. Application 27.1 Elements of application 27.2 Mockup Image 27.3 PSD included 28. Dark Footer 28.1 Elements of footer 28.2 Titles 28.3 Paragraph 28.4 Social media 28.5 Footer menu 28.6 Newsletter 28.7 Middle bar 28.8 Sub footer 29. Resolution Fixes 29.1 Netbook fixes 29.2 Tablet fixes 29.3 Mobile fixes
This is the list of all the jquery files are we used for our theme.
| Tag | Description |
|---|---|
bootstrap-datepicker.js |
Date picker |
bootstrap-select.js |
Bootstrap select |
bootstrap.js |
Bootstrap main framework |
bootstrap-min.js |
Bootstrap min |
contact-form.js |
Ajax - php contact form |
dealers-maps.js |
Multi pin maps |
google-maps.js |
Styled Google Maps |
jquery.counterup.min.js |
Counter |
jquery.fancybox.js |
Fancybox litebox |
jquery.form.js |
Default jquery form plugin |
jquery.min.js |
jQuery library |
jquery.stellar.js |
Parallax backgrounds - elements |
jquery.validate.min.js |
Jquery validation plug-in |
masonry.min.js |
Masonry grid plug-in |
npm.js |
Bootstrap extention plug-in |
scripts.js |
All the plug-ins initializing |
slick.js |
Slic Carousel jquery |
waypoints.min.js |
Scrolling to top jquery |
If you want to change and edit some parameter here is the codes, open up the file scripts.js and change the following code:
// FANCYBOX
$(".fancybox").fancybox();
// HAMBURGER MENU
$('.hamburger-menu').on('click', function(e) {
$("main").toggleClass("side-box-open");
$("body").toggleClass("overflow-hidden");
});
// CLOSE SIDE BOX
$('.close-side-box').on('click', function(e) {
$("main").removeClass("side-box-open");
$("body").removeClass("overflow-hidden");
});
// SEARCH
$('.search-btn').on('click', function(e) {
$(".search-box").toggleClass("search-box-open");
});
// TOOLTIP
$('[data-toggle="tooltip"]').tooltip()
// CUSTOM SELECT
$('.selectpicker').selectpicker();
// DATE PICKER
$('.datepicker').datepicker()
// MAIN SLIDER
$('.main-slider').slick({
dots: true,
infinite: true,
speed: 500,
arrows:false,
fade: true,
autoplay: true,
cssEase: 'linear'
});
ajax contact form is very easy to setup , open up the file process.php and change the your@domain.com part.
< ?php
$to = "your@domain.com";
$from = $_REQUEST['email'];
$name = $_REQUEST['name'];
$subject = $_REQUEST['subject'];
$headers = "From: $from";
$fields = array();
$fields{"name"} = "Name";
$fields{"email"} = "E-mail";
$fields{"subject"} = "Subject";
$fields{"message"} = "Message";
$body = "Here is the message from conceito:\n\n"; foreach($fields as $a => $b){ $body .= sprintf("%20s: %s\n",$b,$_REQUEST[$a]); }
$send = mail($to, $subject, $body, $headers);
? >
Also it is easy to change contact form messages.
<div id="success" class="alert alert-success" role="alert">
<p>Your message was sent successfully! We will be in touch as soon as we can.</p>
</div>
<!-- end success -->
<div id="error" class="alert alert-danger" role="alert">
<p>Something went wrong, try refreshing and submitting the form again.</p>
</div>
<!-- end error -->
I've included only one psd file with this theme:
Include this inside of the PSD folder
Include this inside of the PSD folder
I've used the following images, icons or other files as listed.
Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.