1. Start
  2. Features
  3. Change Log
  4. Install Theme
  5. Upgrading Theme
  6. Settings
  7. Oceanic Custom Footer
  8. Oceanic Theme Settings
  9. HTML Structure
  10. CSS Files and Structure
  11. JavaScript
  12. PSD Files

Oceanic Store - Responsive Oceanic Theme


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


 

Replaces one file engine

Change Log


 

23.02.2013 — Version 1.0.7 (Current Version)

12.12.2012 — Version 1.0.6

20.11.2012— Version 1.0.5

29.08.2012— Version 1.0.4

07.06.2012— Version 1.0.3

04.06.2012— Version 1.0.2

31.05.2012— Version 1.0.1

29.05.2012 — Version 1.0.0

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 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