First things first; I'd to offer you a sincere "thank you"! I think it's wonderful you have purchased CargoPress HTML and I am confident you will enjoy using this product just as much as I did making it!

If you run into any issues, of any kind, or have any quetions, pleae do not hesitate to contact our support desk or should me an email at support@chillyorange.com.

1 Template Features

CargoPress HTML template comes with the following features:

  • Built with Bootstrap 3
  • 18 fully coded and valid HTML5 pages
  • Working Quick Quote form and contact form (with "honey pot" spam prevention)
  • Fully functional and easy to configure Google maps for the home page and contact page
  • Three home page variations: slide show, static image and video background
  • Track & Trace pages; allowing customers to track and trace their cargo/freight
  • Well writen, organized and indexed CSS

2 Installation

Installing this HTML template is as easy as uploading the files found in the html folder to a web server OR directly open the index.html file in your browser.

3 HTML Structure

The CargoPress HTML templates comes with the following 18 HTML files:

  1. about.html
  2. article.html
  3. cargo.html
  4. contact.html
  5. faq.html
  6. ground_transport.html
  7. index_static.html
  8. index_video.html
  9. index.html
  10. logistic_service.html
  11. news.html
  12. services.html
  13. storage.html
  14. tables.html
  15. tracking_result.html
  16. tracking.html
  17. trucking_service.html
  18. warehousing.html

Eevry single HTML file included with this template is built using Bootstrap and follows the typical Bootstrap grid structures. For more info about Bootstrap, please visit the official Bootstrap web site.

4 CSS Structure

The CargoPress HTML template comes with the following CSS files:

  1. css/style.css - contains all styles for the entire template, used by all HTML files.
  2. css/style-alt0.css - contains the original version of alternative styles.
  3. css/style-alt1.css - contains first alternative style options.
  4. css/style-alt2.css - contains second alternative style options.
  5. css/style-alt3.css - contains third alternative style options.
  6. css/style-alt4.css - contains fourth alternative style options.
  7. css/magnific-popup.css - used for the fleet gallery, by default used by index.html only.

5 Javascript Structure

The CargoPress contains the following Javascript files:

  1. js/bootstrap/button.js - Bootstrap button code, used by all HTML files.
  2. js/bootstrap/carousel.js - Bootstrap button code, used used on the index.html, index_static.html and index_video.html pages.
  3. js/bootstrap/collapse.js - Bootstrap collapse code, used by all HTML files.
  4. js/bootstrap/transition.js - Bootstrap transition code, used by all HTML files.
  5. js/bootstrap/validator.js - Bootstrap form validator code, used on the index.html, index_static.html and index_video.html pages.
  6. js/custom.js - contains custom Javascript code, used on all pages.
  7. js/jquery.magnific-popup.min.js - contains the gallery code, used on the index.html, index_static.html and index_video.html pages.
  8. js/modernizr.custom.24530.js - the modernizr library, used on all pages.
  9. js/NumberCounter.js - number counter code, used on the index.html, index_static.html and index_video.html pages
  10. js/SimpleMap.js - Google Map code, used on the index.html, index_static.html, index_video.html, contact.html and tracking_result.html pages
  11. js/TouchDropdown.js - touch dropdown code, used by all pages.
  12. js/underscore.js - the underscore library, used by all pages.
  13. js/video.js - custom HTML5 video code, used by the index_video.html page only.
  14. js/WidgetLine.js - WIdget line code, used by all pages.

6 Quote & Contact Forms

The CargoPress HTML template comes with two working forms: one "quick quote" form on the index pages and a regular contact form on the contact page. To make these forms functional, a PHP file named form.php is included with the template.

By default, the forms are setup to function "out of the box". The only thing you would want to change, is the value of the $emailTo in form.php. This will allow you to specify which email address to send the form data to.

"Honey pot" spam detection
The forms have been fitted with a so called "honey pot" spam prevention measure. By adding a hidden input field to the form (invisible for regular visitors) we can detect wether a human or spam bot is filling out the form (spam bots stypically try to insert stuff into every input in a form, including our hidden one).

Setting an email subject
The form data is compiled into an email, and to set a subject for this email, another hidden field is added to each form (named "theSubject"). You can use this field to change the email subject.

7 Home & Contact Maps

The CargoPress templates comes with custom Google Maps on the index pages and the contact page. The maps are pretty easy to configure. For starters, have a look at the head section of the HTML file. There, you will find a couple of lines of Javacript code which tell the template where to place the marker on the map. Feel free to change the location (by altering the "address" value) and the marker image (by altering the "custompinimage" value).

After making these changes, the template will automatically adjust the map after reloading the page. One other available setting is the zoom level of the map. To change this, locate the DIV element with class name "js-where-we-are" and adjust the data-zoom attribute to modify the zoom level.

8 Track & Trace

CargoPress comes with a couple of pages suited for a Track & Trace feature. The user will submit a tracking code, after which he or she will see a Google Map showing the route, including waypoints together with a table with waypoint / distribution center info.

To configure the route in the Google Map, you will to edit the javascript code in the head section of the HTML file. You can set the starting and end points by editing the "origin" and "destination" values. In addition, you can specify one or more waypoints to be included in the route.

9 Boxed / Full Width

By default, the site will span the full width of the screen. If you prefer a "boxed" version, simply add the class name "boxed" to the body element.

imagesfonts

10 Alternative Styles

The CargoPress template comes with a total of five alternatives styles (including the default style). To switch between the different styles, simply include one of the following style sheets in the page:

  • css/style-alt1.css
  • css/style-alt2.css
  • css/style-alt3.css
  • css/style-alt4.css

11 Used Images & Fonts

Unfortunately, due to copyright restrictions, we are not allowed to bundle the pictures used in the live demo. If you are interested in using these pictures, you can purchase them from Shutterstock; all used pictures can be found here.

The CargoPress HTML template makes use of the following two (free) Google fonts: