Dresscode Documentation by eTheme - 20 Script

### “Dresscode” Opencart Theme Documentation by “eTheme” v2.0.2.0

# “Dresscode”

Created: 18/03/2013
By: eTheme
Support: http://etheme.ticksy.com/ Email: etheme2@gmail.com

Thank you for purchasing my theme. If you have any questions that are beyond the scope of this help file, please feel free to email via my user page contact form here. Thanks so much!

## Table of Contents

1. Package structure
2. Install Instructions
3. Opencart configuration
   - Setup On Sale
   - Bestsellers
   - Deal of the day
   - Custom content for categories in Top Menu dropdown blocks, Product custom block, video on Product page
   - Mailchimp Newsletter box in the footer
   - Blog module: installation and settings
4. Theme settings
5. Slider
6. CSS framework
7. JavaScript
8. PSD files
9. Instructions how upgrade your site to vqmod version of Dresscode.
10. Sources and Credits

## Some useful articles

- About the most popular extensions and other useful info about OpenCart software you can read here:
  http://tonytemplates.com/blog/6-reasons-why-should-you-choose-opencart/
- About making your site SEO friendly you can read here:
  SEO friendly site
- Review of new OpenCart v.2.0.x you can read here
  New features of OpenCart v.2.0.x
- About arrangement of MultiStore in OpenCart you can read here
  MultiStore

P.S. Articles can be temporary unavailable which is caused by server work. So, if you can't see some article, please, try to see it a bit later.

### 1) Package structure - top

- old-versions - template files for old version of OpenCart: 1.5.4.1, 1.5.5.1, 1.5.6.4.
- version-2.0.3.1 - template files for latest v.2.0.3.1.
- documentation - documentation files for current package.
- psd - all layered psd sources.

### 2) Install Instructions - top

- Install vqmod if it isn't installed before (https://code.google.com/p/vqmod/).
- Step 1

  Warning! Before uploading theme files on a production environment, make sure you have tested it before on a development environment. Make sure to create a backup of your original files and database before uploading theme files.

  Note: Setup Binary transfer mode for you FTP client.
  For FileZilla go to Transfer -> Transfer type -> Binary.
  depending of your OpenCart version upload content of needed www-x.x.x.x folder
  for OpenCart v1.5.4.1 upload content of old-versions/www-1.5.4.1 folder from theme package to the root directory.
  for OpenCart v1.5.5.1 upload content of old-versions/www-1.5.5.1 folder from theme package to the root directory.
  for OpenCart v1.5.6.4 upload content of old-versions/www-1.5.6.4 folder from theme package to the root directory.
  for OpenCart v2.0.3.1 upload content of version-2.0.3.1/www folder from theme package to the root directory.
  Upload example for version 1.5.4.1
  You should have
- Step 2

  Warning! Please, keep in mind, all documentation below contains information about OpenCart v2.0.3.1.
  All updates will be done only for this version. Old version will not be updated more.

  go to System -> Settings -> Edit. Select the tab Store. And in the Template -> dropdown field choose dresscode. Save.

### 3) Opencart configuration - top

In the main page you see 'New Products', 'On Sale' tabs.

To Add/Delete On Sale Products

- Go to Catalog -> Products
- Select product and press Edit
- Select Special tab
- Fill Special Price
- Save changes
- Repeat for products you want to see in 'On Sale' tab

Bestsellers

You don't need to config this block. Products in this block will appear automatically when you get first order.

Tip: If you want to see products in 'Bestsellers' tab place order by yourself.

Deal of the day block To change product in this Module:

- Go to Extensions -> Modules
- Go to editing of Dresscode Theme Deal of the day Module > Home Page Module
- Delete product that occurs and enter new product name
- Save changes

Custom content for categories in Top Menu dropdown blocks, Product custom block, video on Product page

To edit custom block and video on a product page go to Extensions -> Modules -> Dresscode Theme Admin Panel -> Dresscode Theme Products Options Put your custom HTML to Content field.

To add custom blocks for categories in Top Menus go to Extensions -> Modules -> Dresscode Theme Admin Panel -> Dresscode Theme Categories Options

Mailchimp Newsletter box in the footer

To edit Newsletter box go to Extensions -> Modules -> Dresscode theme configuration options -> tab Social accounts -> NEWSLETTER SIGHUP block
There you will see link to documentation of Mailchimp.

Blog module.

Installation of the Blog.

Warning! We provide different Blog extensions for old versions of our theme and for v.2.0.3.1.
FREE blog is included only in the v.2.0.3.1!

1) Installation of Webby Blog extension for old versions

- Download block extension from the - default Blog extension
  Warning!
  We don't provide all files for using Webby Blog. We've done only skin of it according to our theme's design.
  If you want to use this module you must have default full Webby Blog extension.
  In our theme we've used and customized Blog extension of version Webby-Blog-Ver-3.0.
  So, if developers will update their extension (and you will see any errors on your site), you will need to update files to the latest version.
- Install the Blog module in Extensions -> Modules -> Webby Blog -> Install. All general information about blog management you can find in documentation of this blog developers.
- To see customized Blog like on our demo upload files from dresscode package (all files from the folder: old-versions\patch_for_blog_extension_v3.0\).
  But don't forget to upload these files ONLY after uploading files from Webby Blog extension, because we have included in the folder old-versions\patch_for_blog_extension_v3.0\ only changed files.
- To have access to all parts of the Blog do the same procedure like in default OpenCart template: admin -> System -> Users -> User Group -> Top Administrator -> Select All for all groups of permissions.

2) Installation of FREE Simple Blog extension for v.2.0.3.1

- Upload all content from folder version-2.0.3.1\patch_for_simple_blog_extension\ to your root directory.
- Refresh your site: ctrl+F5
- To have access to all parts of the Blog do the same procedure like in default OpenCart template: admin -> System -> Users -> User Group -> Administrator -> Select All for all groups of permissions.
- Go in admin: Extensions -> Modules -> Dresscode Theme Simple Blog, press install button in it.
- So, make settings and install Simple Blog to layout you need.

### 4) Theme Settings - top

To edit theme settings go to Extensions -> Modules -> Dresscode Theme Admin Panel. You will see three groups - General, Product labels and Social widgets

Theme Options.
Name | Values | Description
--- | --- | ---
Font | 410 Google web fonts | Select font which will be used for headings, buttons, block titles etc. Theme use google fonts library. Find out more here - Google web fonts free library

BG Pattern

- Pattern 1
- ...
- Pattern 8
- Without pattern

Choose one of 8 background patterns of all store pages or disable it.

Theme Color | Any web color in hexadecimal format (#e3e3e3) | Color used for buttons and backgrounds
Content bg Color | Any web color in hexadecimal format (#e3e3e3) | This color will be used for background of all store pages
Font Color | Any web color in hexadecimal format (#e3e3e3) | This color will be used for text

Tag Cloud

- enable
- disable

Turn on/off flash animated tag block

Image change onMouseOver in product listing

- Enable
- Disable

This option allows you to show one more image of product on mouse over in product listing. It's very useful for clothes stores, in listing you want to show front product image and back image on mouse over. The second uploaded image will be shown.

Add to cart "flying" visualization

- Enable
- Disable

This option allows you add to cart "flying" effect.

Responsibility switching

- Enable responsibility
- Disable responsibility

This option allows you to turn off/on responsibility of the theme. Maybe you will need for some reason make your site non-responsable.

Link Blog in Top menu

- Enable responsibility
- Disable responsibility

This option allows you to turn off/on Link Blog in Top menu. If you don't need this module to be installed you can turn off this link in Top menu.

If you want to edit text of this link go to the file: catalog/language/english/common/header.php

Product Label options.
Name | Values | Description
--- | --- | ---

Show "Sale" label

- Yes
- No

Show sale label on products

"Sale" label position

- Top Left
- Top Right
- Bottom Left
- Bottom Right

Label position

Show "New" label

- Yes
- No

Show new label on products

"New" label position

- Top Left
- Top Right
- Bottom Left
- Bottom Right

Label position

Social widgets options.
Name | Values | Description
--- | --- | ---
Twitter account | [account name] | account name for twitter block
Facebook profile name | [account id] | account id for facebook block

### 5) Slider - top

To manage slides - go to System -> Design -> Banners. Choose Top Slder.

Load left and right slides one by one (left, right, left, right etc.). You can add so much slides as you need.

Parameters
Name | Values | Description
--- | --- | ---
Title | Any text | Slide title
Link | [URL] | Slide link
Slide Image | [JPG, PNG or GIF image] | left image in slide. Recommended image size - 900 x 484
Remove | - | Slide remove button

### 6) CSS framework - top

This theme use Skeleton - css framework for responsive, mobile-eriendly development.

### 7) JavaScript - top

This theme use following Javascript files.

1. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
2. jCarousel is a jQuery plugin for controlling a list of items.
3. html5shiv - JavaScript shiv for IE to recognise and style the HTML5 elements.
4. mColorPicker - nice color picker.
5. cloud Zoom is a free jquery image zoom plugin.
6. Responsiveslides - simple & lightweight responsive slider plugin
7. Elastislide is a Responsive jQuery Carousel Plugin
8. Selectbox - jQuery select box
9. MegaMenu - jQuery MegaMenu Plugin
10. Tweet is a plugin to load tweets from the Twitter

### 8) PSD Files - top

I've included 3 PSDs with this theme:

1. Main layout - DRESSCODE_1200.psd
2. Products Listing - DRESSCODE_1200_listing.psd
3. Product Page - DRESSCODE_1200_product.psd

All psd files are sliced and you can find any image according your needs.

All the layers inside of the psd are grouped in few folders. You can easily specify/find any element of the design.

If you would like to view and edit layers of the dark version you should update them in the correspondent group.

IMPORTANT
Images used in preview are not included in theme.
You can purchase them separately from Bigstockimages:

http://www.bigstockphoto.com/image-12123992/stock-photo-attractive-couple
http://www.bigstockphoto.com/image-12126692/stock-photo-fashionable-lady-wearing-sunglasses-with-helicopter-in-the-background
http://www.bigstockphoto.com/image-12127673/stock-photo-handsome-man-with-bag
http://www.bigstockphoto.com/image-12127562/stock-photo-attractive-blond-beauty
http://www.bigstockphoto.com/image-12127631/stock-photo-fashionable-couple-over-alpine-mountains

### 9) Instructions how upgrade your site with older version of Dresscode theme to vqmod version of Dresscode - top

If you have firstly installed our theme you don't need to follow this procedure.
Our theme is done in vqmod version in order to not rewrite core files. All changed by vqmod files will be stored in vqmod cash folder. So, if you need to delete them, you can disable vqmod or delete xml file of our theme's changes (this file is vqmod/xml/dresscode_vqmod.xml).
If you use previous version of our theme some of your core files are changed on your site, so, you need to upload default OpenCart files again. We've prepared folders with these default files and you can simply upload all content from one of them to your site.
So, your procedure has to be done in such order:

- Backup all your files and database before any changes making.
- Upload all content from one of folders: vqmod-patch-v1.5.4.1, vqmod-patch-v1.5.5.1, vqmod-patch-v1.5.6 accordingly to version of your default OpenCart.
- Install vqmod if it isn't installed before (https://code.google.com/p/vqmod/).
- Upload files from one of main folders of our theme: www-1.5.4.1, www-1.5.5.1, www-1.5.6.
- Make your changes in css files or template files (if you've made them before updating of our theme).

After all files uploading upload our package

### 10) Sources and Credits - top

This theme use following files.

1. Skeleton - css framework for responsive, mobile-eriendly development.
2. jQuery is a Javascript library that greatly reduces the amount of code that you must write.
3. jCarousel is a jQuery plugin for controlling a list of items.
4. html5shiv - JavaScript shiv for IE to recognise and style the HTML5 elements.
5. mColorPicker - nice color picker.
6. cloud Zoom is a free jquery image zoom plugin.
7. Responsiveslides - simple & lightweight responsive slider plugin
8. Elastislide is a Responsive jQuery Carousel Plugin
9. Selectbox - jQuery select box
10. Tweet is a plugin to load tweets from the Twitter
11. Cloud Zoom Pro - Magento Extension

Once again, thank you so much for purchasing this theme. As I said at the beginning, I'd be glad to help you if you have any questions relating to this theme. No guarantees, but I'll do my best to assist. If you have a more general question relating to the themes on ThemeForest, you might consider visiting the forums and asking your question in the "Item Discussion" section.

eTheme

Go To Table of Contents