“ModernStore; Documentation by “Dimitar Koev” v1.0

“ModernStore” OpenCart 1.4.9.3 Premium Theme

Created: 11/02/2011
By: Dimitar Koev/ metaGraphics
Email: office@mgdesign.eu

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. Installation
  2. Modules
  3. HTML Structure
  4. CSS Files and Structure
  5. JavaScript
  6. PSD Files
  7. Sources and Credits

A) Installation - top

IMPORTANT - ALWAYS BACKUP YOU SYSTEM BEFORE MAKING ANY UPGRADES OR CHANGES!

ModernStore is very advanced Premium theme for OpenCart 1.4.9.3. Theme comes with several custom modules included:

  1. Custom Nivo Slider Module controlled by the admin area
  2. Custom Header drop down category module controlled by the admin area
  3. Custom Header banners module controlled by the admin area
  4. Custom Footer Info module controlled by the admin area
  5. Custom Sliding Featured Products module
  6. Custom Cart and visitor greeting in Header
  7. Custom Footer with Category menu, Information menu and Main store menu
  8. Custom product page with accordeon info module
  9. Facebook like button in product page (SEO URLs must be enabled - otherwise the Like button is hiden)
  10. Custom heavily modifyed layout, powered by jQuery library

Istallation of this theme is fairly simple. You must simply unzip your downloaded "Modern_Store.zip" archive and upload "admin", "catalog" and "image" folders from "FILES TO UPLOAD" folder in your main OpenCart installation dyrectory. You'll be prompted to replace 4 (three) files:

  1. /catalog/controller/common/header.php
  2. /catalog/controller/common/footer.php
  3. /catalog/controller/module/cart.php
  4. /catalog/language/english/common/footer.php

IMPORTANT - IT IS RECOMMENDED TO USE THIS THEME ON CLEAN INSTALLATION OR EXISTING SHOPS WITHOUT CUSTOM CORE MODIFFICATIONS!

Now, when everything is uploaded you must go to your admin area System/Settings and choose the "ModernStore" template from the "Store" tab.

When the template is activated, go to your System/Settings/Image tab and adjust the image settings with the following values:

Image settings

A.1.) Modules - top

This theme comes with a pack of custom modules. You must activate the modules in your Admin area under Extensions/Modules menu.

  1. Deactivate Cart module and AJAX Cart Load!
  2. Make sure no modules are enabled in right column as this theme use only left and home sections!
  3. Install and activate Header Menu Module.
  4. Install and activate Home Slider Module.
  5. Install and activate Header Banners Module.
  6. Install and activate Footer Text Module.
  7. In order to use the "Featured Slider", Featured Module must be enabled with position set to home.

Keep in mind that these modules are tested with OC 1.4.9.3. only! It is possible that the code may be different in other (older or newer) versions. ALWAYS BACKUP FIRST, before trying to upgrade or modify, because it can't be done after!

These Modules will ONLY work with ModernStore theme or other themes with the needed CSS and functionality included.

If you would like to use another theme, you must DEACTIVATE the Headermenu, Home Slider, Header Banners and FooterText modules first! Otherwise the shop would not work because of the missing files in another theme.

Also keep in mind that there are changes in /catalog/controller/common/header.php, /catalog/controller/common/footer.php and /catalog/controller/module/cart.php and these files will be replaced with the new one provided with this theme. If you upgrade your OC with a newer version it is possible to override the custom core files and the modules would not work! As we can not predict what would be changed in newer OC versions, may be it would be possible to restore the module functionality with just replacing again with the fils in this package, but we CAN NOT GUARANTEE this!

A.1.) Headermenu - top

Headermenu module allows you to use category drop-down module in header. You may use this module only or combine with the common category module in left column.

This Module will ONLY work with ModernStore theme or other themes with the needed CSS and functionality included.

If you would like to use another theme, you must DEACTIVATE the Home Headermenu first. Otherwise the shop would not work because of the missing files in another theme.

A.2.) Nivo Slider - top

Nivo Slider module allows you to use animated JS image slider in home page. You may use unlimited number of slides and assign a link and title to each slide. Images must be uploaded the same way like you upload images in catalog - click on the "Missing image" thumbnail and upload new image or choose from File manager.

This Module will ONLY work with ModernStore theme or other themes with the needed CSS and functionality included.

If you would like to use another theme, you must DEACTIVATE the Home Slider module first. Otherwise the shop would not work because of the missing files in another theme.

A.3.) Header banners - top

Header banners module allows you to use banners in your shop header ares. You can upload as many images as you want and assign a link and title to each banner but I recommend to stick with one of these options:

  1. 1 image 968x116px
  2. 2 images 477x116px
  3. 3 images 318x116px

Images must be uploaded the same way like you upload images in catalog - click on the "Missing image" thumbnail and upload new image or choose from File manager.

This Module will ONLY work with ModernStore theme or other themes with the needed CSS and functionality included.

If you would like to use another theme, you must DEACTIVATE the Header Banner module first. Otherwise the shop would not work because of the missing files in another theme.

A.4.) Footer Text - top

Footer text gives you the opportunity to use text and or images in your left footer area. This module is using the standart rich text editor. Wrtite a short title in "Title" field and main text in editor.

This Module will ONLY work with ModernStore theme or other themes with the needed CSS and functionality included.

If you would like to use another theme, you must DEACTIVATE the Header Banner module first. Otherwise the shop would not work because of the missing files in another theme.

C) HTML Structure - top

This theme has a fixed layout with 1 column on home page and 2 columns in other pages. All of the information within the main content area is nested within a div with an id of "container". The sidebar content is placed within a div with an id of "#column_lef". The general template structure is the same throughout the template. Here is the general structure.

HTML Structure

If you would like to edit the color, font, or style of any elements in one of these columns, you must edit the general CSS file. If you would like to change the general color for links for example, you would cnahge the following:

	a, a:visited {
	color: #9D0043;
	text-decoration: underline;
	cursor: pointer;
}

If you find that your new style is not overriding, it is most likely because of a specificity problem. Scroll down in your CSS file and make sure that there isn't a similar style that has more weight.

I.E.

	#header .div5 a.toplinks {
    	color: #7C7C7C;
    	float: left;
    	font-size: 14px;
    	margin-right: 2px;
    	padding: 10px 8px;
    	text-align: center;
    	text-decoration: none;
}

So, to ensure that your new styles are applied, make sure that they carry enough "weight" and that there isn't a style lower in the CSS file that is being applied after yours.

D) CSS Files and Structure - top

By default the main OpenCart theme uses two CSS files. One general and one for Internet Explorer 6.0 As IE6 is officialy no more supported, my theme do not have IE6 CSS file. I'm using two CSS files in this theme. The first one "stylesheet.css" is the main styling sheet which contains almost every style for the theme. The second one "nivo-slider.css" is for the Nivo slider only.

The first file contains all of the specific stylings for the page.

If you would like to edit a specific style, simply find the appropriate selector that needs to be edited.

E) JavaScript - top

This theme imports 3 aditional (except the default ones) Javascript files.

  1. customscripts.js
  2. jquery.tools.min.js - Jquery Tools library
  3. jquery.nivo.slider.pack.js

customscripts.js is custom script controling diferent visual and functional modificatins:

  1. Header cart drop effect
  2. Headrmenu drop-down effect
  3. Product image fade-out effect

If you would like to change the image fade effect for example, simply open the customscripts.js and change the vallue for opacity.

$(document).ready(function(){

	$("#content a img, #content_home a img").hover(function() {
		$(this).stop()
		.animate({opacity: 0.7}, "medium")

	}, function() {
		$(this).stop()
		.animate({opacity: 1}, "medium")
	});

});

scrolltopcontrol.js is a script from Dynamicdrive.com used to fade a "Scroll-to-top" button in your browser's lower-right area. The script comes ready to use, so you won't need to manually edit enything in it. If you feel familiar with code, you may change the picture used, the speed of scrolling or the moment when the button fades in by modifying the following lines of scrolltopcontrol.js (file is located in your current theme JS folder):

setting: {startline:100, scrollto: 0, scrollduration:1000, fadeduration:[500, 100]},
controlHTML: '', //HTML for control, which is auto wrapped in DIV w/ ID="topcontrol"
controlattrs: {offsetx:15, offsety:15}, //offset of control relative to right/ bottom of window corner
anchorkeyword: '#top', //Enter href value of HTML anchors on the page that should also act as "Scroll Up" links

In addition to the custom scripts, I implement a Nivo Slider plugin to create the slideshow effect in header. This plugin is packed, so you won't need to manually edit anything in the file. The only necessary thing to know is how to call the method. You can find and tune the options in slider_header.tpl, under the main slider container:

$(window).load(function() {
	$('#slider').nivoSlider({
		effect:'random', //Specify sets like: 'fold,fade,sliceDown'
		slices:9,
		animSpeed:500, //Slide transition speed
		pauseTime:3500,
		startSlide:0, //Set starting Slide (0 index)
		directionNav:true, //Next & Prev
		directionNavHide:true, //Only show on hover
		controlNav:false, //1,2,3...
		controlNavThumbs:false, //Use thumbnails for Control Nav
      	controlNavThumbsFromRel:false, //Use image rel for thumbs
		controlNavThumbsSearch: '.jpg', //Replace this with...
		controlNavThumbsReplace: '_thumb.jpg', //...this in thumb Image src
		keyboardNav:true, //Use left & right arrows
		pauseOnHover:true, //Stop animation while hovering
		manualAdvance:false, //Force manual transitions
		captionOpacity:0.8, //Universal caption opacity
		beforeChange: function(){},
		afterChange: function(){},
		slideshowEnd: function(){} //Triggers after all slides have been shown
	});
});

F) PSD Files - top

There are four PSD files included with this theme:

  1. The home page layout
  2. The product page
  3. Category page template
  4. Info page template

G) 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.

Dimitar Koev, metaGraphics Design Studio

Go To Table of Contents