Speak to an expert:0333 700 11 11

Big Job Coming Up?:Click HereEmail

Search
Basket
  • Home
  • JJR Styling Examples

Heading green dot

heading element class added: jjr-heading-dot 

Banner

banner element class added: jjr-pb-banner

All other Delivery Charges are based on weight and location, please add products to your basket to calculate shipping

A small amount of product lines from particular manufacturers listed below will incur a supplier delivery surcharge. The details of these surcharges can be seen at the bottom of this page.

Grouping

row element class added: jjr-pb-grouping

  1. .
  2. .
  3. .
  4. .

row element class added: jjr-pb-grouping-dark

  1. .
  2. .
  3. .
  4.  

Adding Column Cards

 

Add a columns element to a row 

Add class to the columns element: jjr-column-group-card and all children column will become cards

 

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Adding Images with Hover effect

On the Image element add class: jjr-image-rounded

Adding columns

2 Column

  • Add HTML Code element  =>  class = jjr-2-cols
    • Add <ul><li></li><ul> list 

3 Column

  • Add HTML Code element  =>  class = jjr-3-cols
    • Add <ul><li></li><ul> list 

4 Column

  • Add HTML Code element  =>  class = jjr-4-cols
    • Add <ul><li></li><ul> list 

Global classes

 

Desktop

  • jjr-desktop-hide = hide element on desktop

 

  • jjr-desktop-p-(x) = allaround padding for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-pl-(x) = padding-left for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-pr-(x) = padding-right for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-pt-(x) = padding-top for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-pb-(x) = padding-bottom for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

 

  • jjr-desktop-m-(x) = allaround margin for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-ml-(x) = margin-left for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-mr-(x) = margin-right for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-mt-(x) = margin-top for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-desktop-mb-(x) = margin-bottom for the element on desktop (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

 

  • jjr-desktop-w-(x) = max-width for the element on desktop (%). x = 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

  • jjr-desktop-h-(x) = max-height for the element on desktop (%). x = 10, 20, 30, 40, 50, 60, 70, 80, 90, 100


     

 

Mobile

  • jjr-mobile-hide = hide element on mobile

 

  • jjr-mobile-p-(x) = allaround padding for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-pl-(x) = padding-left for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-pr-(x) = padding-right for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-pt-(x) = padding-top for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-pb-(x) = padding-bottom for the element on mobile (px). x = 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

 

  • jjr-mobile-m-(x) = allaround margin for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-ml-(x) = margin-left for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-mr-(x) = margin-right for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-mt-(x) = margin-top for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100
  • jjr-mobile-mb-(x) = margin-bottom for the element on mobile (px). x = 0, 10, 20, 30, 40, 50, 60, 70, 80, 90, 100

 

  • jjr-mobile-w-(x) = max-width for the element on mobile (%). x = 10, 20, 30, 40, 50, 60, 70, 80, 90, 100 
  • jjr-mobile-h-(x) = max-height for the element on mobile (%). x = 10, 20, 30, 40, 50, 60, 70, 80, 90, 100