JD Restaurant Joomla Template is the ultra-responsive Joomla template specially developed for cafe and restaurant websites. So if you own a café, restaurant, food stall, coffee shop or anything related to foods and drinks, this Joomla restaurant template best fit for your website. It's clean and fancy design add more value to restaurant website. JD Restaurant is built with drag and drop SP page builder pro (You are saving $49) which makes it easy to create pages by just drag and drop elements.
JD Restaurant comes with reservation system and other contact forms where a user can fill their information and make the reservation to celebrate their special day. This template is not only used for the making reservation, but it can also help you to organize events in your restaurants. It has prebuilt pages for the events.
JD Restaurant Joomla theme comes with Smart Slider 3 Pro (You are saving $25). Smart Slider 3 is the next generation visual editor to create responsive, animated Sliders and Blocks.
JD Restaurant Joomla template is powered with powerful Helix3 Framework, powerful admin panel with built-in functionalities: Theme settings, layout configuration, Mega menu builder and option to optimize CSS & JS.
No images from demo
There will be no any image included in the quickstart package. All the images displayed in demo of the template are paid and we dont have any right to distribute these images. So all the images are replaced with placeholder images.
Pro extensions are bundled in only Quickstart package
All the pro extensions used in the templates, are bundled only in the quickstart package. These are not provided separately. If there will be any update in the extensions version, we will release an update for the template with other changes if possible. And if you want to get a licence or regular update for the extensions, you need to purchase licence key from the respective owner of the extensions.
How to create a CSS Stylesheet
If you are playing with CSS, please make sure you are creating a new custom CSS Stylesheet. Because if you are making changes in our files, it will be problematic on the time of template update. When you will install the template update, you will lost all the changes you have made in the CSS Stylesheet. And if you are using your own custom CSS file, then the CSS Stylesheet will not be overwritten.
- Add your own CSS by creating a custom.css file inside the /css folder.
If you want to recieve automatic updates for this template and don't want your customizations to disappear, we recommend adding new files for your custom code and NOT modifying the existing core files.Create a new file and write all the custom code in that file. So when there are updates, your custom work will stay and you can stay up-to-date with the latest version of the template as well..
Click here to know how to add LESS/JS file
Installing Template & Quickstart
We have recently covered an article where you will find a detailed guide to install Joomla Template and QuickStart Packages. Please click here to see in details.
Don't update extensions via Joomla's updater, because some of the extensions are "Pro" versions or "Advanced" versions and if you update them, you will downgrade extension to "free" version, with limited features. The Best example of that is SP Page Builder, "pro" version. If you update "automatically" using Joomla updater, you will downgrade it to "free" version. You probably don't have this license key from the developer.
There is an option where we can changes the styling choices like Background Shading, Text shading, Hover shading, Drop down menu shading. Change these styling options for desired design. Also, we have 4 different type of presets available for now, which can add varieties to our template.
Mega menu is a simple and easy to use tool for styling our menu's in different visuals. Provided screenshot below explains about different options we can select from to customize our menu.
Menu Type: There is three type of options present here Mega Menu & Off Canvas ,Mega Menu,and Off Canvas.
In basic setting, we have few thing important to take care off. We will go ahead and have look one by one. Before we move ahead with the documentation of our template JD Restaurant. Let's take a look what are the important features we cover here.
Here, we can have different option to present whether we want our header to be sticky meaning if we scroll down the header will scroll down along with the page.
Why use sticky header?
To provide better usability to the user. With sticky header, it's easy to navigate from one to another when you have a menu and the logo always on top of the screen.
We can manage the sticky header with one click. If we don't need (header) to scroll down with the page. There is an option in the backend where we can turn off/on the header with single a click.
A favicon is included in the header. Must be wondering what favicon is?
Favicon is a small icon on the top of every website basically found in the URL tab. It's associated with the website planned to be used when we bookmark our page.
How we replace default Joomla favicon. We need to upload ico, gif or png graphic file for it.
A boxed layout is a form of layout where we can set the boundaries for our main body or it is used to clearly define the main body. We can provide width to the template manually by using a custom width.
Wide layout (if No) is perfect for you, if you like airy websites, with no visible borders or page edges. A boxed layout (if Yes) is a form of layout where the boundary of the main body is clearly defined and you can choose to have the background be a custom image.
A page preloader can be anything an image or an icon. Page Preloader is a nice and skillful way to show loader before the page is loaded completely. This can be handy when your website is bulky or contains a lot of data for the customers even when you have everything optimized.
A Logo is a mark of graphic, emblem or symbol commonly used to distinguish our website from others.
- Logo type: We can represent the logo with an Image or Text.
- Module Position: Logo can be place on any available module position present.
- Logo: Select/Upload logo image for non-retina device. A Logo can be (PNG, GIF or JPG).
- Retina Logo: Upload a double size of your logo to keep look great of higher resolution devices like retina or 5k display.
- Mobile logo: This logo will be shown in mobile view instead of default logo. Leave blank if you do not want to show different logo for mobile devices.
Body Background Image
Body Background image is an option which allows us to set the background image for < main body > without adding any custom code CSS to it.
- Select image: (JPG, PNG, GIF) image format will be used as the background.
- Background Repeat: By default, a background image is none or no repeated and the image is placed at the top left corner. Options available No Repeat, Repeat All, Repeat Horizontally, Repeat Vertically, Inherit from default settings.
- Background Size: Set the size of the background image. Default value is cover - is means scale the background image to be as large as possible so that the background area is completely covered by the background image.
- Background Attachment: An option where we can set whether a background image attachment is fixed or scrolls
- Background Position: Sets the initial or starting position of a background image.
There is an extra feature we can add Social Icons can be localized anywhere on the template, also 12 icons can be linked to popular social media networks.One addition icon is the custom if we wish to add a custom link. we can mouse over to see the description or little steps describing how to add.
We can also add the contact information anywhere on the website depending on the module position we select from, which include a phone number and e-mail address.
JD Restaurant introduces a Coming Soon page which allows you to display a stylish page indicating that your site is either being worked on or under construction.
Error Page implies that asked for a page that does not exist. This could be on the grounds that client has entered the wrong URL or that the address that client have asked for references assets that have been moved.Another probability is if a site has moved a page or asset yet did as such without diverting the old URL to the new one, particularly after relocation. At the point when that happens, you'll get a 404 mistake as opposed to being consequently steered to the new page. Presently you can help a tiny bit more yours "lost" clients.
Also, you can add module using "404" position.
All you have to do is add a new module(s) and publish it on "404" position. It can be very useful because you can add their search module, menu or custom code module.
At this moment utilizing Google Font is significantly much simpler we additionally want to present an "Update Font List" feature. It enables us to revive the list Google text styles. So if there are any new ones, this catch enables you to update fonts with just one click and all new ones will be automatically added in the JD Restaurant template.
Typography settings enables you to pick font and its settings for extensive HTML tags: body, h1, h2, h3, h2, h5, h6 and navigation. All settings are from layout settings, so we have now a simple and productive approach to insert Google font to our site with a couple clicks of our mouse.
Custom font allows us to use custom Google font for selected CSS selector. We just need to turn on an option from font settings.
We can simply customize template built for Joomla 3.8 with our own custom code, for example, CSS, JS, meta tags, links and verification code by using the custom fields in that section of settings.
Before < / h e a d >
The Final result on front-end HTML5 code generated by browser engine. That line you can see on the image below was put by JD Restaurant engine before ending < / h e a d > section and before < b o d y > will start, it means it's fully W3C correctly solution.
Before < / b o d y >
Any code you place here will appear in the bottom of the body section of all pages of your site. This is useful if you need to input a tracking code for a state counter such as Google Analytics or Clicky.
This is useful if you need to input a tracking code for a statistics counter (such as Google Analytics(GA), Piwik, Woopra or Clicky. This tracking code will be available on every page of your Joomla 3.7 website.
You can use custom CSS to add your own styles or overwrite default CSS of a template or extension. This option is good small changes in the stylesheets. For more extensive changes (more than 10 lines of code) we suggest to using the custom.css file.
As you can see CSS code was added in Custom CSS section and what is more important is it works smoothly.
Note! Please do not edit the template.css, legacy.css any other CSS file from the JD Restaurant template. The reason being that all of your changes will be overwritten by template engine. Instead, we suggest using custom.css file where you can override the default CSS code.
This segment of 'JD Restaurant' settings enables us to lessen the size of loaded template files. By speeding up a template, we offer a superior better experience for our clients, enhance your page speed and make your CMS seem more steady and expert.
Compile LESS to CSS - JD Restaurant is developed with LESS system built-in. When customizing our site, we suggest working with LESS files. All our changes in the LESS files will be systematized into the final CSS files, located in our_root/templates/TEMPLATENAME/css folder. It will override previous changes.
Export/Import Template Settings
JD Restaurant also allows you to Export-Import its settings from “Advanced” tab. It means that you have to download generated text file (by clicking “Export Settings” button), then open in any text editor and paste inside Import field. It includes all basic settings of Template only!. If you're using Quickstart you don't have to do this, default settings are already there.
01. JD Restaurant Events
JD restaurant events allow you to publish event information on your website. The most important thing is that it will automatically display today's event in happening tab and upcoming event in upcoming tab. You just need to add your event information according to the dates.
02. JD Gallery Carousel
JD Gallery Carousel - This addon allows you to show carousel gallery. The most important thing of this addon is that you can add tabs and add images according to these tabs. Like if you want to show images for the different events, this is possible through this addon with just a few clicks.
03. JD Restaurant Menu
JD Restaurant Menu allows you to create a menu for your restaurant. You can show your menu in different categories like breakfast, lunch, and dinner etc. and show the in tabular form.
How to use additional social icons in K2
We not using default Social icons for blog posts. We are using AddThis icons. So if you want to use these icons, you first need to create an account as addthis.com and create your icons according to your needs and simply copy the code from there.
- Login into Joomla Administrator
- Components > K2 and click on Parameters button that is show on top right position.
- Paste your code inside the Social button code.
Layout - Module Positions
The following screen-shot highlights the default layout module positions that we used in current template. By using Layout builder in Helix3 users will be able to move positions or change their size in the grid. Our in-build layout builder from template settings provide the opportunity to add new positions, columns, rows wherever you need as much as moving elements.
These are the all available template module positions which you can use:
How to add Custom CSS File
- Go to template directory and find less folder and create a new file i.e(addition.less).
- Now, Open master.less file and simply import your addition less file i.e(@import 'addition';)
How to add Custom JS File
Google Map API
If you want to personalize Google map for your website, please follow our recent article here>
How to Export/Import Sample Data in Page Builder
By installing JD Ohio template you get all the Extensions and Plugins used in the template. Page Builder is also one of the many extensions and plugins that has been used to create this template. In this section I will guide you in Exporting and Importing Pages in Page Builder.
- Go to backend of joomla and in menu items section you will find Page Builder menu item.
- Click on the Page Builder menu you will get the dropdown of items related to Page Builder, click on the Pages in the list of dropdown.
Import and export both have the same steps to follow. With Import you can import your file in Page Builder while with Export you can export the pages that already have been created using Page Builder.
With JD Ohio template we ship all the sample data files into a zip file that has been created using Page Builder while creating JD Ohio template.
- Inside Page Builder. Click on NEW Button to Import the sample data file inside page builder.
- When you click the New Button it will take you to the interface where you can create a New Page or you can simply Import the sample data file. To Import the sample data file click on the Import button as shown in image and then follow the the steps as they appear on your screen and you are all done.
With this option you can Export all the page pages or even a section that have been created using Page Builder.
- To export a page in Page Builder click on the name of the page in the list of pages that you want to export.
- Inside that page click on the export button as shown in image below. Follow the steps as they appear on your screen and you will get a JSON file which will consist all the data of your page.
Need More Help?
If you couldn't find an answer for your question in this documentation, feel free to contact us. For technical support, you can contact us via forum here
We’re in UTC +05:30 (Indian Standard Time) and we aim to answer all questions within 8 hours in weekdays. In some cases, the waiting time can be extended to 24 hours. Support requests sent during weekends or public holidays will be processed on next Monday or the next business day.
Once again, thank you so much for purchasing this theme. As said at the beginning, we'd be glad to help you if you have any questions relating this theme.