Specials Information

[Alice]

Hello,

It's possible to display a % about the specials on the different product page.

How to change that to include a round ?

[Spencer]

Hello,

The system is managed by the css, if you change the element, you can create a round rather a square

 

example about the square

span.ModulesFrontPageTickerBootstrapTickerPourcentage {
  font: 700 14px/12px Arial,Helvetica,sans-serif;
  color: #FFF;
  background: #FF6600 none repeat scroll 0% 0%;
  text-transform: uppercase;
  padding: 0.375rem 0px 0.4375rem;
  text-shadow: 1px 1px rgba(0, 0, 0, 0.24);
  width: 3.125rem;
  text-align: center;
  display: block;
  float:right;
  position: relative;
  right:1rem;
}

 

[Foster]

The code below create a circle. it use the bootstrap function

This is a  pure html but after you must translate in function the ClicShopping Code.

 

       .btn-circle.btn-xl { 
            width: 70px; 
            height: 70px; 
            padding: 10px 16px; 
            border-radius: 35px; 
            font-size: 12px; 
            text-align: center; 
        } 

 

and

 

<button type="button" class="btn btn-danger btn-circle btn-xl">30 %</button>

 

Edited July 10, 2019 by Foster

[Spencer]

To continue the conversation, it's possible to implement something little more sexy.

An example here : https://css-tricks.com/building-a-starburst-with-css/

 

[Alice]

It's easy to implement or not ? Foster create a just circle and Spencer propose something more evolved.

What is your opinion.

[Foster]

First you must know ClicShopping is made like this

1 module = 1 css

In this case all the products listing has their own css, you must modify the css and update the files in consequences;

I recommend you to create a new module (it's easy, it's just a replace) with this own css.

[Alice]

Ok thank you. @Foster