How to use custom class on Dukan theme

We have 3 places that you can add your custom class:

1. Add custom class to section:

section

With section settings, you can change background of section by using ‘Background image’ field to choose your image or you can use background color by using ‘Background color’ field to choose your color that you want.

2. Add custom class to Column Config:

elecment

3. Add custom class to a element in section:

column

Before continue we will instruction to you, how to add image of product to having effect for images of us.

add-img

Small image which you use to show and base image which it will be show when you hover on product.

How to add currency option at the top ? To add currency option at the top, you make follow steps below:

Go to Configuration -> Currency Setup:

currency

  1. Default currency, you want show
  2. Allowed Currencies, your website allow to use.

Go to System -> Manage Currency -> Rate

rate

Continue we will show how to use custom class on homes of Dukan theme.

Home Default


 

1. Promo banner

promo

To have a your promobanner the same our demo you will have to add custom class “col-sm-6 col-xs-12 effect-one” to the first promobanner, “hidden-sm col-xs-12 effect-one ” to middle promobanner and “col-sm-6 hidden-xs effect-one” to rest promobanner.

2. Our Bestseller

our_best

At our this block you will have to add custom class “text-center” to the title element.

3. Category Product Block

product-tab

To have your category product block the same our category product, you will have to add custom class “text-center” to that element.

4. Daily Deal

deal

To have this daily deal, you will have to add custom class “link-colour-white” to that element.

5. Newsletter Block

newsletter

 

To have this newsletter block, you will have to add custom class “text-center” to that element.

6. Policy Block

policy

To have this policy block, you will have to add custom class “text-center” to that section.

7. Promobanner 2

promo2

To have this block, you will have to add custom class “no-padding” to that element.

8. Static Block

static

To have this static block, you will have to add a custom class “text-center” to that section and add custom class “col-md-push-2 col-sm-12 col-xs-12” to that element.

Home Fashion


 

1. Revolution Slider

slider

To have this revolution slider you will have to add a custom class “slider-fashion” to that section.

2. Promobanner

promo

To have this promobanner block you will have to add a custom class “fashion-store” to that section,  custom class for column 1 is “col-sm-6 hidden-xs”, custom class for column 2 is “hidden-sm col-xs-12 padding-5  “, custom class for column 3 is “col-sm-6 hidden-xs”, add custom class “padding-5 no-padding-r col-sm-12 col-xs-12 effect-two” to left promobanner, “col-sm-12 col-xs-12 line-effect” to middle promobanner and “padding-5 no-padding-l  col-sm-12 col-xs-12” to rest promobanner.

3. New Arrival

new-arrival

To have this new arrival block, you must add custom class “text-center col-sm-12 col-xs-12” to title of element.

4. Sale Product

sale

To have this sale product block, you will have to add custom class “text-center col-sm-12 col-xs-12” to title of element.

5. Our Brands

brand

To have this block, you will have to add custom class “text-colour-white” to that section, custom class for column 1 is “hidden-sm hidden-xs”, custom class for column 2 is “col-sm-12 col-xs-12” and add custom class “col-sm-12 col-xs-12 text-center” to that element.

6. Policy Block

policy

To have this policy block you must add custom class “text-center fashion-store” to that section, custom class for column 1,2,3 is “col-sm-4 col-xs-12”.

7. Newsletter

newsletter

To have this policy block you will have to add custom class “fashion-store” to that section and add custom class “text-center” to that element.

Home Shoes


 

Revolution Slider

slider

To have this revolution slider block, you will have to add custom class “slider-fashion” to that section.

2. Promobanner

promo

To have this promobanner block, you will have to add custom class “fashion-store” to that section, custom class for column 1,2 is “col-sm-6 col-xs-12” and add custom class to some element bellow:

  1.  no-padding ef-bg-shadow col-sm-12 hidden-xs.
  2. no-padding col-sm-12 hidden-xs.
  3. no-padding ef-bg-shadow col-sm-12 hidden-xs.
  4. no-padding ef-bg-shadow hidden-sm hidden-xs.
  5. no-padding ef-bg-shadow hidden-sm hidden-xs.
  6. no-padding hidden-sm col-xs-12.

3. Product Tabs

product_tab

To have this product tabs block, you will have to add custom class “text-center” to that section and “text-center” to that element.

4. Daily Deals

deal

To have this deals block, you will have to add custom class “shoes-store” to that section.

5. Products Block

produt

To have this products block, you will have to add custom class “shoes-store” to that section, custom class for column 1,2,3 is “col-sm-6 col-xs-12”.

6. Our Brands

brand

To have this our brands block, you will have to add custom class “brga-brands” to that section.

Home Watch


 

1. Revolution Slider

slider

To have this revolution slider block, you wil have to add custom class “slider-fashion watch-store” to that section.

2. Promobanner

promo

To have this promobanner, you will have to add custom class to that elements bellow:

  1. col-sm-4 hidden-xs line-effect
  2. col-sm-4 hidden-xs
  3. col-sm-4 col-xs-12 hidden-xs  line-effect

3. Static block

choose

To have this static block, you  will have to add custom class “watch-store” to section and add custom class to elements as bellow:

  1. col-sm-6 hidden-xs
  2. col-sm-6 col-xs-12

4. Our Bestseller

our_bestselling

To have this our bestseller block, you will have to having custom class for column 1 is “col-sm-4 hidden-xs” and custom class for column 2 is “col-sm-8 col-xs-12”.

5. Newsletter

newsletter

To have this newsletter block, you will have to add custom class “watch-store” to section and “text-center”  to element.

6. Last Products

last_product

To have this last products block, you will have to add custom class “col-sm-4 hidden-xs” to custom class for column 1 and “col-sm-8 col-xs-12” to custom class for column 2.

7. Testimonial

test

To have this testimonial block, you will have to add custom class “text-center text-colour-white link-colour-white twitter-home” to element.

8. Social Block

social

To have this social block, you will have to add custom class “text-colour-white” to element.

9. Policy Block

policy

To have this policy block, you will have to add custom class to elements as bellow:

  1. col-sm-4 col-xs-12
  2. col-sm-4 col-xs-12
  3. col-sm-4 col-xs-12

Home Jewelry


 

1. Revolution Slider

slider

To have this slider block, you will have to add custom class “slider-eye watch-store” to section.

2. Featured Products

f_products

To have this featured products block, you will have to add custom class “text-center” to title of this block.

3. Static block

see_what

To have this static block, you will have to add custom class “text-center” to element.

4. New Arrival

new

To have this new arrival block, you will have to add custom class “effect-two” to place that have a girl.

5. Newsletter

newsletter

To have this newsletter block, you will have to add custom class “fashion-store” to section and “text-center” to element.

Home Parallax


 

1. Static Block

static

To have this static block, you will have to add custom class “parallax-store” to section and “pull-right text-center text-colour-white link-colour-white” to element in section.

2. Static Block 2

static2

To have this static block, you will have to add custom class “parallax-store” to section and “text-left” to element in section.

3. Video

video

To have this video block, you will have to add custom class “text-center video-background” to section.

4. Static block

static3

To have this static block, you will have to add custom class “parallax-store” to section and “text-center text-colour-white link-colour-white” to element in section.

5. Newsletter

newsletter

To have this newsletter block, you will have to add custom class “text-center” to element in section.

6. Testimonial

testimonial

To have this testimonial block, you will have to add custom class “twitter-home text-colour-white link-colour-white text-center” to element in section.

Home Eyewear


 

1. Slider

slider

To have revolution slider block, you will have to add custom class “slider-eye watch-store” to section.

2. Policy

policy

To have this policy block, you will have to add custom class “eyewear-store” to section.

3. Best Men Collection.

Untitled-2

To have this product block, you will have to add custom class “eyewear-store” to section and “text-center text-colour-white col-sm-12 col-xs-12” to title of block.

4. Promobanner

promo

To have the promobanner block as above, you will have to add custom class follow as bellow:

  1. effect-two col-sm-6  hidden-xs
  2. hidden-sm col-xs-12
  3. effect-two col-sm-6 hidden-xs

5. Top Women Collection

collection

To have the product block as above, you will have to add custom class “eyewear-store” to section and “text-center text-colour-white col-sm-12 col-xs-12” to title of block.

6. Testimonial

test

To have the testimonial block as above, you will have to add custom class “text-center text-colour-white col-sm-12 col-xs-12” to title of block and “text-center text-colour-white col-md-push-2 col-sm-12 col-xs-12” to block.

Home Bag


 

1. Revolution Slider

slider

To have the revolution slider block as above, you will have to add custom class “slider-eye watch-store” to section.

2. Promobanner

promo

To have the promobanner block as above, you will have to add custom class “fashion-store” to section and add custom class to elements follow as bellow:

  1.  hidden-sm col-xs-12 line-effect
  2. padding-5 col-sm-12 hidden-xs
  3. padding-5 col-sm-6 col-xs-12 effect-two
  4. padding-5  no-padding-r col-sm-6 col-xs-12 effect-two

3. Policy

policy

To have the policy block as above, you will have to add custom class “fashion-store” to section.

4. Product Block

women

To have the product block as above, you will have to add custom class “bag-store” to section and “no-padding” to promobanner on the left side.

5. Video

video

To have the vide block as above, you will have to add custom class “text-center video-background” to section.

Rate This Article

(7 out of 9 people found this article helpful)

2 Comments

  1. This manual is missing a few things.
    1- how to put on the background of the blocks?
    2- to add pictures in the product? In normal mode it can not, seem to be disabled.
    3 – how to add currency option at the top?

Leave A Comment?