1. Start
  2. Features
  3. Boxed layout
  4. Style Settings
  5. Twitter Settings
  6. HTML Structure
  7. CSS Files and Structure
  8. JavaScript
  9. PSD Files

Oceanic Store - Responsive HTML Template

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

Boxed layout

  1. Open HTML file;
  2. Find: <body>
  3. Replace with: <body class="full"> 

Style Settings

You can pick the settings on a demo site, and then use the instructions below to use on your website.

 

Open file: css/style.css

Header Font

Go to the site http://www.google.com/webfonts.

Find a font you like and click "Quick-use", as shown in the image below:

Select the tab "@import" (1), copy (2) and paste the string (3), copy (4) and paste the string (5) as shown in the image below: 

 

Text Font

 

Background Image

 

Background Color

 

Color 1

 

Color 2

Twitter Settings

Set Twitter Username:

  1. Open HTML file;
  2. Find: /* TWITTER USERNAME */
  3. Next string;
  4. username: "Replace_With_Your_Twitter_Username",

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;
  6. style.css - Here you can change the font, background image and the background color of the page.

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