OceanPlaza HTML Template Documentation

Theme is perfect for creative studios or small shops, an excellent site for your company or private website. Very easy to install and configure, quite simply customize your design.

Forum Our website

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!

This theme is responsive layout with four columns. All the information in the main content is based on the bootstrap classes.


General Markup

The general template structure is the same throughout the template. Here is the general structure.

<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01//EN"
   "http://www.w3.org/TR/html4/strict.dtd">

<html lang="en">
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
	<title>untitled</title>
	<meta name="author" content="Serzh">
	<!-- Date: 2013-14-08 -->
</head>
<body>
<header>
<!-- ========== MENU ========== -->
</header>
<!-- ========== SLIDER SECTION ========== -->
<section></section>
<!-- ========== SERVICES SECTION ========== -->
<section></section>
<!-- ========== PORTFOLIO SECTION ========== -->
<section></section>
<!-- ========== PRICING TABLE SECTION ========== -->
<section></section>
<!-- ========== ABOUT TEAM SECTION ========== -->
<section></section>
<!-- ========== WOOCOMMERCE SECTION ========== -->
<section></section>
<!-- ========== CONTACT US SECTION ========== -->
<section></section>
<footer>
<section></section>
<section></section>
</footer>
<script type='text/javascript' src=''></script>
</body>
</html>

How To Edit Color

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

.service_box .section-mid{
    background: #someColor;
}

How turn off the effect of the upper menu

If you do not like the effect of the upper menu with subcategories, you can replace all of the same class.

style.php -> Line: 1115 - 1125

Find 

#menu li:hover ul {
  
  padding: 15px 0;
   background: <?php if (!empty($smof_data['h_m_back_sub'])) { echo $smof_data['h_m_back_sub'];} ?>;
  opacity: 1;
  visibility: visible;
  animation: swingdown 1s ease;
        -webkit-animation: swingdown 1s ease;
        -moz-animation: swingdown 1s ease;

 }

And Replase 

#menu li:hover ul {
  padding: 15px 0;
   background: <?php if (!empty($smof_data['h_m_back_sub'])) { echo $smof_data['h_m_back_sub'];} ?>;
  opacity: 1;
  visibility: visible;
 }

Change Logo

To change your own logo and give it a reference, locate the following lines in the html, and add.

<div id="logo">
	<a href="#Your URL"><img src="#Your logo image" alt="Logo"/></a>
</div>

Change slider images

To change the image slider, locate the line and replace with your own image name.



<li data-transition="" data-slotamount="7" data-masterspeed="300">
	<img src="#Your image"  alt="Your image"  data-fullwidthcentering="on">

Change section images

To change the section image, locate the line and replace with your own image name.


<section class="#Section class intro" style="background-image: url('#Your image');">
    	

Stylesheets

Here's a list of the stylesheet files I'm using with this template, you can find more information opening each file:

File Name Description
bootstrap.css The compiled file bootstrap
ie.css Classes for Internet Explorer
shortcodes.css Customizing a shortcode
style.css Common Styles theme
theme.css Style file to customize the style of your site
woocommerce.css Appearance Settings section WooCommerce

CSS Structure

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


/* Parallax Menu Start */

...code...

/* Parallax Menu __End */


/* HEADER Start */

...code...

/*** ESSENTIAL STYLES ***/

...code...

/*** DEMO SKIN ***/

...code...

/* HEADER __END */

/* HOME Start */

/* Slider Start */


...code...


/* ADDED FOR SLIDELINK MANAGEMENT */

...code...

/*  WRAPPER STYLES END  */

/*  IE8 HACKS  */

...code...

/*  IE8 HACKS ENDS  */
/*  FULLSCREEN VIDEO  */

...code...

/*  FULLSCREEN VIDEO ENDS  */



/*  FULLSCREEN AND FULLWIDHT CONTAINERS  */

...code...

/*  SET THE ANIMATION EVEN MORE SMOOTHER ON ANDROID  */

...code...

/*  SOME CAPTION MODIFICATION AT START  */

...code...

/*  SHADOWS  */

...code...

/*  BUTTONS  */

...code...

/* BUTTON COLORS  */

...code...

/*  NAVIGATION  */

/** BULLETS **/

...code...

/*  SQUARE BULLETS */

...code...

/*  TP ARROWS  */

...code...

/*  TP BANNER TIMER  */

...code...

/*  RESPONSIVE SETTINGS   */

...code...

/*  BASIC SETTINGS FOR THE BANNER  */

...code...

/* HOME __END */

/* PAGES START */

...code...
}
/* PAGES __END */

/* SECTION START */

...code...

/* SECTION __END */

/* SERVICES Start */

...code...

/* SERVICES__END */
/* SERV COROUSEL Start */
/* SERV COROUSEL __END */
/* PORTFOLIO Start */
/* PORTFOLIO */

...code...

/* PORTFOLIO __END */
/**** Isotope Filtering Start ****/
/**** Isotope Filtering __END ****/
/* PRICING TABLE Start */

...code...

/* PRICING TABLE __END */
/* CUSTOMERS Start */

...code...

/* CUSTOMERS __END */
/* ABOUT US TEEM Start */

...code...

/* Base plugin styles */

...code...

/* Non-plugin styles */

...code...

/* ABOUT US TEEM __END */
/* CONTACT US Start */

...code...

/* CONTACT US __END */

/* FOOTER Start */

...code...

/* FOOTER __END */
/* BLOG Start */
/* BLOG __END */
/* Triangle BORDER Start */

...code...

/* Triangle BORDER __END */
/*update*/

...code...


/* Magnific Popup CSS */

...code...

/* Main image in popup */

...code...

/* The shadow behind the image */

					

JavaScript Files

Vestibulum id ligula porta felis euismod semper. Curabitur blandit tempus porttitor. Vivamus sagittis lacus vel augue laoreet rutrum faucibus dolor auctor.

Tag Description
add-to-cart.min.js Add to cart plugin
bootstrap.min.js Bootstrap Compomnents
cart-fragments.min.js Cart Fragmnet plugin
comment-reply.min.js Comment reply
custom.js My own scripts
cycle2.min.js Cycle 2 script
gmap.js Google map plugin
ios6fix.js iOS 6 fix plugin
isotope.min.js Isotope plugin
jquery.blockUI.min.js jQuery UI plugin
jquery.cookie.min.js jquery Cookie plugin
jquery.cycle2.swipe.js jQuery cycle 2 Swipe
jquery.fitvids.js jQuery Fitvids
jquery.flexslider.min.js jQuery Flex Slider
jquery.form.min.js jQuery Form
jquery.js jQuery plugin
jquery.magnific-popup.min.js jQuery Magnific Popup
jquery.mousewheel.min.js jQuery Mousewheel
jquery.placeholder.min.js jQuery Placeholder
jquery.themepunch.revolution.min.js jQuery Themepunch Revolution
jquery-migrate.min.js jQuery Migrate
modernizr.js Modernizr plugin
nav.js Navigation plugin
placeholder.min.js Placeholder
scripts.js Other
scrollTo.min.js scroll To plugin
superfish.js Menu plugin
supersubs.js Menu plugin Sub category
tinynav.min.js Tinynav plugin
waypoints.min.js Waypoints
woocommerce.min.js WooCommerce JavaScript

Customize Slider

If you want to change the slider's speed transition, open up the file index.html and change the following code:

/*-- START REVOLUTION SLIDER 3.0.5 fullwidth mode --*/
revapi1 = tpj('#rev_slider_1_1').show().revolution(
    {
        delay:9000,
        startwidth:960,
        startheight:600,
        hideThumbs:300,

        thumbWidth:100,
        thumbHeight:50,
        thumbAmount:3,

        navigationType:"bullet",
        navigationArrows:"solo",
        navigationStyle:"round-old",

        touchenabled:"on",
        onHoverStop:"on",

        navigationHAlign:"center",
        navigationVAlign:"bottom",
        navigationHOffset:0,
        navigationVOffset:20,

        soloArrowLeftHalign:"left",
        soloArrowLeftValign:"center",
        soloArrowLeftHOffset:20,
        soloArrowLeftVOffset:0,

        soloArrowRightHalign:"right",
        soloArrowRightValign:"center",
        soloArrowRightHOffset:20,
        soloArrowRightVOffset:0,

        shadow:2,
        fullWidth:"on",
        fullScreen:"off",

        stopLoop:"off",
        stopAfterLoops:-1,
        stopAtSlide:-1,

        shuffle:"off",

        hideSliderAtLimit:0,
        hideCaptionAtLimit:0,
        hideAllCaptionAtLilmit:0,
        startWithSlide:0,
        videoJsPath:"videojs/",
        fullScreenOffsetContainer: ""
    });

1. Install Theme

Here's a brief information about how to install your WordPress theme from scratch

Extract the template files in the root folder of your website or subdomain.
Once the files are done uploading, rename the file you want to be your home page as 'index.html'. Is should be like: www.domainname.com/index.html
Customize your site using a file style.css and theme.css

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

CSS

  1. FontAwesome font icons
  2. Bootstrap CSS Framework
  3. Linecons font icons
  4. Google Fonts: Lato;

Images

  1. http://hq-wallpapers.ru/
  2. http://www.flickr.com/photos/yoga-vidya/
  3. http://www.flickr.com/photos/emphotos103/8279698579/sizes/o/in/photostream/
  4. http://www.flickr.com/photos/eesti/106733736/sizes/o/in/photostream/
  5. http://www.flickr.com/photos/22772276@N00/3434543632/sizes/o/in/photostream/
  6. http://www.flickr.com/photos/andersst/4374513438/sizes/o/in/photostream/
  7. http://www.flickr.com/photos/shvidkaya/4464689814/sizes/o/in/photostream/
  8. http://www.flickr.com/photos/shvidkaya/4464689720/sizes/o/in/photostream/
  9. http://www.flickr.com/photos/shvidkaya/4464718570/sizes/o/in/photostream/
  10. http://www.flickr.com/photos/46082439@N06/5727845164/sizes/l/in/photostream/
  11. http://www.flickr.com/photos/patrick/46259350/sizes/o/in/photostream/
  12. http://www.flickr.com/photos/piede/4809687736/sizes/o/in/photostream/
  13. http://www.flickr.com/photos/cypreess/1454388914/sizes/o/in/photostream/

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.