1. Start
  2. Installation
  3. Theme Options
  4. Demo settings
  5. VQMod Extenstion
  6. Default modules
  7. Sources & Credits
  8. Support

Dilecta

Resposive OpenCart Theme


Hi, Thank you for buying our theme. If you have any question please contact me via contact form on themeforest profile. I usually give you answer in max 72 hours. Thanks,

Installation


Before you install Cleve, make sure you have the correct version of OpenCart installed.
We recommend installation on a clean, unmodified version of OpenCart.

How to install OpenCart? Check here

This theme doesn't overwrite any core files but is a good way to backup your files before making any upgrades or changes.


 1. VQMod Installation

Cleve use VQMod for few additional settings and modules like 3rd line of categories or customFooter. If you want to use this extensions you need to install VQMod before uploading vqmod folder.
 
VQMod is available here: http://code.google.com/p/vqmod/
 

Full list of extenstion for VQMod:

 
More about extensions here: VQMod extensions
 

2. Upload theme files

If you Transmit or CyberDuck for Mac you need to know that these programs overwrite all folders, not files. So you need to synchronize. Best way is to use FileZilla

In download package there are 4 folders:

  • Documentation
  • Files to Upload
  • Preview
  • PSD
  • and Changelog.html for future changes.

Go into Files to Upload Folder. You find there another folder with version of OpenCart. Find your version of OpenCart and open folder. Inside you should find 4 folders:

  • Admin
  • Catalog
  • Image
  • Vqmod

This folders tou need to upload to your server.
We recommend to use FileZilla. You just need to drag and drop files to your OpenCart root folder:

You will be asked if you want to overwrite filemanager.php from your current installation. Overwrite it if you want to upload bigger images than 300KB.


3. Theme activation.

Go to OpenCart admin panel and activate the theme: System › Settings › Edit Store settings › Store tab › Template dropdown

 


4. Images size

With this theme you can set your own images size from admin panel. You don't need to edit CSS files.

If you wan to change them go to OpenCart admin panel and set image size in: System › Settings › Edit Store settings › Image tab

For the best look we recommend size in demo admin panel.

 


 

 

 

 

 

 

 

 

.

Theme Options


This theme have 3 custom modules in admin panel:

 


Dilecta Theme Options

General

General Settings

 

Functions

Here you can disable or enable some elements of this theme.
Product scroll - Here you can choose which module should be scrolled:
 

Design

Font

In this module, you can change the fonts and sizes. From individual fonts as product name to the entire text body.

Colors

Choose one of the available colors that best suits you. In addition, match it to yourself even more by changing the colors of smallest elements of design.

Footer

Write a few words about your company, add the phones, emails contact. If this is not enough for you, you can show your twitter tweets and add your facebook profile. Of course everything is Multilingual

Payment

If you want to, your customers see how they can pay for their purchases simply add the icons in the payment section.

Custom Code

If you need to edit the template using CSS or Javascript, you do not have to look and edit files. Custom Code module allows you to do it from the admin panel.

Custom Menu

Additional items on the menu is now not a problem. Specify a name and add your link. Done!

Example:

Result:

 

Custom Block

This special module with which you can add additional interesting information on the product.

Sample code for this module:

<h3>Custom Block</h3>
    
<p><strong>Returns</strong><br />You can return the product within 14 days of purchase.</p>
<p><strong>Quaranty</strong><br />2 Years for all products</p>
<p><img src="catalog/view/theme/dilecta/img/custom-block.png" alt="" /></p>
h3 - Headlines
p - default paragraph
br / -  you can use this tah if you want start text from new line
img src - default image tag
 

Result:

 

Dilecta Resposive banners

Additional module that allows you to add custom banners for each language.
Banners are resposive for min 940px content width.

How to set the banners:

  1. In the General options, select the location where you want to display.
  2. Add a new banner.
  3. Upload image and select width from selector grid.
.grid-1 { width:75px
.grid-2 { width:170px
.grid-3 { width:265px
.grid-4 { width:360px
.grid-5 { width:455px
.grid-6 { width:550px
.grid-7 { width:645px
.grid-8 { width:740px
.grid-9 { width:835px
.grid-10 { width:930px
.grid-11 { width:1025px
.grid-12 { width:1120px
 

Dilecta Slider

With this module you can create awesome responsible sliders.

How to set sliders:

  1. In general options set Height, Slider speed and Layout type for all sliders
  2. Than go to slider 1 and upload image select transition effect and add your link.
Now you have you own image slider. You can add text on this image also but if you want some special effect like in demo version you need to add elemnts to the slider. Each new text must but on different layer if you want to add them different effects.

Settings description:

Style - text style. We prepared for you few text style:
 
 
Easing - special easing effect of the animation.
Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce
 
Endeasing - special endeasing effect of the animation.
Options:
easeOutBack, easeInQuad, easeOutQuad, easeInOutQuad, easeInCubic, easeOutCubic
easeInOutCubic, easeInQuart, easeOutQuart, easeInOutQuart, easeInQuint
easeOutQuint, easeInOutQuint, easeInSine, easeOutSine, easeInOutSine
easeInExpo, easeOutExpo, easeInOutExpo, easeInCirc, easeOutCirc, easeInOutCirc
easeInElastic, easeOutElastic, easeInOutElastic, easeInBack, easeOutBack, easeInOutBack
easeInBounce, easeOutBounce, easeInOutBounce
 
Text / html - Her you can put your own text
 
Speed - Animation speed
 
Start - Animation start time
 
X, Y - Text position
 
Our settings you can log in demo admin panel.

 

 

 

 

 

 

 

 

.

Demo settings


If you want to have exactly the same store like our demo please log to demo admin panel and copy all settings from:
All images for banners and slidewhow are in: Catalog › View › Theme › Dilecta › Img
 

Demo admin panel

http://themes.jelliz.com/opencart/dilecta/demo/

 

 

 

 

 

 

 

 

.

VQMod Extenstion


Full list of extenstion for VQMod:

 

Add to wishlist and compare

Button add to wishlist and add to compare are showing hover hover on homepage.
 

Banners

Dilecta resposive banners module with special background and make it multilanguage.
 

Common Header

Custom Icons for Cart and Wishlist.
Custom login and create and account link.
Second subcategory to categories in top.
 

Custom Footer

Custom module with text block about us, contact details, twitter feed and facebook fanbox and make them multilanguage.
 

Product Category

Add second subcategory to categroy module.
Add images to refine search in one option.

Slider

Download languages and make dilecta slider multilanguage
 

 

 

 

 

 

 

 

 

.

Default modules


1. Banners

All images used in demo store (banners) are included in download package.
If you want to use them in you store you need to upload all of them to your store via filemanager in admine panel.

To do this please go to: Sysytem › Design › Banners. Click Insert, set your banner name and click Add banner.
Than set Title and Link and click Browse Files.
 
Now upload our files.

All files are in: Catalog › View › Theme › Dilecta › Img
Images for different color version are in appropriate folders.
 
When you upload all files and add all banners in: Sysytem › Design › Banners, go to Extensions › Modules and add here Banners and Slideshow.

 

 

 

 

 

 

 

 

.

Sources & Credits


Icon sweets 2: more
Slider Revolution Resposive jQuery Plugin: more
 
Images used and included is project was bought with Extended License
All images used to preview was bought for this project with regular license.

 

 

 

 

 

 

 

 

.

Support


One more thank you for buying our theme.
If you have any question please contact me via contact form on themeforest profile.

http://themeforest.net/user/tiquet

I usually give you answer in max 48 hours.


Thanks,
Tiquet