Mobel Opencart Theme

2.x

Overview

Mobel Opencart Theme is a very advanced OpenCart theme suitable for all kind of Stores. Many custom features is added for easy of use. The theme is designed in a way to use in all kind of store. Whether you're looking for a new skin for your existing Opencart based store or a template to modify for your client, Mobel Opencart Theme is the right choice.

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

  1. Admin - containing 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
  4. There is an extra file Mobel.ocmod xml file which is used for modification

Uploading and Installing the Theme

Note: Only common.js files has been changed so only one file will be replaced. Mobel uses default ocmod modification setup.
 

There are two ways to Uploading the Mobel Theme .

First Way

Second Way

Activating the Theme:

For Opencart 2.2.0.0:

When the theme files are uploaded you would need to activate your theme in Extensions->Themes. In Theme List click on edit and then change the Template directory value default to Mobel and click save.

After that goto System->Users->User groups in that select "extension/news" and "sale/newssubscribers" for both Access Permission and Modify Permission and save .

Image Settings:

Before you start using your store with the Mobel Opencart Theme , Image settings must be edited with the following values:

You can change the image settings in Extensions->Themes in that you have to click on edit. In that you have to change the values according to the images shown below.

 

For Opencart 2.1.0.2:

When the theme files are uploaded you would need to activate your theme in System->Settings. In Settings click on edit and then goto General tab in that change the Template value default to Mobel and click save.

After that goto System->Users->User groups in that select "extension/news" and "sale/newssubscribers" for both Access Permission and Modify Permission and save .

Image Settings:

Before you start using your store with the Mobel Opencart Theme , Image settings must be edited with the following values:

You can change the image settings in System->settings in that you have to click on edit. In that goto image tab here you have to change the values according to the images shown below.

 

Theme Settings

This is the module where you control the different aspects of your theme like Theme Color,Theme fonts,Ribbon,Background Pattern , Payment Icons , Social Icons ,Social feeds etc..

For using the theme settings you have to install the LT Theme Settings from Extensions->Module . In module install the LT Theme Settings. After installing it click on edit of the LT Theme Settings Settings.

There are 10 tabs under the theme settings.

General Settings:

In this tab You can change different settings.

Full Width or Boxed Width : You can either set full width layout or boxed width layout
Compare button / Wishlist button / Refine Search / Discount Ribbon / Blog link in Top Bar : You can able to enabled and disabled at any time
Product Cloud Zoom/default Zoom : You can select product zoom in product page . There are two types of zoom Opencart default and cloud zoom. 
Responsive Menu Color Style : You can able to set dark and light style for responsive menu styles
Powered by text : In this field you can change the default of powered by:Opencart value. You can use html tags in it you can see the below image how it is implemented. 
Account / Category / Information / Affiliate Module Title Text : You can able to set custom title for these modules

Color Settings:

In this tab you can change the color for different fields in your store 

Background Pattern Settings:

In this tab You can set background color,background pattern or You can also upload your own background pattern with different settings for body background, header background,footer background, newsletter background, custom footer background, payment icon background and poweredby background .You can select the pattern images you want to use.

Font Settings:

In this tab you can set different font family and font size.

Menu Settings:

In this tab you can set color settings for the menu . And also add a custom link.

Product Content Page:

In this tab you can give custom content on product display page.

Custom Footer:

In this tab you can set custom footer text bar with icons . It supports multi-language. In Custom footer text you can give two text part one is top text and another is bottom text which you can see from the theme demo . And for the Field Custom Footer Icon 1 you have give the font value from Font Awesome which you can get from the link Font awesome

Payment Icons:

In this tab you can select the payment icons and also you can upload your own payment images . You can upload upto 3 payment images . The uploaded image size should be width 38px and height 24px .

Social Networks:

In this tab you can set social icons, youtube videos Facebook fanbox, twitter timeline and Youtube iframe code.

For Facebook fanbox you have to give your page url in the field(Not the profile url).

For twitter you have to give your twitter widget id which you can get it from your twitter account. Login to your twitter account.goto settings->widget. in that create new widget. In this you will see an html code in a box . in that copy the data-widget-id value and paste it in twitter-widget-id.

For Youtube you have to give ifram code of the youtube video . For Youtube video the width and height should be 420 and 315 respectively.

Footer Settings:

In this tab you can set Custom Content for footer position ,store address and custom content block.

 

LT Banner

To use LT banner you need to install module LT Banner module in extension. In Banner module you can set upto four images in a single banner . For column left and column right you can only use a single image and the width of the image should be 262 px and height can vary . For content top and content bottom you can set upto 4 images in a single banner . From the below image you can see for fashion banner width is set as 560px as it has 2 images . Depending upon the image count you have to set the width.

You need to insert the banner image in Design->Banner. Then Click add new button in the right corner.

You can able to see the below screen, in that you can able to set images for banner module.

After saving it, you need to goto Extension -> Lt Banner

You can able to see the below screen, in that you can able to activate LT banner module.

Eg:For Displaying 1 banner you need to set the width for 1140 , For Displaying 2 banner you need to set the width for 560, For Displaying 3 banner you need to set the width for 380 and For Displaying 4 banner you need to set the width for 280

 

LT Accordion Category

To use LT Accordion Category you need to install module LT Accordion Category module in extension.

After installing you can able to enable and disable LT Accordion Category module.

 

LT News

To use blog/news module first install the module in extension->module LT - News Module . Then goto Extension->News in this you can create news . And it supports SEO .

After Installing news modules if you see permission error then you need to goto System -> Users -> User Groups

Edit Administrator and select access permission and modify permission for "extension/news" and "module/ltnews"

For adding blog data you need to goto Extension -> News .You can able to see the below screen, in that you can able to add new blog by clicking add new button in the right corner.

After adding the blog goto LT News module in Extension->module . You can place the module as you set the modules like latest, featured modules . The image width is 262 and depending upon the image you can set the height.

 

LT News Letter Module

Newsletter module is used for signup for newsletter. Goto Extension->modules and install LT - newsletter module

You can access the newsletter subscriber details under marketing->newsletter subscribers . You can export the list to excel.

 

LT Product Tab

To use LT Product Tab module first install the module in Extension->Module LT Product Tab.

You can able to add any number of tabs and can add any products to the tabs.

 

LT Testimonials

To use LT Testimonials module first install the module in Extension->Module LT Testimonials

You can able to add Author Name,Image and author description.

Number of items to scroll at a time is used to display number of items in a row.

 

LT Fullwidth Slideshow

In this module you can set Full Width slideshow in home page . You can see the setting in the below image

 

LT Products By Category

To use LT Products By Category module first install the module in Extension->Module LT Products By Category

In this module you can able to select any category and it will display all products in the particular category.

 

 

HTML Structure

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

  1. Nav Top
  2. Header
  3. container
  4. footer
  5. powered

Header

The header div contains -

  1. Logo
  2. Currency
  3. Language
  4. Search
  5. Cart
  6. Main menu for pages

Menu

The menu div contains navigation elements of the template

  1. Category menu
  2. Sub Category menu

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

Content

Most of the page elements are placed in a container div with class "row". The "box" container have main parts: product-layout. All important parts of every page segment is placed within the "container" div.

CSS Files and Structure

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. jquery.sidr.dark.css - Styles for responsive menu sidr module
  3. The theme use bootstrap

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

JavaScript

This template is having 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. custom.js
  2. cloud-zoom.1.0.2.min.js
  3. jquery.sidr.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.js or inline in the HTML files if required. The custom.js file is responsible for the main functions sliding effects, image fading effects

Sources and Credits

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.Contact me throught support@latestthemes.net

Latest Themes