• Facebook
  • Twitter

Intro


Thank you for purchasing this theme. If you have any questions that are beyond the scope of this help file, please feel free to start new ticket on this page. Thanks so much!


HTML Structure


Foodtruck Ghost is built upon bootstrap framework and is fully responsive. It adapts to window resolution and looks good on all devices including ipad and iphone.

If you would like to read more about bootstrap framework click HERE


GRID SYSTEM AND SINGLE ROW STRUCTURE


The default Bootstrap grid system utilizes 12 columns. It’s responsive grid and adapts to viewport. Below 767px viewports, the columns become fluid and stack vertically. The fluid grid system uses percents instead of pixels for column widths. Each row always include 12 columns (for example col-md-8 + col-md-4 = col-md-12).

 

BASIC GRID HTML:


SECTION


Section is part of page with separate background, has several paramaters that can be changed:

 

  • “bg-2” class – define background-color, you can also use “bg-1”
  • “topOrnament” class – adds fancy strip at the top of section (just remove class to disable it)
  • “repeated” class – it will repeat background image (like brick background in “story” section, it is optional)
  • data-topspace – top padding for section
  • data-bottomspace – bottom padding for section
  • scroll=”scroll” – background will scroll instead be fixed (optional parameter)
  • data-image – path to background image, best resolution is 1920px x 1200px

 

In Foodtruck Ghost we have 2 types of sections:

 

PARALLAX SECTION

 

HTML MARKUP:

SECTION

 

HTML MARKUP:


Flavours


Theme includs 8 flavours. To activate certain flavour just add proper css file.
For example to activate “Coffee and Cream”:

or “Tacos Locos” :
Main style.css (placed in css/ directory) must be always included.
Second added .css file will change page design.
Flavours files (images, fonts, etc) are placed in flavours/[flavour_name] directory, for example :

Avaiblable Flavours

  1. Burger Lover (default)
  2. Cupcake Wagon
  3. Tacos Locos
  4. Seabreeze
  5. Ribs & Dogs
  6. Bad Ass BBQ
  7. Coffee & Cream
  8. Pizza Revelation

Components


Special Headers

Predefined headers you can use by adding special class to header element (there is no difference which tag do you use : h1, h2 or h5),
for example :

 

Social Icons

You can use small, medium or big social icons.
We provided 24 icons

HTML MARKUP:

 

Rounded Image

Just paste img tag inside roundedImg div, and it will be circle shape.

  • data-size – it is cicle radius
 

Buttons

We prepare 2 type of buttons. Example HTML markup:

 

menuBox

This is box to present menu from certain category. It is available in 4 types (different paper graphics). Just add type2, type3 or type4 class to change version.


MAIN MENU STRUCTURE


Just change address, fill in social page urls and upload your logo to images/content/logo.png file and you’re ready to go!

 

HTML MARKUP:

SCREENSHOT:

Main menu (Pizza Revelation flavor)

Main menu (Pizza Revelation flavour)


MAIN SLIDER


It is fullwidth slider of any content. We use flexsldier plugin. Just paste your content into li tags.

 

HTML MARKUP:

And js initialization (js/main.js file),
there you can change slider parameters :

JS:

 

SCREENSHOT:

Main slider

Main slider (Burger Lover flavour)


BLOG SCTRUCTURE


BLOG PAGE

This sections in Foodtruck Ghost show method of displaying the posts as a BLOG LIST.

HTML MARKUP:

SCREENSHOT:

Post Example

Post on Blog page (Burger Lover flavour)

PAGINATION

To move between blog pages we are using pagination buttons:

HTML MARKUP:

 

SCREENSHOT:

Pagination Burger flavor

Pagination (Burger Lover flavour)

AUTOR PAGE

In Foodtruck Ghost you can check all the information about the autor of the post like some short info about him and ammount of post he created.

HTML MARKUP:

SCREENSHOT:

Author page (Pizza Revelation)

Author page (Pizza Revelation flavour)


Contact/Newsletter Form


Template comes with ready to use:

  • Contact Form
  • Newsletter Form

All needed files are in /form directory.
Remember to includeon page.
To configure form just edit form/form.php and change e-mails to your own :

That’s it!

Contact Form

HTML MARKUP:

 

— How to add more fields to form ?

 

Just add another form-group section, for example additional phone and fax :

HTML MARKUP:

 

Newsletter Form

HTML MARKUP:

 

Options (can be changed in HTML) :

 

  • Mail Subject – just change value in : <input type=”hidden” name=”msg_subject” value=”Contact Form”>
  • Success Message – change successMsg div content (below form)
  • Error Message – change errorMsg div content (below form)
Contact Form and Newsletter (Pizza Revelation)

Contact Form and Newsletter (Pizza Revelation flavour)


DISQUS


DISQUS is a networked community platform we are using in Foodtruck Ghost . It is a feature-rich comment system complete with social network integration, advanced administration and moderation options, and other extensive community functions.

 

All the comments are keept on DISQUS account because of that use the DISQUS plugin on your page you need register your website with Disqus

 

HTML MARKUP:

 

SCREENSHOT:

DISQUS Foodtruck Ghost

DISQUS (Burger Lover flavour)

For more information please check DISQUS home page.


CSS Files and Structure


We’ve included style.css file, which contains default styles.

  1. Bootstrap CSS Framework v.3
  2. Font Face
  3. General Styles
    • typography
    • buttons
    • main menu
    • google map
    • socials links
    • section
    • flexslider
    • menuBox
    • rounded image
    • eventBox
    • gallery
    • forms
    • footer
    • media queries, adjustments
      • @media (min-width: 990px) {}
      • @media (max-width: 990px) {}
      • @media (min-width: 767px) and (max-width: 990px) {}
      • @media (max-width: 767px) {}
      • @media (max-width: 480px) {}

If you want to modify or add new styles please find this lines in style.css :

Below you can add your code.

Main /css/style.css includes “Burger Love” styles
Each FLAVOUR style (for example flavours/cupcake/css/cupcake.css) overwrite “main styles” with his own.


Typography


We use google font service to include fonts or font face sets.

  • Burger Lover (default)
    – geared slab regular
    – geared slab bold
    – aleo bold
    – aleo regular
  • Cupcake Wagon
    – Grand Hotel
    – Patua One
  • Tacos Locos
    – El Rio Lobo
    – Kaushan Script
    – Bree Serif
  • Seabreeze
    – Kaushan Script
    – Bree Serif
  • Ribs & Dogs
    – Kaushan Script
    – Bree Serif
  • Bad Ass BBQ
    – Carnivalee Freakshow
    – Kaushan Script
    – Bree Serif
  • Coffee & Cream
    – Grand Hotel
    – Kaushan Script
    – Bree Serif
  • Pizza Revelation
    – Lobster
    – Kaushan Script
    – Bree Serif

Credits:
Geared Font
Aleo Font
Grand Hotel Font
Patua One Font
El Rio Lobo Font
Kaushan Script Font
Bree Serif Font
Carnivalee Freakshow Font
Lobster Font
Chunk Five Font


JavaScript


All javascripts are placed in folder /js. In main.js file we implement all functions calls.
This theme uses following Javascript files:

  1. Bootstrap v 3 framework (powerful front-end framework for faster and easier web development)
  2. jQuery v1.10.2
  3. Flexslider 2
  4. Arctext.js (A jQuery plugin for curved text)
  5. GMAP3 5.1.1 – plugin to use google maps

Curved Text (arctext.js)

You can enable curved text for element by adding “curved” class to it.
Remember thatlibrary should be included. As example there is curved header on fullwidth map. Credits: http://tympanus.net/codrops/2012/01/24/arctext-js-curving-text-with-css3-and-jquery/

data-radius – it is radius of curve
data-direction – direction of effect

 

HTML MARKUP:

 

JAVASCRIPT MARKUP:

Google Map (GMAP3 Plugin)

This is google map with custom marker, you can define couple parameters:

  • data-location – address to show
  • data-text – text in bubble overlay
  • data-height – map height (if undefined height will be 220px)
  • data-offset – by how many map should be repositioned from marker center point (default -30)

It uses gmap3 plugin.
Documentation: here

 

HTML MARKUP:

You can also provide latitude and longitude (instead exact address):
All javascript code can be found in js/main.js file:


Sources and Credits


The following sources and files have been used to build up this theme


Elite Author
We are elite
CreateIT
Who we are

Hi, we are createIT. We create IT. Web applications and websites to be precise.

And we are REALLY good at it.

Get to know us at www.createIT.pl
Thanks for buying!