JV Venedor

Introduction

Venedor is a multipurpose, sophisticated, clean, responsive, retina ready Premium Joomla Template perfectly suited for business websites, e-shops, portfolios, corporate, blogs (includes one page parallax layout), photo, services and others.

Visit Our Support Forum

We only offer support for this template and its core features. We cannot guarantee our template will work properly with all third party plugins and server environments. If you plan on adding numerous third party extensions to Venedor then please note, We cannot facilitate support for any conflicts that might arise with this template's default functionality.

1. Features

Fully responsive

Multi Home Options

100% table-less design, HTML5 & CSS3

Bootstrap 3 integration

Joomla 3 support

RTL support

8 Preset colors

Full width, boxed, framed, rounded layouts

Powerful shopping cart Hikashop

Typography and various module variations

Mega Menu

Fonts icomon

Support Retina

2. JV and third party extensions supported

JV Slide Pro

JV Contact

JV Twitter

JV News Letter

JV Latest News

JV Portfolio

Hikashop

JV Ajax Search Hika

Acymailing

K2

References

This guide is not intended to cover everything you need to know to build a Joomla site. As you know, Joomla! and third party extension configuration knowledge is extremely wide, so you can refer following link to view more details:

Joomla FAQs

Video Tutorials

Joomla! Forum

Joomla! 3.x Installation guide

Joomla! default Modules

Technical requirements

Hikashop documentation

Menu management in Joomla 3.x

K2 Documentation

System requirements

1. Browser compatibility

Venedor was tested to be ready for seamless display on the following web browsers

Firefox 4+

IE (Internet Explorer) 8+

Google Chrome 14+

Opera 12+

Safari 5+

2. Joomla 3 requirements

3. Development requirement

We recommend you using Localhost for development process. The following servers are preferred:

Windows:

WAMP

XAMPP for windows

Linux:

LAMP Buddle

XAMPP for Linux

Installation

1. Quickstart Installation

Choosing quickstart package to install helps you quickly create an entire Joomla site which includes Joomla! CSM, Venedor template, extensions, sample articles, default Joomla! modules.

After finishing this quickstart installation, you only need to edit or add text, logo, product images and information, menu, new articles... in the back-end administrative area.

To install quickstart package, take the followings steps:

✔ STEP 1: EXTRACT QUICKSTART PACKAGE:

The first step you need to do is locate the quickstart package zip file and extract extract it to a folder, which contains all necessary files for installation.

✔ STEP 2: UPLOAD FOLDER TO YOUR SEVER:

- If you install Venedor on your localhost for testing or development: just copy the folder to …\xampp\htdocs (If you are using XAMPP) or….\wamp\www (If you are using WAMP)

- If you install Venedor on your actual server:

You can upload files via FTP using a client application like Filezilla or via cPanel -> File Manager -> Upload file(s).

If you want your Joomla! to be the main installation on your account and to be accessed through your main domain (i.e. www.yourdomain.com), you need to upload the extracted files to your public_html folder. (Though some host severs have a different structure, in most cases, the root folder is "public_html."). However, you can always create a sub-folder (i.e. public_html/all-in-one) if you want to run installation through www.yourdomain.com/all-in-one

✔ STEP 3: CREATE DATABSE FOR YOUR JOOMLA SITE

Now, you need to create a Database name and a user account (username and password) to it with full permissions to control database. Once you created your Database and User, make sure you remember the database name, database username and password you've just created, because they will be used in installation process.

While you are uploading the files to your server, it is time to create your MySQL database. The database is where your Joomla! files and images for your site are stored. You need to login to your hosting account cPanel to create your database. Normally you would use phpMyAdmin to create the database. Be sure to save your information from your database because you will need it when you install Joomla!

✔ STEP 4: RUN INSTALLATION

Now it's time to start with the installation process. If you have uploaded installation files in your root directory you just need to go to http://yourdomain.com or subdomain (i.e http://yourdomain.com/allinon) in your browser and get started.

You will see the first screen where you enter necessary information:

- Site Name: Enter the your site's name. This for the first heading of your index.

- Description: Enter a short description of your website.

- Admin Email: Enter a valid email address for system messages and password recovery.

- Admin Username: Enter admin username.

- Admin Password: Enter a password.

-Site Offline: Select whether your site should be taken offline after installation process is completed.

Click "Next" to continue the installation process.

The next screen you will see is about Database Configuration:

- Database Type: By default this value is set to MySQLi, but you can select MySQL

- Host Name: Leave the default localhost value.

- Username: Enter the database username, which you created in step 3.

- Password: Enter the password for the database username, which you created in step 3.

- Database Name: Enter the database name, which you created in step 3.

- Table Prefix: This is used to add to all of database tables. If you want to host many Joomla sites on a single database. You should leave the default value.

- Old Database Process: If you have any existing databases. You can select "remove" or "backup" any existing data. You should leave this option "Backup" since it is the safest choice

Click "Next" to proceed installation.

The next screen you will see is "Overview". In the first part, you can specify if you want install sample data on your server. We recommend you to choose the Default Sample data option, which helps build your actual website cloning Venedor Demo.The second part of the page will show you all pre-installation checks.

Click "Install" to start the real Joomla installation.

In the next screen, you will see Joomla Web Installer is installing....

On the last screen of the installation process you need to press Remove installation folder button or you can rename the installation folder. Note that you can't use your site unless you remove this folder completely!

2. Install Venedor on your existing Joomla site

Another way to build Venedor is installing each separate part: JV Framework 3.3, Venedor template, Extensions, and then add new default Joomla! and custom HTML modules to your site.

Note: please view the next section to know how to configure the default Joomla! and custom HTML modules.

To install Venedor template on your Joomla, take the following steps:

✔ Step 1: Install JV Framework 3.3 component by selecting Extensions >> Extension Manager, browse JV Framework 3.2 zip package and click upload and install as shown in the picture below:

✔ Step 2: By the same way, install Venedor template and other extensions on your Joomla!

Please view the following guide to know how to install new extensions (template, components, module, plugin) on your current Joomla site.

✔ Step 3 Once you have Venedor Template installed. Go to Extensions >> Template Manager, set Venedor as default for front-end

Template Customization

You can manage the template by Navigating to Extensions >> Template Manager

Click on the name of the template in the Style column to edit style with our powerful JV Framework 3.3

Click on the name of the template in the Template column to edit core files

Styles column refers to changing the available parameters of a template, such as color, font-color, logo, etc. These are dependent on the parameters a template maker made available and are a convenience for quick changes. Template - column refers to editing the actual template files.

1. Edit Style via JV Framework 3.3

Accessing to Edit Style you can edit Venedor style with JV Framework. This area includes 10 tabs: Overview, Global, Google Fonts, Style, Megamenu, Grid Layout, Extension, Custom JS, Related Article, Assign. Scrolling Effect You can reset all settings to default by click on"Reset to default" in the top right corner. Now we will go to each tab to find out more

1.1. OVERVIEW:

This tab contains general information of JV Framework 3.3 and the template .

1.2. GLOBAL

This tab contains a collection of general parameters that affect the entire site.

The sets of parameters that can be found in this tab are:

- Layout: Select layout for the template ( default/Left-Right-Main/Main-Left-Right/Mobile).

- Logo Setting: choose logo type (images/type). You can upload your own logo, add Logo text, slogan

- Direction RTL: enable/disable RTL mode

- Layout Mobiles: Allow you to select the type of layout that will be used when accessed from a mobile device

- Full HD: Enable/disable Full HD mode.

- Cache: This is where you enable/disable the cache function for JV Framework’s extensions or clear the cache.

- Compression: Allow you to optimize the site performance by utilizing various types of compression.

- Go to top: Enable/disable Go to top button

- Copyright: Allow you to enable/disable and modify copyright information.

1.3. GOOGLE FONT

In this tab, you can easily apply google font to your contents.

Click add, the choose a font type, then assign the font type to heading or paragraph tags as you can see below:

1.4. STYLE

This tab allows you to edit template color

- Module color: you can select whether to show 4 preset colors in specific for front-end user to choose (you should turn it off this mode because you should be the only one to preset the entire theme color)

- Theme color: simply select a theme color

- Custom color: enable/disable custom theme color mode

- Custom theme color:

If enabled, you can easily add your own color to classes, ids, heading, paragraph... Simply edit colors with color box and assign selector: background or border or color. You can also edit classes, ids... in the Custom Css box

Click "on add new Custom color" to add and style new classes, ids...

1.5. MEGA MENU

This tab allows the user to configure the Megamenus and their sub-menus used in Venedor, as well as the menu responsive

Let's view the Megamenu in front-end:

1.6. GRID LAYOUT

This tab allows you to adjust the size ratio of the grid layout.

1.7. EXTENSION

This tabs contains several sets of parameters that enhance or support the Framework .

- Date: enable/disable the date indicator, as well as configure it.

- Font Resizer: enable/disable the font resizer.

- Google Analytics: enable/disable Google Analytic.

- Yahoo Analytics: enable/disable Yahoo Analytic.

- Lazy Loading: enable/disable lazy loading mode.

1.8. CUSTOM JS

This is where you can add custom JS to certain part of the site using class or id.

1.9. RELATED ARTICLE

This tab allows you to configure the Related Article features (show related article underneath the one being read).

1.10. ASSIGN

If this style is not the default one, this is where you can assign which page will utilize this style instead of the default style.

1.11. Scrolling effect

This is the new feature added in JV Framework 3.3, with this tab, you can create scroll effect for each page. Each element will appear within its relative distance from the perspective of the visitor. Simply add selectors and config parameters.

2. Edit core files

Click any file and you'll be able to edit it directly in the browser.

JV EXTENSION CONFIGURATION

1. Jv Ajax Search Pro

Module position: jvajaxsearch

Menu assignment: On all pages

View backend setting:

The module in frontend:

2. Jv Ajax Shop Search

- Module position: vm-filter

- Menu assignment: Main Menu >> Shop >> Category with sidebar.

View backend setting:

- The module in frontend:

3. Jv Contact

3.1 Module contact us:

- Module position: bottom-fullsite

- Menu assignment: Main menu >> Home >> Yellow

- View backend setting:

<img="http://joomlavi.com/images/temp-document/jv-venedor/contactus-backend.png" alt="" />

- The module in frontend:

3.2 Module contact us 2:

- Module position: full-site

- Menu assignment: Main menu >> Contact >> Contact us 2

View backend setting:

- The module in frontend:

3.3 Module contact us 3:

- Module position: top-1

- Menu assignment: Main Menu >> Contact >> Contact us 01.

View backend setting:

The module in frontend:

4. Jv Demo Module

-Module position: demo

- Menu assignment: On all pages

-View backend setting:

- The module in frontend:

5. JV latest news:

View backend setting:

5.1 Welcome to Venedor:

- Module position: bottom-fullsite

- Menu assignment: Main menu >> About us

- View backend setting:

- The module in frontend:

5.2 Latest News:

- Module position: content-top

- Menu assignment: Main Menu >> Home >> Green Home Page

View Backend Setting:

The module in frontend:

6. Login Module:

6.1 JV Login Module:

-Module position: Panel-2

-Menu assignment: On all pages

View Backend setting:

- The module in frontend:

6.2 JV Register

- Module position: panel-2

-Menu assignment: On all pages

- View Backend setting:

- The module in frontend:

7. JV Twitter Module

- Module position: bottom-fullsite

- Menu assignment: On all pages

- View backend setting:

- The module in frontend:

<div class="row">

<div class="col-md-4 col-sm-4"></div>

<div class="col-md-4 col-sm-4"></div>

<div class="col-md-4 col-sm-4"></div>

</div>

<div class="custom">

<p><img src="/images/vendor/logo_banner.png" alt="" /></p>

<p>Venedor works as international construction services company and is a leading builder in diverse and numerous market segments.</p>

</div>

<p class="company"><strong>VENEDOR LTD</strong></p>

<p class="country">United Kingdom</p>

<p class="locality">Greater London</p>

<p class="region">London 02587</p>

<p class="street">Oxford Street 48/188</p>

<p class="working-days">Working Days: Mon. - Sun.</p>

<p class="working-hours">Working Hours: 9.00AM - 8.00PM</p>

<div role="tabpanel">

<ul class="nav nav-0tabs">

<li role="presentation" class="active"><a href="#lastest" aria-controls="lastest" role="tab" data-toggle="tab">Latest</a></li>

<li role="presentation"><a href="#feature" aria-controls="feature" role="tab" data-toggle="tab">Feature</a></li>

<li role="presentation"><a href="#bestsales" aria-controls="bestsales" role="tab" data-toggle="tab">Best sales</a></li>

<li role="presentation"><a href="#special" aria-controls="special" role=" tab=" data-toggle="tab">Special</a></li>>/ul>


<div class="tab-content">

<div role="tabpanel" class="tab-pane fade in active" id="lastest">{module Our Products - Lastest|showtitle=1}</div>

<div role="tabpanel" class="tab-pane fade" id="feature">{module Our Products - Feature|showtitle=1}</div>

<div role="tabpanel" class="tab-pane fade" id="bestsales">{module Our Products - Best Sales|showtitle=1}</div>

<div role="tabpanel" class="tab-pane fade" id="special">{module Our Product - Special|showtitle=1}</div>

</div>

</div>

<h2>LOOKBOOK</h2>

<h3>Spring-Summer 2014</h3>

<p>Praesent arcu urna, cursus sit amet condimentum id, dapibusmauris.
 Sed ante massa pellentesque luctus, magna.</p>

<p><a class="btn btn-default" href="#">Take Look</a></p>

<p>Save your money and time with our store. Here’s the best part of our impressive assortment.</p>
<div> <ul class="nav nav-tabs">
 <li class="active"><a href="#lastest" data-toggle="tab">Latest</a></li>
 <li><a href="#feature" data-toggle="tab">Feature</a></li>
 <li><a href="#bestsales" data-toggle="tab">Best sales</a></li>
 <li><a href="#special" data-toggle="tab">Special</a></li>
 </ul>
  <div class="tab-content">
 <div id="lastest" class="tab-pane fade in active">{module Our Products - Lastest|showtitle=1}</div>
 <div id="feature" class="tab-pane fade">{module Our Products - Feature|showtitle=1}</div>
 <div id="bestsales" class="tab-pane fade">{module Our Products - Best Sales|showtitle=1}</div>
 <div id="special" class="tab-pane fade">{module Our Product - Special|showtitle=1}</div>
 </div>
 </div></div>

<div class="row">

<div class="col-lg-7 col-md-7 col-xs-12 col-sm-12">

<p>Venedor is a fully responsive Magento theme with advanced admin module. Based on Bootstrap’s 12 column 1200px responsive grid Theme. Great looks on desktops, tablets and mobiles.</p>

<p>Venedor is extremely customizable, easy to use and fully responsive. Suitable for every type of store. Great as a starting point for your custom projects. This theme includes several extensions including ajax price slider that will help you improve your sales. We supply a full help with our products and after purchase support to all our customers. <a href="#">Buy Venedor Theme!</a></p>

</div>

<div class="col-lg-5 col-md-5 col-xs-12 col-sm-12"><img src="/images/vendor/welcome_01.png" alt="" /></div>
</div>

<p>Copyright 2015 <a href="http://joomlavi.com">Joomlavi.com</a>. All rights reserved.</p>

<p></p>

<div class="clearfix masonry-col-12">

<div class="grid-item grid-1-8">

<div class="grid-item grid-1-12">

<div class="grid-item grid-1-7">

<div class="grid-item-wrapper grid-item-margin-bottom"><a href="#" target="_self "><img src="/images/vendor/feature/arrivals.jpg" alt=" " /></a>

<div class="grid-item-content">

<div class="grid-item-block">

<h3>New arrivals</h3>

<div class="des">Women automn-winter 2014</div>

<a href="#" class="btn btn-primary">Take look</a></div>

</div>

</div>

</div>

<div class="grid-item grid-1-5">

<div class="grid-item-wrapper grid-item-margin-left grid-item-margin-bottom"><a href="#" target="_self"><img src="/images/vendor/feature/sale.png" alt=" " /></a></div>

</div>

</div>

<div class="grid-item grid-1-12">

<div class="grid-item-wrapper grid-item-margin-bottom">

<div style="position: relative;"><a href="#" target="_self "><img src="/images/vendor/feature/ship.jpg" alt=" " /></a>

<div class="grid-item-content">

<div class="grid-item-block"><a href="#" class="customlink"> <span>free Shipping on orders over $100</span> </a></div>

</div>

</div>

</div>

</div>

</div>

<div class="grid-item grid-1-4">

<div class="grid-item-wrapper grid-item-margin-left grid-item-margin-bottom">

<ul class="owl-lookbook ">

<li><a href="#" target="_self "><img src="/images/vendor/feature/lookbook.jpg" alt=" " /></a></li>

<li><a href="#" target="_self "><img src="/images/vendor/feature/lookbook_1.jpg" alt=" " /></a></li>

<li><a href="#" target="_self "><img src="/images/vendor/feature/lookbook_2.jpg" alt=" " /></a></li>

</ul>

<div class="grid-item-content">

<div class="grid-item-block">

<h3>Lookbook</h3>

<div class="des">Spring-Summer 2014</div>

<div class="content">Praesent arcu urna, cursus sit amet condimentum id, dapibus mauris. Sed ante massa pellentesque luctus, magna.</div>

<a href="#" class="btn btn-primary">Shop now</a></div>

</div>

</div>

</div>

</div>

<script type="text/javascript ">// <![CDATA[
jQuery(document).ready(function($) {
        $(".owl-lookbook ").owlCarousel({
            pagination: true,
            navigation: false,
            navigationText: false,
            singleItem: true,
            items: 1,
            //transitionStyle : "fade ",
            autoPlay: 5000
        });
    })
    /* ]]> */
// ]]></script>

<div class="row">

<div class="col-md-4">

<div class="masonry-col-2-wrapper">

<h3 class="title-module"><span>Shop category</span></h3>

<div>In auctor tellus erat, commodo fringilla felis euismod. Auultricies tempus posuere. Fusce augue diam, malesuada eget porta vel, ermentum congue mi. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per nulla himenaeos vel. Aenean ac diam imperdiet, mollis metus egestas, scelerisque augue. Integer nulla ligula, tempus mattis porta quis, ultrices vitae dui.</div>

<div class="owl-controls owl-controls-masonry">

<div class="owl-buttons">

<div class="owl-prev owl-masonry-prev"><i class="fa fa-angle-left"></i></div>
<div class="owl-next owl-masonry-next"><i class="fa fa-angle-right"></i></div>

</div>

</div>

</div>

</div>

>div class="col-md-8"></div>

</div>

<p>Save your money and time with our store. Here’s the best part of our impressive assortment.</p>

<div role="tabpanel"><!-- Nav tabs -->

<ul class="nav nav-tabs">

<li role="presentation" class="active"><a href="#lastest" aria-controls="lastest" role="tab" data-toggle="tab">Latest</a></li>
<li role="presentation"><a href="#feature" aria-controls="feature" role="tab" data-toggle="tab">Feature</a></li>

<li role="presentation"><a href="#bestsales" aria-controls="bestsales" role="tab" data-toggle="tab">Best sales</a></li>

<li role="presentation"><a href="#special" aria-controls="special" role=" tab=" data-toggle="tab">Special</a></li>

</ul>

<!-- Tab panes -->

<div class="tab-content">

>div role="tabpanel" class="tab-pane fade in active" id="lastest">{module Our Products - Lastest|showtitle=1}</div>

<div role="tabpanel" class="tab-pane fade" id="feature">{module Our Products - Feature|showtitle=1}</div>

<div role="tabpanel" class="tab-pane fade" id="bestsales">{module Our Products - Best Sales|showtitle=1}</div>

<div role="tabpanel" class="tab-pane fade" id="special">{module Our Product - Special|showtitle=1}</div>

</div>

</div>

<a href="/index.php"><img src="/images/vendor/logo.png" alt="" /></a></p>

<div class="row">

<div class="col-md-3"></div>

<div class="col-md-9">

<div class="panel-cart-extrainfo">

<div class="clearfix">

<ul>

<li>

<div class="extra-info--block"><span><i class=" glyphicon  fa fa-skype"></i> +(404) 158 14 25 78</span>

<span><i class=" glyphicon  fa fa-envelope"></i>+(404) 851 21 48 15</span></div>

</li>

<li>

<div class="extra-info--block"><span><i class=" glyphicon  fa fa-skype"></i> venedor_support</span> <span><i class=" glyphicon  fa fa-envelope"></i>This email address is being protected from spambots. You need JavaScript enabled to view it.</span></div>

</li>

</ul>

</div>

</div>

<div class="panel-cart-search"></div>

</div>

</div>

.scroll-to-fixed-fixed #logo img {
  max-height: 55px;
  -webkit-transition: all 0.2s ease;
  -moz-transition: all 0.2s ease;
  transition: all 0.2s ease;
}