“BigOne” - Responsive/Adaptive, premium OpenCart theme by Dimitar Koev v1.0

BigOne

“BigOne” - Responsive/Adaptive, premium OpenCart theme by Dimitar Koev v1.0

Created: 10/09/2012
By: Dimitar Koev - the AlThemist

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

1) Overview - - top

BigOne is a very advanced OpenCart theme suitable for any kind or e-commerce web site. The theme is coming with totally reworked layout and huge amount of visual effects. It is not only visually appealing, but also built with the modern e-commerce tendencies and best SEO practices in mind. Whether you’re looking for a new skin for your existing Opencart based store or a template to modify for your client, BigOne is the right choice.

BigOne is highly customizable theme loaded with huge ammount of control options as well as some unique for OpenCart features.

Before we start, lets take a look on the folder structure of the theme. All theme files are placed in the FILES_TO_UPLOAD folder. The FILES_TO_UPLOAD folder consists of 3 more folders for diferent types of theme assets:


  1. Admin - contaning all custom admin features
  2. catalog -containing all theme files, custom controller, language files and the theme specific CSS and JS files
  3. Image - containing the theme thumbnail and some image handling core files
BigOne

2) Installation - top



WARNING: This theme is highly customized and recommended to use after clean installation OR on stores without previous system changes.

The installation of the theme is fairly simple. You only need to drag the three folders (admin, catalog, image) from FILES_TO_UPLOAD to the main opencart directory on you server. There are several custom core files which would need to be replaced.


BigOne

There are known issues with FTP clients for Mac computers which replaces the existing folders instead of merging with the theme folders. I would strongly recommend you to use FileZilla if you are using a Mac computer

2.1) Activating and Settings - top

When the theme files are uploaded you would need to activate your the theme in System>Settings>Store tab and the custom modules in Extensions>Modules. On the modules page you'll see 4 new modules added to the list - BigOne Theme Options, BigOne Kwiks Module, BigOne News and BigOne FullScreen Background. Then you would need to click on "install" link for those modules and you are ready to go.


BigOne Theme Options

This is the module where you control the theme appearance, colors, patterns, custom titles and teasers, custom CSS and HTML etc.

  1. Layout and skin settings
  2. Color Settings
  3. Font Settings
  4. Background Settings
  5. Twitter Username
  6. Facebook User Id
BigOne BigOne BigOne BigOne

2.2) The News system - top

BigOne theme comes with a built in Custom News system.


The system is module based and have two sections - module control and Add/Edit news section. In the module control section you can choose a custom title fro your module (or leave it blank and the default string from the language file will be used) and create module instances for different pages and layouts. It is recommended to use only one instance per page. In the Add/Edit news section you can create or modify existing news with title, meta description, text and featured image. The news module supports multilanguage and multistore configurations.


BigOne BigOne

2.3) Colors, fonts and backgrounds - top

You can now set the colors and backgrounds for the main layout elements (headings, links, titles, module boxes, body background color, body background pattern, footer background etc.).

There are 40 background patterns to choose from. Upload of custom background is not included, so if you want to use your own image, you would need to replace one of the existing image files with your own.

BigOne theme comes loaded with 187 Google fonts for use with titles and some other page ellements (e.g. prices)

There are also fields for Twitter Username and Facebook User Id and Skype User Name.

All settings have their default values if the theme options module is not enabled or options are not set.

If you are happy with the basic design and you don't want to use custom styles, leave the fields blank or disable the module.

Keep in mind that some settings would require the module to be enabled even if there are no custom colors and backgrounds set.


2.4) Social media features - top

BigOne theme comes with custom social share features. There are Pinterest, twitter and Facebook share buttons in the product page.

If there is a facebook ID filled in the textfield, custom facebook like box would automatically appear in footer, displaying 6 random fans, total number of fans and the "like" button.

How to set-up the facebook like box:

First - go to your FB fan page an click on the EDIT button on the right:

BigOne

Now check the URL in browser adrress bar, copy the ID number and paste it in the corresponding field in the BigOne theme options panel:

BigOne

Skype Chat/Call function

If enabled, this feature would give your customers the possibility to start a chat or call with you directly from your site. The skype buttons are located in the Contacts page and the footer. You can configure the Skype feature to start a chat or a call by the select box in the Theme control options module.

BigOne

The theme options pannel would be updated regullary with new features and more fonts. Ceck for updates and download the new version when it is available.


2.5) Image Settings - top

Before you start using your store with the BigOne theme, image settings must be edited with the following values:

BigOne

2.6) Modules recommended settings: - top

This theme can use right column on all pages except for the Home page and Product compare page.

Recommended image settings for all product related modules (e.g Featured, Latest, Special and Bestsellers) activated in Content-Top and Content-Bottom area are 200x250 px. However, it is still possible to set your image size to another value, but the theme works best when the image width is 200 px. You can use whatever height suits you. For the right column, the recommended size is 80x100px OR 80 px width and whatever height suits you.


BigOne

This theme is using 2 types of Slideshow modules. The standard Slideshow module, which is converted to use the Flex slider script for responsivity and the Kwicks slider. The original slideshow module was kept intact in order to ensure Multi-Store configurations using other themes simultaneously would work correct. Maximum Recommended width for the slideshow modules - 960px.

BigOne

2.7) Kwicks module: - top

BigOne

The Kwicks module could be used for banner sets like it's shown on the demo. It could accomodated various number of slide, but it is recommended to use it with 3-5 banners configuration. If you have more than 5 banners, it is possible the intial state of the Kwicks module to crop too much of the banner, and for a single images it is recommended to use the default Banners module. Recommended image width for the Kwicks banners is 960 px. You can use whatever heght suits you.

BigOne

2.8) Typography columns: - top

This theme comes with the stylesheets required for displaying typography columns in text areas (information pages). As the default rich text editor of OpenCart doesn't allow using custom functions or shortcodes, you must use the CODE VIEW mode of the text editor and manually add the columns you want to use.

Here is the list of column sizes

BigOne

A div element with class "clear" must be added after every last div element (e.g. div class="one_half last")


3) HTML Structure - top

The main HTML structure of the template consists of 3 main containers containing all page ellements:


  1. Header
  2. Content Holder
  3. Footer

All 4 containers are wrapped in one main div with ID #container


Every one of the main 3 containers have a full width and and a subcontainer with class .inner for the content


BigOne

Header


The header div contains all navigation ellements of the template:


  1. Logo
  2. Main menu for pages
  3. Category menu

Every item in the main menu, could have a fading drop-down submenu. It is based on nested unordered lists and the fading effect for the submenu is controlled by CSS3 function.

The category menu is a 2 level drop-down menu powered by jQuery & CSS3 custom script. The structure of the menu is as follows:

BigOne

Where "children" is a second level (sub-menu) and "children2" is a third level (sub-sub-menu) menu.

Content


Most of the page ellements are placed in a container div with class "box". The "box" container have two main parts: Heading title (h2 with a specific class assigned for the line effect) and the real container with class "box-content". All important parts of every page segment is placed within the "box-conten" div.

Example

BigOne

4) CSS files and structure - top

The theme comes with several CSS (stylesheet) files grouped in the stylesheet folder:

  1. stylesheet.css - the main CSS file containg the layout styling for the theme.
  2. carousel.css - a custom skinned version of the jQuery plugin jcarouses.
  3. facebook.css - custom skinned version of the Facebook Like box
  4. news.css - Styles for the news module
  5. slideshow.css - Styles for the default Slideshow module

There are more plugin-speciffic CSS files in the "js" folder. These CSS files are critically important for the correct work of the plugins and changes there are not recommended.

  1. tipsy.css
  2. countdown.css
  3. flex.css
  4. cloudZoom.css
  5. tweet.css
  6. supersized.css

If you would like to edit or change any color, font, or style of any elements in the template, It is recommended to use the theme control module and only if it's not possible to achieve what you need there to edit the general CSS file (stylesheet.css). 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.

e.g.

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

5) JavaScript - top

This template is heavili loaded with both custom JS functions and free jQuery plugins. All JS files are placed in a separate folder called "js". The list of files is as follows:

  1. jquery-1.5.2.min.js
  2. jquery-ui-1.8.9.custom.min.js
  3. tabs.js
  4. jquery.roundabout.min.js
  5. jquery.jcarousel.min.js
  6. jquery.cycle.lite.1.0.min.js
  7. cloud-zoom.1.0.2.min.min.js
  8. custom_scripts.js
  9. jquery.tipsy.js
  10. jquery.prettyPhoto.js
  11. jquery.tipsy.js
  12. jquery.prettyPhoto.js
  13. li-slider-1.1.min.js
  14. li-slider-animations-1.1.min.js
  15. jquery.easing.1.3.js
  16. jquery.lightbox-0.5.min.js

some of the jQuery plugins are heavily customized and changes in their files are not recommended.

All JS functions related to the theme content management are placed in custom_scripts.js or inline in the HTML files if required. The custom_scripts.js file is responsible for the main functions like menus, sliding effects, tooltips, image fading effects, and the SlideFeatures panel (Cart, Currency switcher, Language switcher, Search bar)

Tooltips

This theme is using the "Tipsy" jQuery plugin. If you want to add a tooltip to any ellement, you only need to put the tip content in the ellement's title tag and add the ellement class in the tooltip function in custom_scripts.js - line 84.

BigOne

For more options and advanced use of the Tipsy plugin, visit the oficial page at jquery.com

6) PSD Files - top

This theme is comming with huge customization options and creating a PSD to cover them is not possible. There is one PSD file included in the package for the logo.:

  1. logo_template.psd

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