Royalty

Restaurant HTML5 & Resonsive Template


+ css
   - style.css : Main style sheet
   - style-switcher.css : For style switcher panel only, no need to include in your product
   - theme-1.css (Predefined color, in case you do not like default color)
   - bootstrap, fontawsome, ...
+ dev-fonts : For offline No need to include in your product.
+ fonts : contain fontawsome font, and glyphicons font
+ img : container images and pictures
+ js
   - ht-js : main javascript file to call other script
+ php: PHP Helpers - Ex: Contact Us form.
+ plugin : external plugins which have more than 1 file
+ scss : contain scss
   + scss : all source css file is here, combine by style.scss
      - base.scss : contain mixin function and some other base style
      - module : contain css of discretes part
      - 404.scss, menu.scss, ... apply to specific page
   + theme : minified of all scss with only purpose to control color scheme, combine by theme.scss

Goolge Fonts

This template use 2 fonts: Amatic SC & Open Sans. All are from google.

<link href='http://fonts.googleapis.com/css?family=Open+Sans:400italic,400,600,300,700,800,500' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Amatic+SC:400,700bold' rel='stylesheet' type='text/css'>

If you want to use other font you like, follow these step:

Step 1: Access to https://www.google.com/fonts‎, follow the instruction to get link and font-family property.

Step 2: Put your link into head part of html file.

Step 3: Go to css/style.css, change the font-family to what you get in the goole font site instruction.

To change general text font, change font-family property in:

body {
  font-family: 'Open Sans', arial, sans-serif, helvetica;
}

To change the heading text font, you need to find all current :

font-family: 'Amatic SC', arial, sans-serif, helvetica;

And then replace by new font.

Use your own font

Although we use google font in this template, you still put 2 offline fonts for fallback.

Step 1: Copy your font in to place you want.

Step 2: Go to css/style.scss change, find 2 blocks look like bellow. The first block take responsibility for general text. The second block take responsibility for some heading markup.

@font-face {
  font-family: 'Open Sans';
  src: url(../dev-fonts/OpenSans-Regular.ttf);
}
@font-face {
  font-family: 'Amatic SC';
  src: url(../dev-fonts/AmaticSC-Regular.ttf);
}

Change only the link to your font. For example, if you have "roboto.ttf" font locate in directory "fonts", the url should be:

@font-face {
  font-family: 'Open Sans';
  src: url(../fonts/roboto.ttf);
}

However, if you want to use that font's name for font-face, like this:

@font-face {
  font-family: 'Roboto';
  src: url(../fonts/roboto.ttf);
}

You need to search replace all font-family along the css file by your new font-face name, like this:

font-family: 'Roboto', arial, sans-serif, helvetica;

If you want to change font for only certain parts, after make change to @font-face, you just need to find that part in style.css then add your font-family. For example, if want want to change font for only <h1> tag to Roboto, so the style should be:

h1 {
  font-family: 'Roboto', arial, sans-serif, helvetica;
}  

Font Awesome Icons

This template make use vector icons from Font Awesome.

Use this markup to add icons:

<i class="fa fa-icon">

For more detail, please visit Font Awesome

In this template, we support 10 predefined colors. (You can preview through style switcher panel. If you want to set one of those color to your real project, just find the line:

<link rel="stylesheet" href="" id="theme">

It locates around line 27, the href property is empty, just put css/theme-name.css inside href (theme-name is the name of the css theme file, you could see these css file in css directory). For example, if you like our calypso color, the markup should be:

<link rel="stylesheet" href="css/theme-calypso.css" id="theme">

Date Time Picker

Create a form, put <div id="dtBox"></div> to initialize for pugin, for each input you need to call datetime picker, data-field="date".

<form>
  <div id="dtBox"></div>
  <input  type="text" data-field="date" class="with-addon form-control" placeholder="Date *">
  <input type="text" data-field="time" class="with-addon form-control" placeholder="Time *">
</form>

For more detail, visit http://curioussolutions.github.io/DateTimePicker/

Nivo Lightbox

Call a single nivo lightbox

<a href="image.jpg" class="nivo-lightbox" title="This is title"><img class="img-responsive" src="image.jpg" alt=""></a>

Call gallery nivo lightbox

<a data-lightbox-gallery="gallery1" href="image1.jpg" class="nivo-lightbox" title="This is title"><img class="img-responsive" src="image1.jpg" alt=""></a>

<a data-lightbox-gallery="gallery1" href="image1.jpg" class="nivo-lightbox" title="This is title"><img class="img-responsive" src="image1.jpg" alt=""></a>

For more detail, visit http://demo.dev7studios.com/nivo-lightbox/

Google Maps

To get your own position, go to maps.google.com, search your location, right click on that location, choose "What's here?". Look for your Longtitude and Latitude at the address bar.

Change 2 to value in var myLatlng = new google.maps.LatLng(43.1036269,-77.8787227) to your Longtitude and Latitude.

<script>
function initialize() {
  var map_canvas = document.getElementById('map');
  var myLatlng = new google.maps.LatLng(43.1036269,-77.8787227);

  var map_options = {
    center: myLatlng,
    zoom: 15,
    mapTypeId: google.maps.MapTypeId.ROADMAP,
    scrollwheel: false
  }

  var map = new google.maps.Map(map_canvas, map_options);

  var marker = new google.maps.Marker({
    position: myLatlng,
    map: map,
    title:"Royalty Shop"
  });
}

google.maps.event.addDomListener(window, 'load', initialize);
</script>

jQuery - is a Javascript library that greatly reduces the amount of code that you must write. For more information, please visit http://www.jquery.com/

jQuery Browser - Contains flags for the useragent, read from navigator.userAgent. For more information, please visit http://api.jquery.com/jquery.browser/

Stellar.js - a perfect Javascript library for parallax scrolling. For more detail, visit http://markdalgleish.com/projects/stellar.js/docs/

jQuery BlackAndWhite - This plug-in can easily convert any colored image into a B&W greyscale image. It uses the the HTML5 canvas tag and a fallback for the old browsers. For more detail, visit http://gianlucaguarini.github.io/jQuery.BlackAndWhite/

JCarousel - jCarousel is a jQuery plugin for controlling a list of items in horizontal or vertical order. For more detail, visit http://sorgalla.com/jcarousel/

onScreen() - A jQuery plugin that does stuff to elements when they enter or leave the viewport. For more detail, visit http://silvestreh.github.io/onScreen/

Jquery Validatation - This jQuery plugin makes simple clientside form validation easy. For more detail, visit http://jqueryvalidation.org/documentation/

jQuery Isotope - A jQuery plugin which help to filter item with animation effect. For more detail, visit http://isotope.metafizzy.co/

Regarding contact form as main part of Contact Us section, only thing you need to do is to setup your email address.
To do this, please open "php/contact-form.php" file and change this line:

$to = your@gmail.com
One notice: This will be functional only on your server, php file can not be executed on your local computer. To setup in reservation page, you need to open"php/reservation-form.php" and change like this.

Pages

about.psd

blog detail.psd

blog.psd

contact.psd

homepage.psd

mainnav-stl-1.psd

menu - set.psd

menu - single - grid.psd

menu - single - list.psd

reservation.psd

service.psd

Sprites

@an-article-caret.psd

@services-sprite.psd

@sidebar-heading.psd

@star.psd

@ultility-icon.psd

 

Fonts

Google Fonts

Font Awesome

Plugin

jQuery

jQuery Browser

Stellar.js

jQuery BlackAndWhite

JCarousel

onScreen()

Jquery Validatation

jQuery Isotope

Images

Copperpipe

Pressmaster

BonninStudio

Picjumbo