Vina CooKu

Created: 26 August 2016
Last Update: 26 August 2016

Clean, Simple VirtueMart Joomla Template

Demo Purchase Now

General

Vina CooKu - Clean, Simple VirtueMart Joomla Template

Vina CooKu - Clean, Simple VirtueMart Joomla Template for marketplace and online stores selling kitchen appliances, digital product or any kind of products. It comes with a lot of great features that would take you months to develop. It is fully responsive, it looks stunning on all types of screens and devices. Vina Cooku has been carefully crafted with the most potent premium plugins, including SP Page Builder Pro, VirtueMart 3.0.16, Joomla 3.6.2, Mega Menu Builder, Layout Builder and much more. Check it out!

We have a dedicated support center for all of your support needs. It includes our Documentation, Community Forum and an advanced Ticket System for any questions you have. We usually get back to you within 14-16 hours. (except holiday seasons which might take longer).

VG CooKu – Overview:

  • 4 Clean Layouts and unlimited color scheme.
  • Fully compatible with Joomla 3.6 and VirtueMart 3.0.16
  • Helix 3 Framework, Ultimate Layout Builder, Mega Menu, Offcanvas Menu ready.
  • Supports multi current, multi-language and RTL ready.
  • 5 Premium Extensions from VinaGecko ($50+ saved)
  • Advanced Typography based on Bootstrap 3.
  • Built With Less CSS and CSS & Javascript Compression ready.
  • Virtuemart Product Compare, VirtueMart Product Wishlist, VirtueMart One Page Checkout.
  • Supports Ajax Products Filter, Ajax VirtueMart Category Search.
  • Online Documentation – http://joomla.vinagecko.com/docs/?template=vina_cooku
  • Supports Chrome, Safari, Firefox, IE
  • Demo content included! (quickstart package)

Requirements



Joomla Requirements
  • Joomla! 3.x
Server Requirements
  • PHP 5.2.17+ (5.3+ recommended)
  • MySQL 3.23 (5+ recommended)
  • Apache 1.3 (2.2+ recommended)
  • mod_mysql
  • mod_xml
  • mod_zlib
Browser Requirements
  • Firefox 4+
  • Safari 5+
  • Google Chrome 10+
  • Opera 10+
  • Internet Explorer 8+

Free Support

All of our items come with free support, and we have an advanced ticket system to handle your requests. Support is limited to questions regarding the theme’s features or problems with the template. We are not able to provide support for code customizations or third-party plugins. If you need help with anything other than minor customizations of your template, we suggest enlisting the help of a developer.



How To Receive Free Support
  • Step 1Go to Ticket System, you will need your ThemeForest Purchase Code which can only be received after buying the template from Themeforest.net.
  • Step 2 – Click to Submit a ticket.
  • Step 3 – Follow these steps before you submit a support ticket.


How to find your ThemeForest Item Purchase Code

To find your licence key/purchase code you need to log into your ThemeForest account and go to your Downloads page.
Locate some of the Themes Kingdom themes you purchased in your Downloads list and click on the Download and next on the License Certificate & purchase code link in drop-down menu.
After you have downloaded the certificate you can open it in a text editor such as Notepad and copy the Item Purchase Code.

New Install

Important

After download UNZIP package from our website, you must extract it before install.

Install a Quickstart Pack in localhost

If you install the quickstart in your localhost, copy the extracted folder to: ...\wamp\www (if you are using WAMP) and ...\xampp\htdocs (in you are using XAMPP)

Start installation procedure:

After uploading is completed, open the browser and type your URL in the address bar:

STEP 1 : Pre-installation check

+ Make sure all your server settings are green click on Next

STEP 2 : Configure Database

  1. Database type: select the database type: MySQLi or MySQL.
  2. Hostname: enter your hostname in this field. In this example, we install in localhost so the hostname will be "localhost" but if you install from your hosting, you have to enter your hostname.
  3. Username: enter the username to access your host.
  4. Password: enter the password goes with the entered username to access your host.
  5. Database Name: paste the databse name that we created in.
  6. With existing tables: If the databse we enter here is an existing database, we can select to back-up or remove the old database.
  7. Database table name prefix: enter the table prefix the the database name.

+ After entering all required information , click on Next

STEP 3 : Site setup

  1. Site Name: Enter your site name to the field.
  2. Site e-mail address : The mail address where your site's emails will appear to be originating form.
  3. Site e-mail sender name : The name of the sender used for all emails sent out by your site.
  4. E-mail : Enter the e-mail address of the Super User. Make sure it's not used by another user on the site, otherwise your restored site will be broken!
  5. Password: enter the password for the admin account.
  6. Password (repeat): retype the admin password to confirm.

+ After entering all required information , click on Next

STEP 4 : Finished

Click to button Remove the installation directory

Visit your site's front-end

The installation process is complete, you can log in to the admin page to edit website

Install a Quickstart Pack from hosting

If you want to install the quickstart from your hosting, please upload all folders in the folder that you just extracted to the FTP Base folder (normally it is public_html)

Important

After uploading is completed, open the browser and type your URL in the address bar.

Start installation procedure:

Install Template

Important

Template require: Joomla v3.4 or later.

Install extensions require

Go to your Joomla administration and click on extensions then click on extension manager option which will lead you through a dialogue box for browsing the installed extensions from your computer.

Click on Browse button and select the Extension in the Extensions/ folder. Finally, click on upload & install. Your extension in installed now.

Please make sure you are installed all extension in the Extensions/ folder!

Note

With zip file, you can install directly. With download_link.txt, you must download extensions, then install

Install the template into website

So on such as Install extensions require , click on Browse button and select the template in the Template/ folder. Finally, click on upload & install.

You, however, need to activate it by going to extensions->template manager. Now select the template and click on Default.

Basic settings

Header

Sticky Header : Enable to get the header content area to stay visible at the top of the screen as you scroll through that content. Header tend to contain navigation and this may improve UX of website.
Favicon : Upload a 16px x 16px .png or .gif image that will be your favicon.

Boxed Layout

Enable this option for boxed layout.

The Logo feature controls the output of the template's main logo. You can set the logo type as Image or text type. You can also set the logo width and height.

If you select logo tyle as Image, you click the Select button to upload your 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.

You can also specify the logo text and logo slogan, if you select logo type as Text:

Here we use logo type : Image

Body Background

Footer

Social Icons

Contact Information

Coming Soon

Preset Options

Users can decorate their websites selecting 4 styles that Our Templates offers. It's too much easy now for coloring of the website from now!

With every preset system, you can edit : Background Color , Text Color, Major Color, Background New Label Color and Background Sale Label Color. The editing is very easy .

Layout Manager

Layout Manager allowing you to build flexible and beautiful layout based on module positions. Layout Builder is one of the unique features of Helix3 which allows anyone to customize the existing template in any shape without having any programming language! In the layout builder we used 6 columns. Those 6 columns covered the whole width of our layout. If you want to create 4 columns then have to use wider blocks for every column.

Using Layout Manager is easy to master, learn. Following icons legend should help you understand which icons are responsible for what feature/setting. We suggest to make a copy of current layout to keep it for later in case if you would delete all rows and you forget how they were placed at the beginning.

Each layout which you create can be saved and used later for example in template copy.

Column Settings
  • Make Component Area : Enable this option to make this column as a Component area. If you already selected component area for another column then unselect that one first then select this one. Joomla message section will also be loaded inside this column. Only one column in whole layout can be used for showing component (!).
  • Module Position : Select any suitable module position from the list. Do not set one module position to multiple position. Each such have unique name.
  • Hide on Mobile/Tablet/Desktop : Allows you to choose where this block should be displayed and where shouldn't be. For example some module position can be displayed only on deskop/laptops computer but not on smartphones nor tablets.
  • Custom CSS Class : If you wish to style particular content element differently, then use this field to add a class name and then refer to it in your css file.
Custom module above and below component

By default Helix3 do not allows you to add a new module above or below component area. In most cases Layout Manager allows you to add new rows and columns.

But with very small php/xml customizations you can add two new modules.

Small Code Customization

If you have any JoomShaper template or just Helix3 already installed, please edit those two files:

  • plugins/system/helix3/core/helix3.php
  • templates/TEMPLATE_NAME/templateDetails.xml

In first one (helix3.php): please find line 448 and do those changes (final code):

         $output .= '<jdoc:include type="message" />';
         $output .= '<jdoc:include type="modules" name="above" style="xhtml" />';
         $output .= '<jdoc:include type="component" />';
         $output .= '<jdoc:include type="modules" name="below" style="xhtml" />';

Now save changed file on your server.

In second file (templateDetails.xml): you have to add new positions as well. I suggest to choose line ~35.

     <position>above</position>
     <position>below</position>

Do not forget to save this edited file also. Those two changed files must be on server, not only on your local harddrive,
if you know what I mean.

That's all now you can use those two new: above and below module positions in Module Manager. 
Until it won't be included in new version of Helix3 framework you can use this temporary but 100% working solution.

How to hide on mobile

Unfortunately, those module position do not have any options in Helix3 Layout Manager. So to hide them in mobile (small device) view you have to use addcional module class suffix.
Please use:" hidden-xs hidden-sm"   - of course without (") !

Note

Do not forget to save column settings on popup window - save button is at the bottom, also general template must be saved after changes.

Menu system

Mega Menu is an easy to use menu tool for creating beautiful, customized menus for your site, also with modules inside. That also boosts SEO and user engagement. Here in template settings you have access to 4 options only, more advanced settings are "hidden" in Menu Manager inside each menu item - so please check also there.

Select Menu

It allows you to choose menu from available in your system. If you're planning to build multilingual site in Joomla 3.4 - you have to create clone of current template for each addcional language and choose here a Main Menu for each of them.

Menu Type

By default there are enabled two separate menus: Mega Menu and Off Canvas Menu. You can use both or only of of them - as you want or need.

Off Canvas is indeed a external menu module - so if you want to use this area you have to create a menu module, set it properly. Remember to choose "offcanvas" module position for them.

What is more important in this sidebar menu you can also publish not only menu modules but also for example Search module, it also have to had a "offcanvas" position chosen in Module Manager.

Dropdown Width

Dropdown Menu Width value would be to set it to the width of your submenu size content area. By default 240px.

Dropdown Animation

MegaMenu offer four transition options for your dropdown submenus:

  • Fade (default)
  • Zoom
  • Fade in Up
  • No Animation

This is the transition that occurs when the submenu is opened. To have the submenu appear with no transition, set this to None (No Animation).

Typography

Google Fonts Improved.

Right now using Google Font is much easier we also want to introduce a "Update Font List" feature. It allows you to refresh the list of available Google fonts. So if there are any new ones, this button allows you to quickly update fonts with just one click, and they will be automatically added in to Helix 3 Framework. Which allows you to use them quick. Subsets (like Latin Extended, Vietnamese are also no problem - just choose the character sets you want. Of course if they are available for selected font set. All settings are from template settings, so you have got now a simple and efficient way to embed Google fonts of your choosing to your website with a few clicks of your mouse.

Google has been supplying the community with a large collection of web-based fonts for quite a few years. One of unique Helix3 feature is Live Font Preview during choosing from list 670+ of available fonts. Integrating new & unique fonts into a Joomla website can improve the appearance, increases trust for your website.

Custom Code

You can easily customize Helix3 Framework built for Joomla 3.4 with your own custom code, for example: CSS, JS, metatags, links and verification code by using the custom fields in that section of settings.

Before Head

Any code you place here will appear in the head section of every page of your site. This is useful when you need to add verification code, javascript or css links to all pages. Check following example how you can use it.

Final result on front-end HTML5 code generated by browser engine. That line you can see on image below was put by Helix3 engine before ending </head> section and before <body> will start, it means it's fully W3C correctly solution.

You can use there any kinds of meta tags you want, also the refresh meta tag to redirect a page to a specific destination. Where is the best place to put JavaScript? If you want a script to execute early, before the page is displayed, then the HEAD section is a good place (it means use that field). Putting scripts into HEAD is a common and easy practice, but highly optimized sites use another method.

But remember all code you put here may harm your code quality or/and W3C verification tests, especially if it's not HTML5 compatible. You can also use this solution to add addcional js libraries. By the way, CSS styles must be declared in the HEAD according to the HTML standard. Only javascripts are allowed to be placed anywhere.

Before Body

Any code you place here will appear in bottom of body section of all pages of your site. For example javascript code can also be at the bottom of page body. In this case it executes after the page is shown.

This is useful if you need to input a tracking code for a statistics counter (web analytics) such as Google Analytics(GA), Piwik, Woopra or Clicky.  This tracking code will be available on every page of your Joomla 3.4 web site.

Custom CSS

This field allows you to custom CSS code directly into template code without using any external file link. Just paste your styles for class'es or ID's or HTML tags to override dafault style based on template.

We always recommend inspecting a web page with a tool like FireBug or the inspector built into Chrome/IE/Firefox browser when looking to customize CSS. When you inspect the code output directly with one of this tools it will show you exactly what CSS is affecting the HTML element you want to change. You can also test out what CSS changes will affect the element as well live in the browser.

As you can seen CSS code was added in header section of front-end code and what is more important is works smoothly.

Using Custom CSS gives you the power to create your unique design and allow you customize the appearance of selected elements (colors, size etc.). If this field is too small for your advanced changes you can use "hidden" feature. You don’t have to edit the template.css, legacy.css any other css file from the Helix3 (template framework). The reason being that if you edit the framework files then when you update the template you will lose all of your code, because all of your changes will then be overwritten by the new version of the files included in the update. Instead, our JoomShaper Framework (for Joomla 3.4) has options that allow you to use custom.css file that will override the default CSS code created by the our team.

So if you need custom code please create a new custom.css file in insert inside css folder of your current active Helix3 template.

An alternative solution is putting custom.css into the helix3 directory: templates/shaper_helix3/css/

If the custom file will be found in the above directory then it will be loaded and applied.

Note! custom.css file is loaded before custom css code from template settings, it means that second one may override everything, also that file with styles.

Custom JS

The procedure of adding JavaScript code is same as above mentioned adding CSS code.

Font Icons

+ Have you ever found yourself wanting to spice up the navigation menus on your site by adding icons? Typically, you’d have to edit the CSS or use default Joomla feature (which as we know is not perfect) but thanks to a new Helix 3, you don’t have to. The use of icons beside menu items is a fantastic alternative that favors a quick visual option identification; and even the use of icons without text to accompany is viable. An important current technique is the use of font icons (Font Awesome v4.3). It allows the total integration of the menu in a responsive web design thanks to the scalability and customization of vector icons. How much of them? We offers the complete set of 519 icons.

Advanced Options

You can configure "Cache Settings", "Compile LESS to CSS", .... at here.

Cache Settings

Compile LESS to CSS

Helix 3 is developed with LESS. When customize your site, we suggest you to work with LESS files. All your changes in the LESS files will be compiled into the final CSS files. It will override previus changes.

Popup Quick View Product Virtuemart and Blog

Goto Top

You can readmore about Helix3 config at here http://www.joomshaper.com/blog/helix3-revolutionary-template-framework-is-ready

Use Template

Page Builder

SP Page Builder is a full responsive component (J!3.x only) that allows you to easily create Joomla! pages, add them into menu and display with useful and cool effects inside. Whether you’re a beginner, web designer or developer building commercial sites for clients or a business owner managing and maintaining your own website, SP Builder’s flexibility and functionality means one thing: web content design made easy. It can be used for constructing unique-looking Pages. Take full control over your Joomla! 3.3+ site with our backend page builder extension.

You can readmore about Page Builder at here : http://www.joomshaper.com/documentation/joomla-extensions/sp-page-builder

MegaMenu Generator

Helix3 MegaMenu Generator

One of new features of Helix3 is new MegaMenu Generator. It can be used after first saving of menu item or in current menu items. But first check what you have it inside before that clicking.

  • Dropdown Position : allows you choose align (left/right) dropdown position.
  • Show Menu Title : allows you to hide menu item title, this may be useful when you want to show only icon instead full title like for Home position.
  • Menu Icon : the use of icons beside menu items is a fantastic alternative that favors a quick visual option identification; and even the use of icons without text to accompany is viable. You can use font icons based on Font Awesome v4.3, it means that you have big collection of 519 icons to choose from.
  • Custom CSS Class : allows you to add Custom CSS Class(es) to this menu item.
Adding module into menu

Once Menu item is saved you can check this tab again. You should notice a new advanced Helix MegaMenu Options. From here, you can select a module and drop inside this menu item as a submenu.

You can use module from list of published in Module Manager. It means that if you want to add a new one into menu, it must be listed there as a published, position name is not required to work.

Menu Layout Management

You can choose column layout, which allows you to set menu items in selected positions. To get this feature use "Manage Layout" option (blue button).

Using: Left, Center, Right and Full buttons you can control appearance of dropdown submenu.

Video Preview:

Homepage Layout

Demo Home Page 1


Demo Home Page 2


Demo Home Page 3


Demo Home Page 4


Slideshow setting

This is Unite Revolution Slider module.

  • Sideshow:

  • You can edit it easily through module

  • Choose Slider in Page Builder:

  • Slider not working after migrating site to new domain

    If you like to build your site locally or have moved your site to a new domain, chances are your slider’s image url’s need to be updated.

    You can always update your image url’s manually, but this can also be done by performing a global update using one of the slider’s built-in options. To do that, inside your slider’s main “Settings” page, scroll down to the “Import/Export” tab. Open up this tab, and toward the bottom you’ll see the “Replace Image Url’s” option. Enter your old domain into the first field, and your new domain into the second and click “Replace”.

You can read module's document here: http://unitecms.net/joomla-extensions/unite-revolution-slider-responsive/documentation

Menu Configuration

- You can change Main Menu by:

Step1: Go to your Joomla administration and click on Extensions then click on extension manager option.

Step2: Choose Template Default

Step3: Choose Main Menu

VirtueMart



Categories

Grid Layout : Grid layout is the default

List Layout : You can choose List Layout this by config in Menu

Note

You can set "List Layout" to default in Configure VirtueMart

Create Categories:

Step1

Step2

Step3

Step4

Default number of products in a row :

  • Way 1 : Administrator => VirtueMart => Configuration => Template => Default number of products in a row

  • Way 2 : Administrator => VirtueMart => Product Categories => Choose Category => Number of Products per Row

Show Children Category : Administrator => VirtueMart => Configuration => Template => Show Children Category

You can read more about VirtueMart Config at here: http://docs.virtuemart.net/.


Products

Create Products:

Step1

Step2

Step3

Products Options:
  • Product Infomation

  • Related : you must search products, then add them to the " Related Products "



Label (SALE and NEW)

SALE

NEW

You can configure label New in Template.



Image Zoom

Blogs

This area of settings allows you to enable some apperance elements (icons in posts) as much a social comments and social share buttons.

Blog Category

Blog Single

Show Type Post Icon(s)

Each Joomla article can have option to use Post formats it means use addcional illustration icon, which can show about what type of article (post) is that content.

Back-end :

Comments Settings

This build-in option adds IntenseDebate Comments system, Facebook comments and / or Disqus Comments to your site. All in one tool. You don't have to install any addcional plugin anymore to get this feature. Social allows your readers to log in via a preferred social network and add comment under article. All you have to do is choose and set correct Facebook Application ID, IntenseDebate Account or Disqus Username/Subdomain. Sorry, but right now you can use only one selected social comments system or disable it for all content.

However in cooku , we use JComments Components. You can disable JComments Components and use Comments of Helix3.

Go to your Joomla Administrator and click on Components then click on JComments option.

Setting

General

- Choose categories for JComments to work in. Categories in which commenting is allowed. For multiple selection hold down [Ctrl] + left-click. If no categories selected, commenting will be disabled.To disallow comments for a particular article (even if it is in an allowed category), insert the tag {jcomments off} inside the article text.To allow comments in a particular article (even if it is in a disallowed category or uncategorized), insert the tag {jcomments on} inside the article text.

You can read more at here : http://www.joomlatune.com/jcomments.html

Modules Popular

  • Top Menu

    + You can edit it easily through module is located "top2":

    + Menu Assignment:

  • Top Account

    + You can edit it easily through module is located "top3":

    + Menu Assignment:

  • Search

    + You can edit it easily through module is located "search":

    + Menu Assignment:

  • Cart

    + You can edit it easily through module is located "minicart":

    + Menu Assignment:

  • Brand

    + You can edit it easily through module is located "brand":

  • Newsletter

    + You can edit it easily through module is located "position1":

  • Bottom

    + You can edit it easily through module is located "bottom1 , bottom2 , bottom3 , bottom4":

    + Menu Assignment:

Advanced

Creating module positions

This tutorial tells us how to add a new row of module positions to the Helix Framework based template.

Step1: Open templateDetails.xml and scroll down to the "positions" tag where the default positions are listed. Under this option, we will need to add our "row module" positions as shown in the example below:

Step2: Eg, we add the module in module position below the Top .

How to Override CSS in our template?

You can override css by 2 ways below :


1. Use custom.css file => Follow the instructions

2. Use custom.less file :

- First you need to add file custom.less in to the directory: ROOT/templates/vina_cooku/less/

- Then you must include new css file to our template by follow : Open master.less file and add the following line of code to the end of file: "@import 'custom';"

- Now you can override css of we by add code css in to file custom.less

Why you should write your css in folder custom.less ?

You can edit css by edit in template management or modify in any other css files. But when you update the latest template from us, your css edited will lose. Our system file will overwrite all.

==> Therefore we advise you to write css in file custom.less for the template update does not affect the css great that you have created

Update Template

  • 1.Download the new cooku template ZIP file.
  • 2.Navigate to the Extension Manager in the Joomla Administrator as seen in the image below.

  • 3.Select Upload Package File.

  • 4.Select the ZIP file.

    (vina_template_v1.0.1.zip file located in the directory: vina_template_v1.0.1_UNZIP_FIRST\Template after unpacking)

  • 5.Click Upload and Install.

Once this is done, a notice should appear indicating that the template has been successfully updated.
At this point, you should be able to test your site for any issues and operate as normal.

How to set default Home Layout ?

Eg Set "Home Shop 1" to Default

Backup

Due to copyright issues, we had to exclude "Akeeba backup" in the quickstart. So when you use template please install "Akeeba backup".

Link at here : Download

Over 20000 customers use our templates!

Thank You

Once again, thank you so much for using this theme. If you have a more general question relating to the template, you might consider visiting the our forum: http://vinagecko.com/forum/ or send email to address: support@vinagecko.com