Introduction

Important Notes

Hi! Thanks for buying the Mozzarella HTML5 and CSS3 Template, we hope you enjoy our theme.

This documentation file will help you understand all the different options and features you will encounter.

This documentation file will help you understand all the different options and features you will encounter. Please take the time to read through the documentation, as many support related questions can be answered simply by re-reading these instructions. Anyway, if you encounter with any problems, or have any further questions about the theme, just write us an email to: support@odindesign-themes.com including your purchase code in the email or follow us on Twitter

Envato Elements

Support Info

Regarding item support, please keep in mind that this, being an Envato Elements item, does not have support included, as per Envato's Policy, you can read more here:Item Support on Envato Elements
If you want, you can buy the main market item here: Mozzarella - HTML5 and CSS3 Cafe Bar Template that comes with a 6 months support period

The Pack

Template Specifications

  • 24 HTML Files
  • 26 PSD Files Included ($14 Value)
  • Fully Responsive
  • Responsive Events Calendar (3 modes)
  • Boxed and Wide Versions
  • 3 Different Menu Options
  • Boxed Texture Included

Plugins

Credits

Fonts Used

Credits

Images

Credits

Home Page

index.html

The home page of the site has the following services:

  • Contact form (contact.js)
  • Google maps API with custom markers (gmaps.js)

Contact

How it works

The Contact function lets people leave a message to the page owner.
The file containing the logic of the contact function is "contact.php" which receives the name, email and message from the user input and has a $to variable that has the email of the receiver (you will need to modify this value to the one you would like to receive the emails)

email-to

The Contact function uses a php class named Mailer (the API for this class is described in a submenu item).
The Contact function is handled with ajax (contact.js).

Validation

Name - Email - Message

The contact form of the page has a validate method attached that checks that the user entered a name, message and a valid email using regular expressions (main-validate.js).

Email Styling

How to do it

Changes to email style can be done inside the Mailer class by modifying the setUpBody($content) method.

setupbody

Remember that email styling must be done with inline CSS.

Mailer

API

The Mailer class makes use of the php function mail.
This class is used to send mails while mantaining a general style structure.

  • __construct($from, $to, $subject, $content) -> public
  • setUpBody($content) -> private
  • setUpHeader($from) -> private
  • sendMail() -> public

__construct($from, $to, $subject, $content): sets the sender, receiver, subject and content of the email.
$from -> email of the sender.
$to -> email of the receiver.
$subject -> subject of the email.
$content -> content of the email (without styling)

setUpBody($content): formats the content of the email, style changes can be made here.
$content -> the content of the email

setUpHeader($from): creates the header of the email.
$from -> email of the sender

sendMail(): calls the mail php function with the parameters previously set to send the email.

Footer

How it works

The footer of the site has an integrated flickr widget.

Flickr Widget

How it works

This widget uses flickr rss feed to get public images of a certain user (limit of 9).
The flickr rss is fetched using the getJSON jQuery function and then inserted on the footer.
To change the number of flickr photos displayed you have to change the return statement comparing number on the main.js file.

flickr

Features

Menu - Gallery - Blog - Calendar

The site has four main sections to complement the home page, which are the following:

  • Menu
  • Gallery
  • Blog
  • Calendar

Calendar

How it Works

The Calendar page consists of a fully responsive calendar to display important events.

Calendar Modes

How it Works

The Calendar has three different modes that change based on screen resolution.
You can see pictures of those modes below.

Large

cal-mode

Small (with full weekend names)

cal-mode

Small (with short weekend names)

cal-mode