Premium Responsive OpenCart Theme

Lobortis

A charming Opencart theme for your perfume store!


By Kulerthemes

Lobortis, one of our Premium OpenCart Themes with the sophisticated design, is one of the best choice for perfume store. Get the inspiration from the charming and luxurious of the perfume, Lobortis will help you to conquer the most fastidious clients.

Beside the charming and luxurious design, Lobortis is also equipped with a lot of functions for our 11 OpenCart modules such as CSS3 SlideShow, Product tabs and slides, product showcase accordion, Newletter management, social icons and admin editor, product finder and filter, and mega menu.

Lobortis is the perfect template for perfume store that bring your store the delicacy to conquer the most fastidious clients. We hope that Lobortis will help you to attract client by its charming.

Compatible with OpenCart 1.5.4.x, OpenCart 1.5.5.x and OpenCart 1.5.6.x

Premium Responsive OpenCart Theme

How to install theme ?


You don’t have to overwrite or modify OpenCart core files when installing and upgrading Lobortis as the theme is located in a separate folder (named Lobortis) from the OpenCart core structure.

In order to install Lobortis, follow these steps:

  • Download lobortis-pro.zip to your computer (If you purchased via Themeforest, the folder contains 4 folders: Licensing, Documentation, Design and Installation)
  • Installation / 1.5.4.x - use this folder if the version of your OpenCart installation is 1.5.4 or 1.5.4.1
  • Installation / 1.5.5.x - use this folder if the version of your OpenCart installation is 1.5.5 or 1.5.5.1
  • Installation / 1.5.6.x - use this folder if the version of your OpenCart installation is 1.5.6 or 1.5.6.1
  • In each folder, you will see folders modules and lobortis-pro
  • Upload lobortis-pro folders to catalog/view/theme on your web hosting via FTP (put it beside folder called default which is the default theme).

Now you've uploaded Lobortis to your OpenCart already.

Install Lobortis 2

How to activate theme ?

The newly uploaded theme now need to be installed in the administration. To make it your default store, you have to follow those steps:

  • Open your browser, go to your OpenCart Dashboard
  • Login with your admin user name and password.
  • Choose System >> Settings in the menu tab in the OpenCart admin.
  • Click Edit link in Your store (default) in the Settings page.
  • In tab Store, choose lobortis-pro as your default store theme.
  • Back to your online store and refresh (F5) it.

Now you can go back to your front store and check the result.

Please note that you will have to configure your store in order to make it look like demo site, we do provide Install Sample Data or Quickstart Package to quickly setup your site without doing any additional steps.

Active theme Lobortis

How to install Sample Data?

If you purchase our product, it's no doubt that you are impressed by the demo of your themes. We do provide install Sample Data feature which help you build an OpenCart website that looks exactly as demo site in just 5 minutes. It's very easy for you to have a optimize set-up of our templates.

Unfortunately, it is available for only OpenCart version 1.5.5.1 .Moreover, it is suitable for new install OpenCart because when you install Sample Data your data will be deleted. So please be sure that you ready to install it.

Let we start!

  • Step 1: Log-in OpenCart Admin
  • Step 2: Install all modules
  • Step 3: Install our theme in your Shopping Cart
  • Step 4: Go to Extensions >> Modules
  • Step 5: Install and click "Edit" in KulerCP
  • Step 6: In "General" tab you can see 3 options : "Download Sample Data", "Install Sample Data" and "Download Sample Images"
  • Step 7: Click "Download Sample Data" to download sample data package.
  • Step 8: Next, choose "Install Sample Data" and you will see "Module Checker" panel. Make sure that you have all necessary modules installed.
  • Step 9: After all required modules have been installed, choose "Install Sample Data" again to continue the process.
  • Step 10: Since the demo image is pretty big, you will have to download it separately, so choose "Download Sample Images".
  • Step 11: Unzip sample image package, then upload folder image/data to your_root_folder/image/data on your web hosting via FTP, choose replace if you have been prompted to (normally, your root folder should be www or public_html)
  • Step 12: Come back and re-check your shopping store.

Install Sample Data

How to upload and install additional modules?


In the installation file, you will see folder modules together with folder xxx-pro (where xxx is the name of your purchased theme). There are 12 OpenCart modules enclosed in it including the following folders:

  • KulerCP
  • Kuler CSS3 Slideshow
  • Kuler Accordion
  • Kuler Tabs
  • Kuler Slides
  • Kuler Newsletter
  • Kuler Advanced Html
  • Kuler Social Icons
  • Kuler Filter
  • Kuler Finder
  • Kuler Menu
  • Kuler Layer Slider
  • Kuler Blog Manager

These ones are developed to support the theme functions. You need to install, activate and configure them. To install our additional module, you have to upload them to OpenCart first. You do the same steps with all modules.

  • You can see that there're 2 sub-folders inside the module folder called admin and catalog
  • Upload these folders to public_html or www in your server
  • If you are prompted that folder admin and catalog already existed, choose Replace.

Install Opencart Modules

The newly uploaded module now needs to be installed in your store back-end. Please do follow those steps:

  • Login to OpenCart back-end
  • Go to Entension > Modules.
  • Choose Install module

Active Opencart Modules

How to configure module KulerCP?


KulerCP is geared for end-users so all configuration or customization is made VISUAL – it’s all about Clicks and See, no code intervention.

Let's configure KulerCP module step by step:

  • Step 1: Log In back-end
  • Step 2: go to Extentions >> Modules
  • Step 3: Install module KulerCP and click "Edit"

In the main screen, all features are grouped into 3 sections: General, Bottom and Utilities

GENERAL

KulerCP General Features

  • Sample Data: as we mention in How to Install Sample Data. Ignore it if you do not want to install.
  • Default Theme Color: helps you easily change your site base colour.
    • Choose the colour , click "Save" and see how it affect your site.
  • Google's free service: to add high quality fonts to your OpenCart powered site.
    • Turn on Google Fonts for Heading and Google fonts for Body.
    • You can use any font from Google Fonts directory or even choose between variable font weight options.
    • Click "Update lastest Fonts" then click "Save".
  • Custom Copyright: to change copyright text to your own
    • Turn on use custom Copyright
    • Type in your own copyright text
    • Enable this option by click Save and you're done

      (You can implement not only pure text but also any html element like hyperlink, image ... ect)

DESIGN

With changing colors in Theme Options you may set your site to a color combination that suits you the best. Colors are not predesigned, so you may set any color you want.

You may check some color combinations (each theme comes with 6 predefined colors) for changing the main template color from Default Theme Color select box.

KulerCP Design

BOTTOM

KulerCP Bottom

You should see these are 4 blocks near the bottom. Now, let's see how to implement them.

Information

  • Status: On
  • Title: Name of the module for example "About Us"
  • Description: Type your description
  • Click "Save" and re-check in your store

Contact

  • Turn on "Status"
  • Title: Contact
  • Fill in necessary information.

Twitter

(Due to the change in API version 1.1, you will have to create a widget in your Twitter account rather than only provide your Twitter username in version 1.0)

  • Log-in your Twitter account
  • Click the settings icon on top right panel and choose Settings
  • Click Widget on the left side menu.
  • Choose create new to create a new Widget if you don't have one.
  • Choose your widget settings
  • Choose Create widget and you will be provided embed code.
  • Copy this embed code and paste it to Embed Timeline Code in Kuler CP
  • Select "Save"

Twitter didn't give you much choice about your widget looks and feel.

( We gues you've noticed that you don't have to enable all 4 columns, just enable which one you need and column width will be calculated automatically.But thanks for KulerCP, you can now choose between various layout and customize your widget the way you want just by a few clicks.)

  • Background : On
  • Border: On
  • Header: On
  • Footer: On
  • Scroll Bar: On
  • Click Save and re-check in your store

Facebook

  • Turn on Status
  • Usename: type in your Facebook account.

At the last, screen, you will have to choose your widget settings, choose Create widget and you will be provided embed code.

UTILITIES

KulerCP Utilities

  • Sitemap Generator: to generate a speical XML/Gzip sitemap which will help search engines liek Google, Bing, Yahoo and Ask.com to better index your website.
    • Turn on all the fields
    • Click "Save"
    • Click Generate and your sitemap file will be generated automatically.
    • "Sitemap complete URL" fields display your sitemap name and location, you can choose them manually or keep default settings.
  • Google Analytics: allows you to track your website easily and with lots of meta data.
    • Turn on "Google Analytics Status"
    • Google Annalytics Postion: Choose at the bottom of page

      (Please note that it will take some days for your data to be displayed in your Google Analytics account.)

  • Compression: built to greatly imporve website loading speed by combine all CSS, Js files and minifi them
  • Payment icons: display all payment methods that accepted in your website via KulerCP.
    • Turn on status
    • Enable the payment icons that you use
  • Zoom Effect: Turn on if you need this feature




How to configure module Kuler CSS3 SlideShow?


Each time you take a look at our demo site, you would see a nice image slideshow which is called Kuler CSS3 Slideshow. This module is built based on CSS3 technique which provides the same effect as jQuery version while increasing performance. Now we're going to show you how to create and configure it.

Kuler CSS3 Slideshow

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler CSS3 slideshow then click " Edit"
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options
    • There are 2 options in Image Source the first one is to take all images from built-in OpenCart Banners.Second options is to choose image for your slideshow manually.
    • Dimesion: Type in width and height value of this module, then choose transition type.
    • Split value: Split show how many parts the slideshow will be divided.
  • Step 6: Choose all images that you want to displayed in your image slideshow. Click " Add image" >> "Browse" find the image you want to upload.
    • (You can type in your image Title and Link if you want, users will be redirected to this link whenever they click to appropriate image.)
  • Step 7: Click " Save" and see the result.
    • This image slideshow works flawlessly with table/ mobile service while loading faster than the build-in OpenCart slideshow module.
    • You can choose from 1 to 4 transition types and disable Auto Start if you want by turning into Auto Start to Off then click " Save".

An OpenCart slider that captures visitors’ look right the moment they enter your store. Built based on CSS3 tech and also responsive, the slider is the best choice if you’re looking for a lighweight and stable image slider.





How to configure module Kuler Accordion?


For product showcase, we provide an accordion module style called Kuler Accordion. We will show you how to configure this module step by step:

Kuler Accordion

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler Accordion then click " Edit"
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options
    • Type: there are 5 styles such as category, bestseller, featured, lastest, special)
    • There are options that let you choose how many products will be displayed, product dimension and so on.
  • Step 6: Click Save" after you've done with your settings and we're going to see how it will look like.
    • In case you want to choose specific products, there's an auto complete form for your convenience.
    • You can add or remove products just like the way it works in the built-in OpenCart module Featured.

Kuler Accordion allows you to expand and collapse content panes nicely. You can use the module for either category page or product page, and then display it freely on your OpenCart site.





How to configure module Kuler Tabs?


More choices for product display, Kuler Tabs helps you showcase a huge number of categories and products in nicely tab style.

Let me show you how to configure Kuler Tabs module:

Kuler Tabs

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler Accordion then click " Edit"
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options
    • Title : Name of module.
    • Layout: Choose " Home".
    • Posion: Content Top.
    • Sort Order: 1
    • Tab title : name of tab
    • Tab type: Choose the type of tab
    • Category: Choose the category you want set-up already.
    • You can choose to show product form specific category, from built-in OpenCart module or choose specific product manually.
    • You can limit the number of products to be displayed and thumbnail dimension.
    • You can create more than one tab by select " Add tab" and to the same steps as tab 1
  • Step 6: Click " Save" to finish and re-check it in your shopping cart

Our modules are responsive and all of them have been refined to look perfect in both table and mobile devices.





How to configure module Kuler Slides?


If you take a look at our demo site, we guest that you already noticed a nicely horizontal product silder at the bottom. Today the product silder becomes more and more popular for an E-Commerce website so we decide to bring customers a good one. We will show you how to configure this module.

Kuler Slides

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler Slides then click " Edit"
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options
    • Module Title: name of module
    • Layout: Choose " Home".
    • Position: You can choose the position of slide, normally we choose " Content Top"
    • Slide type: There are 4 options to choose, only products that match the selected condition will be displayed.
    • With Silde Type set to Product, you can choose to display particular products via an auto complete form.
    • If you choose " product", " products ( Autocomplate)" will appear and you can choose products that you want.
    • Product limit: How many products will be taken from the selected category.
    • Slide limit: How many products will be displayed in each silde.
    • If you want to load more products you can change " Slide Type" to " Category".
  • Step 6: Click " Save" to finish and re-check it in your shopping cart

Similar to Kuler Tabs but in case you want to display your products in a responsive horizontal slider, Kuler Slides is the best choice for your store.





How to configure module Kuler Newsletter?


For online marketing matter, we do provide a module that let you easily integrate MailChimp to your website. You just need to type the email address and click " Subscribe" so your email is automatically subscribed to mail-chimp list.

Now we show you how to configure this module. In this demonstration, we will configure and place the Newsletter module right below Main menu.

Kuler Newsletter

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module.
  • Step 3: Install Kuler Newsletter then click " Edit".
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options.
    • Title: Name of module.
    • Mainchimp API Key: We need a MailChimp API Key*, so you will have to login your MailChimp account.
    • Make sure you filled in necessary information.
  • How to get MailChimp API Key?
    • Login to your MailChimp account and make sure you have at least 1 List, so subscribers will be listed here.
    • Choose " Accounts" >> API Keys & Authorized Applications.
    • Copy API Key >> fill "MailChimp API Key" in OpenCart Dashbroad.
  • Step 6: Click " Save".
  • Step 7: After setting, you will see your Mailchimp list appear. If not, just click " Get MailChimp list" bottom on the right to update your list.
  • Step 8: Click " Save" again and re-check it in your shopping cart.

Provides an easy way for your visitors to sign up to your MailChimp list. Simply provides your MailChimp’s API key, choose an appropriate list and you’re ready to go.





How to cofigure module Kuler Advanced HTML?


Basically OpenCart limits you in 4 positions and doesn't give you much choice to bring more " life" to your website. So we are made a step and now you can create such beautiful banners with module Kuler Advanced HTML. Or even display multiple modules in 1 position, here you will see we placed Kuler Newsletter and Kuler Social Icons module together. In this tutorial we will show you how to do this.

we will create a new module and place 3 banners here, just like in our demo.

Kuler Advanced HTML

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler Slides then click " Edit"
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options
    • Title: Name of module
    • Layout: Choose " Home".
  • Step 6: Click " Image" button and find the image you want to upload
  • Step 7: Select " Save"

Now you see 3 banners that have been displayed in top; but it's not done yet since they are all aligned to the left.

We are going to show you a little trick to make them Center aligned, now click Source Button to the open code view.

Remove these P tag and place each IMG tag in a new line for better view.

We implemented the predefined CSS style for grid layout so all you have to do is place your image tags inside them. There are 3 image tags, so the class name should be " grid-3"

Click " Save" and look at the front-end.

Now you can see they have been divided into 3 blocks width equal width, also have been center aligned nicely.

You can also place mutiple modules togther as well. In demo site, we placed 2 modules Kuler Social Icon and Kuler Newletter side- by- side. To do that, you'll have to prepare 2 modules that you want to put inside Kuler Advanced HTML module. Those modules must be installed and set up correctly, you can also use disable module too. You'll realize that, each module will have additional field called Short Code, it's generated automatically based on module title. If you want to place any module inside Kuler Advanced HTML module, just copy this Short Code and paste there. Make sure that you use unique name for each module title to avoid conflict. Now, save your module settings, copy and paste Short Code you got from Kuler Newsletter and paste it to Kuler Advanced HTML module.

One of hottest Kulerthemes modules for OpenCart, it gives you ability to place 2 or more modules inside one HTML module and place it anywhere on your website.





How to cofigure module Kuler Filter?


Kuler Filter is the extension that make store becomes more flexible and more user-friendly by allowing your customers to filter the products they see on your site. Simply, Kuler Filter is another searching tool which has the different way to work with Kuler Finder.

Let's configure it step by step.

Kuler Filter

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler Slides then click " Edit"
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options
    • Status: On
    • Show Title: On
    • Title: name of module
    • Layout: Choose Category
    • Posion: You can choose the position of slide, normally we choose Column left
  • Step 6: Click " Save" to finish and re-check it in your shopping cart

You can decide the filter options by yourself which is the most suitable for your shopping cart structure.

How to cofigure module Kuler Finder?


With Kuler Finder, customers can find the product they want very fast by typing the name or the characteristic of this product in searching field.

So let's configure Kuler Finder module.

Kuler Finder

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler Slides then click " Edit"
  • Step 4: Click " Add module"
  • Step 5: Choose module title and all necessary options. It is depend on you to set up this module. I will show you how to set up as demo:
    • Status: On
    • Category Filter: Off
    • Product Title: On
    • Product Price: Off
    • Product Rating: On
    • Product Description: On
    • Product Add to Cart: Off
    • Product Wishlist: Off
    • Product Compare: Off
  • Step 6: Click "Save" to finish and re-check it in your shopping cart

We hope Kuler Finder will make your shopping cart becomes more professional in your customer eyes.

How to cofigure module Kuler Menu?


Kuler Menu gives you ability to create a huge sitemap-like menu with links to every page. It�s actually a user friendly and convenient module when allows customers to find their products what are divided into categories by just one click.

Now we're going to show you how to create and configure it.

Kuler Menu

  • Step 1: Log in OpenCart admin
  • Step 2: Choose Extensions >> Module
  • Step 3: Install Kuler Slides then click " Edit"
  • Step 4: Click " Add menu item"
  • Step 5: Choose module title and all necessary options
  • There are 4 module type for you to choose. You can create multiple modules with each type.

    Categories menu

    • Status: On
    • Title: name of module
    • Sort Order: 1
    • Module type: it depends on you
    • Categories: Click "Add Category"
    • Type the name of category you want add then click "add category" again for anothers.

    Featured products

    • Status: On
    • Title: Feature products
    • Sort order: 2
    • Module Type: Product
    • Product Dimension: 200/200
    • Products: Click "Add product"
    • Type the name of product you want to add then click "add product" again for anothers.

    Custom HTML

    • Status: On
    • Title: Customer HTML
    • Sort Order: 3
    • Module type: HTML
    • Custom HTML: write down the content you want to add.

    Custom Link

    • Status: On
    • Title: Customer Link
    • Sort Order: 4
    • Module type: Custom
    • Click "add link"
    • Sub Menu item: Type name of sub menu
    • URL: Copy and paste link of this sub menu.
    • Click "Add link" again for other sub menu.
  • Step 6: Click " Save" to finish and re-check it in your shopping cart.

How to configure module Kuler Layer Slider?


Kuler Layer Slider help your website becomes more lifeslike with slideshow which have a lot of eyes catching effects and many layers like image, text and video.

I. Installation

Step 1: Log into OpenCart admin

Step 2: Go to Extensions > Modules

Step 3: Install module Kuler Layer Slider and click "Edit"

Install Kuler Layer Slider

II. Usages

Module management is divided into 3 main functions:

  • Slider Management: Manage slider of the module
  • Modules Assignments: Manage position of slider in page
  • Import Tools: Import slider setting from file

Before discovering how to use 3 fuction above, you will see actions in the top right of the module:

  • Save All And Edit Slider: Allows to save the setting in Slider Management, Modules Assignments and keep modifying current slider.
  • Save All And Create New Slider: Allows to save the setting in Slider Management, Modules Assignments and create a new slider.
  • Save Modules Only: Allows to only save the setting of Module Assignments.
  • Cancel: Cancel saving settings and come back to the module list page.

1. Slider Management

When you are in Slider Management, you will see List of Sliders on the left, slider setting on the right, slide actions of current slide on the top.

(First time, we will see any slider in the List of Sliders because you have not create any slider)

1.1. Slider Setting

a. Slider Setting

  • Slider Title: Name of slider
  • Short Code: Use this code to insert into Kuler Advanced HTML
  • Delay: Time that slide stays before movie to next slide (in milisecond)
  • FullWidth Model: Display types of sliders, there are 3 types
    • Boxed: Display in box
    • Fullwidth: Slider elastic by horizontal of page
    • Fullscreen: Slider has the same mesuare with window
  • Touch Mobile: Allow user touch the screen to move to another slide in slider
  • Stop On Hover: Whenever hover mouse in slider, it stop in this slide
  • Shuffle Model: Display slide randomly
  • Image Cropping: Crop the images slide background image and thumb navigation
b. Appearance

  • Showdow Type: Display shadow under slider
  • Show Timeline: Display Timeline
  • Timeline Position: Choose the position of the timeline
  • Background Color: Background color of slider
  • Padding: Border size of slider (Eg: 5px mean border is 5px)
  • Margin: Distance between slider and other parts around it
  • Show Background Image: Display background image or not
  • Background URL: Link to the background image
c. Navigator

  • Navigator Type: 2 types
    • Thumbnail: Display navigator as small image of slide
    • Bullets: Display navigator as bullets
  • Arrows: Positon of arrows which move slide to previous or next slider.
  • Offset Horizontal: Distance of navigator with the bottom side of slider
  • Offset Vertical: Distance of navigator with the left side of slider
  • Always Show Navigator: Always show navigator even mouse does not hover in slider
  • Hide Navigator: When the option Always Show Navigator is disabled and mouse does not hover in slider, navigator will automatically turn off after this value (in milisecond)
d. Thumbnails:

When the option Navigator Type is set to Thumbnail, this settings help customize thumbnails.

  • Thumbnails Width: width of thumbnail in navigator
  • Thumbnails Height: height of thumbnail in navigator
  • Number of Thumbnails: Number of thumbnails displays in navigator
e. Mobile Visibility

  • Hide Under Width: Hide slide if the size of window is smaller than this value (in pixel)

1.2. Preview

Preview the curernt slider

1.3. Manage Slides

This function help manage all of slides in the current slider

a. List of Slides

Display all of slides in the current slider
The slides which have green background are displayed in the slider, the red are hidden

b. Current Slide Setting

  • Title: Title of slide
  • Status: Display/Hide slide
  • Transition: Effect when change slide
  • Slot Amount: Identify the pieces of slide when displays or hides
  • Transition Ratation: Rotation of the pieces when slide change
  • Transition Duration: Time of effect when this slide displays or hides
  • Delay: Time for displaying slide
  • Enable Link: Turn on/off link when click in slide
  • Link: Link that appears when slide is clicked
  • Thumbnail: Small image of slide in the Navigator
  • Full Width Video: Allows video cover slide or not (support Youtube, Vimeo)
  • Video ID: ID of video, eg: video id of youtube http://www.youtube.com/watch?v=fz4MzJTeL0c
  • Auto Play: Auto play video when slide is display or not
c. Layer Editor
Here, we can manage layers in this slide.

  • Image Layer: It allows you to choose image for layer
  • Text Layer: It allows you to add text layer in slider
  • Video Layer:It allows you to choose video from Youtube or Vimeo

d. Layer Setting

  • Class Style: You can choose style for layer here. The style is written in file catalog/view/theme/{theme_name}/stylesheet/layerslider/typo.css
  • Text: Title of layer
  • Animation: Display effect of layer
  • Easing: Type of effect when layer displays
  • Speed: Time to run effect when layer displays.
  • Position: position of layer
  • End time: Time for hiding layer when slide displays (in milisecond)
  • End Speed: Time to run hiding affect of layer
  • End Amination: Hiding effect of layer
  • End Easing: Type of hiding effect of layer
e. Layer Collection

To manage time of appearance of a effect

2. Modules Assignments

Here we can display slider in specific page and position.

3. Import Tools

If you want to recover setting which was exported before, you can use this function to import setting from exported file of slider.

How to configure module Kuler Blog Manager?

Main Features

  • Easy customizationo with many settings
  • Unlimited multi-level category
  • Support multi-language, multi-store for category, article
  • SEO-friendly for category, article
  • Author management by permissions

I. Installation

Step 1: Extract the installation archive, and upload folders in the folder kulerblogmanager to your site.

Step 2: Log into OpenCart admin

Step 3: Go to Extensions > Modules

Step 4: Install module Kuler Blog Manager

Step 5: After installing, you can see the blog in Store Front by URL: http://{your_site}/?route=module/kbm.
The next step is to display the link to blog in menu of Store Front.
KulerThemes provides KulerMenu to help you to manage the menu. You can create a Custom Menu which have the link to blog.

Step 6: Module will automatically create a layout for any pages of blog which includes blog home, blog category, article. We can show off the module in layouts of blog.

II. Usages

1. Setting

  • Only admin of Kuler Blog Manager module has the right to manage setting.
  • This part will help you choose the general information, correct the fuction of module which include:
    • Blog Home : Manage information of blog's homepage such as title, description...
    • Categories: Manage category page, such as number of article in a page, turn on SEO for blog
    • Comments: Manage comment
    • Articles: Manage article such as on/ off information about the article which include author, date, number of comment...
    • Search & Feeds: Manage the searching, feed, sitemap of blog
    • Admin: Customize blog in admin, for example number of aritlce per page

2. Author

  • When you install this module, your account will automatically set as admin of this module.
  • This section manages author and decentralise for level of author.
  • This module divides author into 3 levels. Different level has the different ability:
    • Author
    • Editor
    • Admin

3. Category

  • This section manage categories similar with categories of product. You can name, describe, add image for category.
  • Blog allows to create unlimited multi-level category, support multi-store to help you classify category easier.

4. Article

  • Blog supports multi- language, multi store for articles. You can make the title, description for the article.

5. Comment

  • This module support 2 level of comment, just the first level of comment will be replied.
  • Avatar of comment author uses Gravatar.

6. Modules

Blog also provides 6 sub-modules to display information of blog in pages of Store Front.

Kuler Blog Manager - Archive

Display all articles by year, month

Kuler Blog Manager - Article Tags

Display the tags of article

Kuler Blog Manager - Category

Display the list of category of blog

Kuler Blog Manager- Latest Comments

Display the list latest comments

Kuler Blog Manager - Popular Articles

Display the list popular articles

Kuler Blog Manager - Recent Articles

Display the recent articles.

How to update KulerThemes products?


Once you’re our customer, you’re free to update the purchased themes. We keep on updating our themes and integrating more modules to the themes monthly.

You can update by following these steps:

Step 1: Log in to our website kulerthemes.com

update kulerthemes products 1

Step 2: Hover the PC Mouse on LOGIN button in your top right corner and you will see Product Download link. Open it.

update kulerthemes products 2

Step 3: Now you’re in the Product Download section already. Download the needed package to your computer and unzip it. For example, if you purchased Lobortis Pro, please download the package Lobortis Pro here.

updates kulerthemes products 3

Step 4: Copy the installation file to overwrite your old file.

File structures


CSS Structure

  1. stylesheet.css - Main stylesheet
  2. colors.css - stylesheet for 6 predefined colors
  3. module-styles.css - stylesheet for additional modules
  4. responsive.css - stylesheet for tablet / mobile devices
  5. ie.css - stylesheet for IE8 and older
  6. popup.css - stylesheet for lightbox in product details page
  7. carousel.css - stylesheet for default carousel module
  8. slideshow.css - stylesheet for default slideshow module

Javascript Structure

  1. pop.js - javascript code for lightbox in product details page
  2. utils.js - javascript code for smooth scroll, ie detection and toggle

Sources and Credits


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

Wrap up


You’ve finished all installation with Lobortis and the modules.

For basic OpenCart Tutorials, please visit our OpenCart Tutorials series here:OpenCart Tutorials

How to start an online store with OpenCart?

To get support from us, please head to KulerThemes Support Forum or contact us by email contact@kulerthemes.com

Cheers!

KulerThemes