introduction

Before setting up the theme, it is imperative to realize it's capabilities, scope and potential usage.

While developing this theme our main focus was to make it user friendly and easy to use for non-technical users requiring their less input or otherwise minimal expertise.

This theme is 100% (highly) customizable, each block is portable and can be moved to another page hence producing a new design/layout.

Also by simply adding classes in code, user can get variations in styles.

We have optimized the code for load speed and extensively used CSS for effects etc.

The code is 100% bug free and follows W3C standards.

We have used latest tools for development e.g., HTML5/CSS3, BootStrap that will give you powerful and innovative experience for your projects. The theme is fully responsive and retina ready, compatible with all browsers and mobile-devices.

It has passed highest standards of Quality Assurance, giving you freedom and enjoyment of a well-managed, error free code that you can use in any project.

Delicieux - Exquisite Restaurant is a multipupose Template that has following feature

Home & Inner Pages

10+ Onepage Home Pages
10+ Home Multiple Pages
10+ Home Page Sliders
1 About Us Page
4 Our Menu Pages
4 Blog Pages
5 Shop Pages
1 Gallery Page
1 Contact us Page
1 Events Page
1 Coming Soon Page
1 Error Page

Some Extra Feature

10+ Sliders
5 Shop Pages
1 Events Page

Setting up Delicieux Theme

Follow these guide lines below to get started with your Site:

Open the Delicieux/HTML Folder to find all the Templates Files
You will need to Upload these files to your Web Server using FTP in order to use it on your Website.
Make sure you upload the required files/folders listed below:
- HTML/css - Required css files
- HTML/fonts - Required fonts files
- HTML/images - Required images files
- HTML/js - Required Javacripts files
- HTML/contactform.php - Required Contact form PHP file
- HTML/reservation.php - Required Reservation form PHP file
- HTML/index.html - Index File/Homepage
- The other files can be used according to your requirement.
After adding all these folder on server you're now good to go..! just add your Content and you will have awesome Template.

HTML Structure

We have Developed Delicieux with a simple coding structure. here is the sample:

<!DOCTYPE html>
<html lang="en">
  <head>

    <!-- All Stylesheets here -->
  
  </head>
  <body>   

	<!-- nav of the page -->
	<nav class="navbar">
            ...
	</nav>
	
	<!-- slider -->
	<div class="slider">
            ...
	</div>
	
	<!-- Contents Containers -->
	<div class="container">
            ...
	</div>
	
	<!-- footer of the page -->
	<footer>
		
	</footer>	
	
    <!-- jQuery (necessary for Bootstrap's JavaScript plugins) -->
    
    <!-- Include all compiled plugins (below), or include individual files as needed -->
    
  </body>
</html>

Page PreLoaders

You can show Interactive loaders to your Visitors while the Pages of you Website loads in the background & then Reveal your Pages with CSS3 Transitions.

<div id="preloader">
	<div id="status">
	<!-- Here you can add preloader style -->
	</div>
	</div>

Logo Settings

The Logo can be found in the Nav Section - nav

<a class="navbar-brand" href="index.html">	
	<img src=""images/logos/logo-nav.png" class="img-responsive" alt="Delicieux Logo">	
</a>

Note The Logo Image's width/ height can be 125px/ 50px

Retina Logo

If you wish to use a Retina Logo, make sure that you use double the size of your Standard Logo.

Changing Fonts

Changing Fonts in Delicieux is very easy. By default, Delicieux uses Lato & Playfair Display from the Google Fonts Library.

1- Add this code to your website, "css/all-stylesheets.css" file.

<!-- Fonts Poppins -->
@import url(https://fonts.googleapis.com/css?family=Lato:400,100,100italic,300,300italic,400italic,900,900italic,700italic,700);
@import url(https://fonts.googleapis.com/css?family=Playfair+Display:400,400italic,700,700italic,900,900italic);

2- Integrate the fonts into your CSS:

font-family: 'Lato', sans-serif;
font-family: 'Playfair Display', serif;

Nav Dropdown Menu

You can start using the Dropdown Menu. Try using the Following code:

<nav class="navbar yamm navbar-default fill-black normal">
<div class="container">
	<div class="navbar-header">
		<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
		<span class="sr-only">Toggle navigation</span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		<span class="icon-bar"></span>
		</button>
		<a class="navbar-brand" href="index.html"><img src="images/logos/logo-nav.png" alt=""></a>
	</div>
	<div id="navbar" class="navbar-collapse collapse">					
		<ul class="nav navbar-nav navbar-right">
			<li class="dropdown active">
				<a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Home <span class="caret"></span></a>
				<ul class="dropdown-menu dropdown-menu-left">
					<li><a href="index.html">Home Page 01</a></li>								
				</ul>
			</li>	
		</ul>
	</div>
	<!--/.nav-collapse -->
</div>
<!--/.container-fluid -->
</nav>

Page Titles

Delicieux has following base HTML structure for page title.

Images classes, image-2, image-2, --- , image-8

<div class="inner-banner title-area text-center image-4">
	<div class="container title-area-content">
		<h1 class="animated" data-animation="fadeInUp" data-animation-delay="200">About Us</h1>
		<h2 class="animated" data-animation="fadeInDown" data-animation-delay="200">All about delicieux</h2>
		<div class="line animated" data-animation="fadeInDown" data-animation-delay="400"></div>
	</div>
</div>

Columns & Grid

Bootstrap Grid

.col-md-1

.col-md-2

.col-md-3

.col-md-4

.col-md-5

.col-md-2

.col-md-6

.col-md-1

.col-md-11

.col-md-2

.col-md-10

.col-md-3

.col-md-9

.col-md-4

.col-md-8

.col-md-5

.col-md-7

Slider Types & their Options

Delicieux includes 10+ Unique Sliders & Pre-Built Slider Templates for you to be used on any Page with 10s of Options. The List of all the Sliders included are mentioned as follows:

Fullscreen Fade
Fullscreen Slider
Fullscreen Interactive
Fullscreen Rotating Words
Fullwidth Fade
Fullwidth Slider
Fullwidth Carousel
Gallery News
Highlight Showcase
Premium Carousel
Fullscreen Zooming
HTML5 Video
YouTube Video
Vimeo Video

Please see folder "Revolution Slider Documentation" for help.

Blog Setup

Delicieux has 4 different type of Blog Posts. Use the Code Sample below:

Blog post - Img on left side - blog.html

<div class="row blog-post">
	<div class="col-lg-8 col-md-8 animated" data-animation="fadeIn" data-animation-delay="800">
		<div class="picture"><img src="http://placehold.it/770x330" class="img-responsive center-block" alt=""></div>
	</div>
	<div class="col-lg-4 col-md-4">
		<div class="blog-contents animated" data-animation="fadeIn" data-animation-delay="1000">
			<h1 class="post-title"><a href="#">Cooking Food With Love</a></h1>
			<div class="post-metas">April 18, 2015 In <a class="" href="#">Recipe</a></div>
			<div class="line"></div>
			<div class="post-desc">
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem ...
			</div>
			<div class="button"><a class="fill-orange" href="#">Read more</a></div>
		</div>
	</div>
</div>

Blog post - Img on Right side - blog.html

<div class="row blog-post">
	<div class="col-lg-8 col-md-8 pull-right animated" data-animation="fadeIn" data-animation-delay="400">
		<div class="picture"><img src="http://placehold.it/770x330" class="img-responsive center-block" alt=""></div>
	</div>
	<div class="col-lg-4 col-md-4">
		<div class="blog-contents animated" data-animation="fadeIn" data-animation-delay="600">
			<h1 class="post-title"><a href="#">Cooking Food With Love</a></h1>
			<div class="post-metas">April 18, 2015 In <a class="" href="#">Recipe</a></div>
			<div class="line"></div>
			<div class="post-desc">
				Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem ...
			</div>
			<div class="button"><a class="fill-orange" href="#">Read more</a></div>
		</div>
	</div>
</div>

Blog grid - blog-grid.html

<div class="col-lg-4 col-md-4 col-sm-6 blog-post">
	<div class="picture animated" data-animation="fadeIn" data-animation-delay="200"><img src="http://placehold.it/720x720" class="img-responsive center-block" alt=""></div>
	<div class="blog-contents animated" data-animation="fadeIn" data-animation-delay="400">
		<h1 class="post-title"><a href="#">Cooking Food With Love</a></h1>
		<div class="post-metas">April 18, 2015 In <a class="" href="#">Recipe</a></div>
		<div class="line"></div>
		<div class="post-desc">
			Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
		</div>
		<div class="button"><a class="fill-orange" href="#">Read more</a></div>
	</div>
</div>

Blog Lists - blog-list.html

<div class="col-lg-6 col-md-6">
	<div class="row blog-post">
		<div class="col-lg-6 col-md-6 col-sm-6">
			<div class="picture animated" data-animation="fadeIn" data-animation-delay="200"><img src="http://placehold.it/720x720" class="img-responsive center-block" alt=""></div>
		</div>
		<div class="col-lg-6 col-md-6 col-sm-6">
			<div class="blog-contents animated" data-animation="fadeIn" data-animation-delay="400">
				<h1 class="post-title"><a href="#">Cooking Food With Love</a></h1>
				<div class="post-metas">April 18, 2015 In <a class="" href="#">Recipe</a></div>
				<div class="line"></div>
				<div class="post-desc">
					Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam.
				</div>
				<div class="button"><a class="fill-orange" href="#">Read more</a></div>
			</div>
		</div>
	</div>
</div>

Setting Up Parallax Sections:

Make sure your Parallax Images are of enough Width & Height, preferably 1920x1080 or above.

<div class="parallax-1">
	<div class="container">
		<div class="row">
			<div class="col-lg-12">
				
			</div>
		</div>
	</div>
</div>

Tabs, Toggles & Accordions

You can use Tabs, Toggles & Accordions in Various Styles and with Different Options to display Below the Fold content.

Tabs

Use this code to display Tabs:

<div class="tabs-section">
	<ul class="tabset">
		<li><a href="#tab-1">Tab 1</a></li>
		<li><a href="#tab-2">Tab 2</a></li>
		<li><a href="#tab-3">Tab 3</a></li>
	</ul>
	<div class="tab-content">
		<div id="tab-1">
			This is Tab 1 Content
		</div>
		<div id="tab-2">
			This is Tab 2 Content
		</div>
		<div id="tab-3">
			This is Tab 3 Content
		</div>
	</div>
</div>

Note: Make sure you add unique IDs for each Tab Container and Tab Items.

Accordions

You can add an Accordion using the Code below:

<ul class="beans-accordion">

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

	<a class="opener" href="#"><i class="fa"></i>  Accordion Title/opener  </a>
	<div class="beans-slide">Accordion Content Goes Here</div>

</ul>

Lightbox

Setting up Lightboxes:

Adding a .lightbox class to any Link or Button will turn it into a Lightbox Element. You can use different Types of Lightbox with an Easy Setup:

Single Image:

<a class="image-popup-vertical-fit" href="http://placehold.it/150x150" title="Pellentesque habitant morbi"></a>

Video:

<a class="popup-youtube" href="http://www.youtube.com/watch?v=0O2aH4XLbto">Lightbox Video</a>

Note: It is recommended that you use only this Format http://www.youtube.com/watch?v=kuceVNBTJio for Youtube Videos.

Google Maps

You can add Embedded Google Maps iframe to any Page using the following setup:

Add a section which will contain your Google Map:

<iframe src="https://www.google.com/maps/embed?pb=!1m14!1m8!1m3!1d25215.625657884106!2d144.956637!3d-37.81456500000001!3m2!1i1024!2i768!4f13.1!3m3!1m2!1s0x6ad65d4e793770d3%3A0x9e44d6ad0d76ba7c!2s121+King+St%2C+Melbourne+VIC+3000%2C+Australia!5e0!3m2!1sen!2sus!4v1435061406583" height="400" allowfullscreen></iframe>

Countdown

You can add a Countdown Timer to any Page using the following setup:

<div class="count"></div>
<script>
	$(window).load(function() {
		$('.count').counterUp({
			delay: 10,
			time: 1000
		});
	});
</script>

Contact AJAX Form Setup

Update email address. Please open "contactform.php” update your email address in line#2.
$adminemail = "youremailhere@googlemail.com";

Reservation AJAX Form Setup

Update email address. Please open "reservation.php” update your email address in line#2.
$adminemail = "youremailhere@googlemail.com";

Images

Note: If you need the Default Mockups PSD Files used in the Delicieux Template, you can Buy them here

introduction

Delicieux - Exquisite Restaurant is a multipupose Template that has following feature

Home & Inner Pages

Some Extra Feature

Setting up Delicieux Theme

HTML Structure

Page PreLoaders

Logo Settings

Retina Logo

Changing Fonts

Nav Dropdown Menu

Page Titles

Columns & Grid

Bootstrap Grid

Slider Types & their Options

Blog Setup

Blog post - Img on left side - blog.html

Blog post - Img on Right side - blog.html

Blog grid - blog-grid.html

Blog Lists - blog-list.html

Setting Up Parallax Sections:

Tabs, Toggles & Accordions

Tabs

Accordions

Google Maps

Countdown

Contact AJAX Form Setup

Reservation AJAX Form Setup

Images

jQuery

CSS & Fonts

Initial Release V1.0