Template Bon Appetit Documentation

Installation

Bon Appetit template documentation
(based on VikRestaurants extension)

Template Installation

Step 1 - Install the E4J Bon Appetit Template

After you have unzipped the .zip file, go to the back-end setting panel of your Joomla! website, visit the: "Extensions → Extension Manager" page, upload the E4J Bon Appetit installation package of your Joomla version then hit the "Upload and Install" button.

Joomla Template installation

 

Step 2 - Set the template as default and set its style

Once the template has been installed, set the template as Default from the Menu Extensions - Template Manager page. To set it as default, simply click on its outlined star button on the list. You can choose between five color variations: Red, Orange, Green, Beige.

Joomla Template installation success

Modules List

Here the list of all the modules that we used in the our demo website (you can download them just clicking on the single item of the following list):

Vik Content Slider

Vik Social Icons

Vik Words

Vik Google Maps

Vik Contact Form

Menu Setup

After you created your menu, you need to assign it at a menu module published in the 'mainmenu' module position, to do it, you need to go to:

Extensions > Module Manager

Then create a new Menu module and then publish it in the mainmenu position of the template.

Logo Setup

Setting up the logo in Joomla is easy. Just create a Custom HTML module in the logo position. Now you insert an image from the Joomla editor image. The html output will have this apparence:

<img src="images/logo.png" width="200" height="50" alt="logo"/>

Slider Setup

Inside the “Modules” folder of the zip package you can find the two slider modules for this template.

Vik Content Slider

template logo parameter

This module allows you to create a slider with differents type of content.

Before to configure it you need to create the “vikcslider” folder inside the “Images” folder of Joomla and upload there the vikcslider images. After you do it, you have five fields for each image:

  • Background image - This field allows you to choose an image as a background for the slide.
  • Image - This field allows you to choose an image that will appear over the background image chosen in the first field
  • Title slide - In this field you can write the title of your slide
  • Text - This is the field for the description of your slide
  • Read More Link - In this field you may to insert a link for your slide

If you wish to configure VikContentSlider, go to:

Extensions > Module Manager

Then edit the VikContentSlider module and set the 'width' of the slider, pay attention to write with your value the unit “px” or “%” like the default value. Choose your images and text and publish the module in the slider or slider-fullscreen position.

If there are any issues with the slider, try setting the Load 'JQuery' field in the 'Basic Options' tab to 'No'

Template Settings

Responsive

You can make your website compatible with mobile devices (like smartphones, tablets, etc) by setting the 'Responsive Layout' parameter to 'yes'. The Responsive text Navigation Menu parameter is customizable text that will be shown on the Main menu when you navigate the website with a device.

Extensions -> Template Manager -> E4J Bon Appetit

Joomla template responsive

Background And Fonts

You can choose different fonts for the website’s body and headers.

Extensions -> Template Manager -> E4J Bon Appetit

Joomla template background fonts

Available Modules

Vik Restaurants Items

The "OUR ADVICES" part has been created with the "Vik Restaurants Items" module, it lets you choose a number of products to display with a scroll effect. 

It has been published in the Upcontent position.

Vik Restaurants Working Shift

This module shows all the Weekly Working times of your Restaurant.
In the Configuration panel, you can choose to display one single page (the first tab), just the second, or both.

working shift screenshot

Vik Words

You can insert up to 10 quotes and those will be displayed with a fade effect.

words screenshot

Vik Icons

This module displays icons that link to Facebook, Twitter, Google+, Youtube, Pinterest, Tumblr, 4squared.
To display them in a vertical alignment, as shown in our demo website, you have to add the class suffix “socialonly“.

social icons screenshot

Vik Google Maps

Insert your Google Maps API Key and the location of your building and all your main locations, and this module will display them in a map. Remember to insert the Center Maps Latitude/Longitude in the Map Settings Tab. This could be the same of your coordinates’ structure.

google maps screenshot

Vik Contact Form

With this module you can create a simple form module for your emails.

contact form screenshot

Modules Variations

The BonAppetit template provides differents types of module variations. This is one of our modules, this is how it looks without any Class Suffixes added:

Joomla template basic suffix

To apply these variations you have to add the class suffixes to your modules from their Advanced Configuration. All the classes suffix that you will see below need to be written without quotes. Before you start writing the class suffix chosen, you have to leave a white space (in the example below we have highlighted the white space), in this way:

joomla module class single suffix

 

It’s possible to combine different class suffixes, for example, if you wish to use a grey background and have no padding on your image, you can write both the suffixes separated by a blank space, this way:

joomla module class multiple suffix

Here the list of the class suffix that you can use with this template, beside them you can see their examples:

grey

Changes the background from white to grey.

Joomla class suffix grey

imglarge

Removes the first image's padding

Joomla template color layout

underline

Adds a grey underline to the title of the module

Joomla template underline suffix

title-color

Adds the selected color variation to your title

Joomla template title-color suffix

middle-line

Adds a double-border line next to the title

Joomla template middle-line suffix

title-center

Centers the title of the module

Joomla template title-center suffix

border

Adds a border to the module

Joomla template border suffix

color

Adds the selected color variation to the background of your module

Joomla template color suffix

loginmenu

To use Joomla!'s Default Login module in the main menu, set up this module in the Main Menu position, and add the class suffix 'loginmenu'

Joomla template loginmenu suffix

langtab

To use Joomla!'s Default Language Switcher module with our style, set up this module in the Upmenu-left position, enable the 'Dropdown' and 'Flags' parameters and add the class suffix 'langtab'

Joomla template langtab suffix

Map Module Positions

This is the Map Module positions of this template:

template map module positions

Here is a more in-depth look to the positions:

template map module positions