Kuler Advanced HTML Tutorial | OpenCart Modules by KulerThemes.com

Basically OpenCart limits you in 4 positions and doesn’t give you much choice to bring more “life” to your website. So we’ve 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. First, we will create a new module and place 3 banners here, just like in our demo. After login to your back-end, go to Extensions>>Modules and install module Kuler Advanced HTML. You’ll have to add new module, choose Layout and insert 3 images via the WYSIWYG (what you see is what you get) editor. Let’s see what it looks like first by clicking Save and go to your front-end. You will see 3 banners that have been displayed there; but it’s not done yet since they’re all aligned to the left. We’re 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 just like in the video. There are 3 image tags, so the class name should be “grid-3”. All sets ! Now save your settings and take a look at the front-end. You can see they have been divided into 3 blocks width equal width, also have been center aligned nicely. Let’s try another example with “grid-2” layout as in demo. Remove 1 image block and change class name from “grid-3” to “grid-2”. Normally, everything is set to be left aligned but we want this part to be centered, so add a minor CSS style would do. Switch to Source view again and add more style to make them centered. As said in previous part, you can also place multiple modules together as well. In demo site, we placed 2 modules Kuler Social Icons and Kuler Newsletter 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 disabled 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. We’ll create a new module and place in position Content Bottom. One more time but with module Kuler Social Icons. You can see those 2 modules that have been placed inside Kuler Advanced HTML at the bottom but we want them to stay side-by-side. Go back to module Kuler Advanced HTML, switch to Source view and you can use “grid-2” layout that we talked before. Looks good ! How about remove those module titles ? By default, all “inside” module titles will be displayed, you can type “show_title=hide” in Short Code to disable them.


Leave a Reply

Your email address will not be published. Required fields are marked *