Oceanic Store - Responsive Oceanic Theme

• Created: 05/28/2012
• latest Update: 02/23/2013
• By: Kos9
• themeforest.net/user/Kos9

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!

Features

• Responsive Design
• Google Web Fonts
• Unlimited number categories of top-level
• boxed and full width layout
• 14 Full Layered PSD files
• Great documentation
• Custom footer (Multi language)
  — Section Contact Us
  — Column About Us
  — Column Shop news
  — Column Twitter
  — 7 Social Buttons (Facebook, Twitter, RSS , Dribbble, Forrst, Vimeo, Linked In)
• Compatible with all major browsers
• Grid / list products view
• Used HTML5 and CSS3
• Easy to install and customize

Replaces one file engine

• /index.php

Change Log

23.02.2013 — Version 1.0.7 (Current Version)

• Added two social buttons YouTube and Vkontakte (vk.com);
• Fix: news not saved in a module Oceanic Custom Footer;
• Fix: not updated basket when adding of goods in different currencies;
• Update to Opencart 1.5.5.1.

12.12.2012 — Version 1.0.6

• Added multi store support for module "Oceanic Custom Footer".

20.11.2012— Version 1.0.5

• Fixed errors displaying quick shopping cart.

29.08.2012— Version 1.0.4

• Updated to Opencart 1.5.4.1.

07.06.2012— Version 1.0.3

• Added support for IE7.

04.06.2012— Version 1.0.2

• Added ability to change theme settings from a store;
• Added two color settings;
• Fixed css bugs.

31.05.2012— Version 1.0.1

• Fixed language bags in Admin Panel;
• Fixed broken buttons "Compare" and "Wish list".

29.05.2012 — Version 1.0.0

• Release.

Install Theme

Create a backup before installing theme.

1)  Copy all files from "Source" directory to your website's root directory, as shown in the screenshot below (folder contents may vary from those shown in the screenshot);

2) Go to Admin -> System -> Settings, click on "edit", select "Store" tab and select "Oceanic" in "Template" field;

Upgrading Theme

Create a backup before upgrading;

1. Download the latest version Oceanic Store from your Themeforest account;
2. Copy all files from "Source" directory to your website's root directory;

Upgrading Theme to version 1.0.7

Create a backup before upgrading;

1. Make sure you have installed Opencart version 1.5.5.1. If you have installed an earlier version of Opencart then you need to update it to version 1.5.5.1.
2. Download the latest version Oceanic Store from your Themeforest account;
3. Copy all files from "Source" directory to your website's root directory;

Upgrading Theme to version 1.0.5

Create a backup before upgrading;

1. Download the latest version Oceanic Store from your Themeforest account;
2. Copy all files from "Source" directory to your website's root directory;
3. Open file: /catalog/controller/common/footer.php;
4. Find and Delete string: $this->children = array('module/oceanic_custom_footer');
5. Save and Exit;

Settings

Change Logo and Images Settings

1. Go to Admin -> System -> Settings, click on "edit", select "Image" tab;
2. Click "Browse Files" in "Store Logo" field and select your logotype;
3. Set the field values ​​as shown in the picture below:

Change Settings of Images in Modules

Go to Admin -> Extensions -> Modules -> Bestsellers and Featured and Latest and Specials -> edit and change "Image (W x H)"

if position equal to Content Top or Content Bottom then W x H(190x190)
if position equal to Content Left or Content Right then W x H(40x40)

Go to Admin -> Extensions -> Modules -> Slideshow -> edit and change "Dimension (W x H)" = 940x360

Oceanic Custom Footer

Go to Admin -> Extensions -> Modules -> Oceanic Custom Footer -> edit and change the settings to your liking, for example as in the image below:

Oceanic Theme Settings

Go to Admin -> Extensions -> Modules -> Oceanic Theme Settings -> edit and change the color settings to your liking, for example as in the image below:

HTML Structure

This theme is a fixed layout with two columns (main content with left sidebar or right sidebar). All of the information within the main content area is nested within a div with an id of "content-center". The sidebar's (column #2) content is within a div with an id of "content-left". The sidebar's (column #3) content is within a div with an id of "content-right".The general template structure is the same throughout the template. Here is the general structure.

If you would like to edit the color, font, or style of any elements in one of these columns, you would do the following:

#content-right a {
        color: #ff0000;
}

CSS Files and Structure

I'm using six CSS files in this theme:

1. markup.css - It is main css which control structure & columns of website;
2. ie8.css - It is css for only Internet Explorer 8;
3. colorbox.css - here you can change the style of popup image viewer;
4. elastislide.css - carousel of images;
5. flexslider.css - slider images;

The markup.css file contains all of the specific stylings for the page. The file is separated into sections using:

/*
------------ BODY ------------
*/

        some code

/*
------------ LAYOUT ------------
*/

        some code

/*
------------ MENU ------------
*/

        some code

JavaScript

This theme imports 2 external Javascript files:

1. https://ajax.googleapis.com/ajax/libs/jquery/1.7.2/jquery.min.js - jQuery Library;
2. https://ajax.googleapis.com/ajax/libs/jqueryui/1.8.18/jquery-ui.min.js - jQuery UI Library.

and 8 internal Javascript files:

1. main.js - used to display the effects;
2. html5.js - provides support for html5 in older versions of Internet Explorer;
3. respond.min.js - provides support for Responsive Design in older versions of Internet Explorer;
4. jquery.flexslider-min.js - slider plugin;
5. jquery.elastislide.js - carousel plugin;
6. jquery.colorbox-min.js - popup image viewer;
7. jquery.tweet.js - Twitter widget;
8. tabs.js - tabs plugin.

PSD Files

This theme included 12 different PSD pages:

1. Home  (Index) - Home.psd 
2. About Us - AboutUs.psd
3. Shopping Cart - Cart.psd
4. Checkout  - Checkout.psd
5. Contact Us - ContactUs.psd
6. View products in a grid - Grid.psd
7. View products in a list - List.psd
8. Account Login - Login.psd
9. Order Information - Order.psd
10. Order History - Orders.psd
11. Product view - Product.psd
12. Sitemap - Sitemap.psd

and 2 special pages:

1. Full layout - FullWidth.psd
2. Mobile layout - Mobile.psd