Foodtruck Ghost – Documentation

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!

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

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 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:

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

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

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.

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 flavour)

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 (Burger Lover flavour)

BLOG PAGE

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

HTML MARKUP:

SCREENSHOT:

Post on Blog page (Burger Lover flavour)

PAGINATION

To move between blog pages we are using pagination buttons:

HTML MARKUP:

SCREENSHOT:

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 flavour)

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 flavour)

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 (Burger Lover flavour)

For more information please check DISQUS home page.

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

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:

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

• Twitter Bootstrap – http://twitter.github.com/bootstrap/
• jQuery – http://www.jquery.com