“Vintage Kicks - OpenCart Theme” Documentation by “Heather Buchel” v1.0

“Vintage Kicks - Opencart Theme”

Created: 10/3/2010
By: Heather Buchel
Email: hbuchel@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. HTML Structure
  2. CSS Files and Structure / Fonts
  3. JavaScript
  4. PSD Files
  5. Setting up your Theme
  6. Displaying Tweets in the Footer Area
  7. Editing the Footer Area
  8. Sources and Credits

A) HTML Structure - top

"Vintage Kicks" is a three column, Opencart template. It has two side bars (#column_left and #column_right), and one main content area (#content). It also has a footer area, that you should personalize with details of your own store. Below is an image of the general structure of each page.

HTML Structure

B) CSS Files and Structure / Fonts - top

Vintage Kicks relies on two main CSS files located in its stylesheets folder. stylesheet.css includes all the basic stylings and structures for the theme, with comments to help you locate classes easier. The main navigation of this theme was built upon the Superfish menu, so you will also find a superfish.css stylesheet that includes all of the styles for the drop down menu. This was intended to be a jquery dropdown menu, but since the superfish.js file interferes with OpenCart's Add to Cart javascript file, it has been disabled and is purely a CSS menu until it can be remedied.

You will also a find a stylesheet for IE7 to fix a few quirks. This theme is not yet supported for IE6.

This theme makes use of the League Gothic font through the @font-face property.

C) JavaScript - top

This theme imports three Javascript files.

Besides the basic javascript files that OpenCart's default theme runs on, VintageKicks also imports a jquery.tweet.js file. This is to display the latest tweets from your Twitter Profile in the footer area.

D) PSD Files - top

I've included one layered psd with "Vintage Kicks". It has been organized into named folders so that you can find the appropriate parts of the page you might want to change.

PSD Layout

E) Setting up Your Theme - top

Product Images

Vintage Kicks looks best with nice, square product images. Though Opencart will resize your images to the settings you choose, it may add a white border around it to make up for any extra space needed to maintain the proper ratio.

Here are the settings I've chosen in my OpenCart admin which work best with Vintage Kick's structure.

Image Settings

F) Displaying Tweets in the Footer Area - top

Vintage Kicks uses Sea of Cloud's Tweets! jquery plugin to display your latest tweets in the middle footer area.

Open header.tpl (located in vintagekicks/template/common) in your favorite text/code editor. Use your editors find feature to locate "Twitter Plugin Scripts". This block of code looks like:

Twitter Plugin Settings

Replace the username "hbuchel" with your own username

You should edit the footer.tpl file to include your store's information. It has room for adding social media links, your latest tweets, and a small blurb about your store. The footer.tpl file is located in "vintagekicks/template/common/". Open this file in your favorite text/code editor. I've provided comments in the file so you know which parts you should or should not edit.

H) Sources and Credits - top

I've used the following images, icons or other files as listed.

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.

Heather Buchel

Go To Table of Contents