Replace the “sale” bubble with your own image in Sellegance theme

It’s easy to change the “SALE” text in the bubble in Sellegance theme with your own image.

Paste the following in catalog/view/theme/sellegance/stylesheet/custom.css

.onsale {

  background: transparent url('../images/new_on_sale.png') no-repeat;

  -webkit-box-shadow: none;
  -moz-box-shadow: none;
  box-shadow: none;

  padding:0;

  /* change height/width according to your image */
  height: 35px;
  width: 35px;

  /* hide the SALE text. */
  text-indent: -9999px;

}

If you only want to add a background image and keep the text remove text-indent: -9999px;

The full path of the example image is catalog/view/theme/sellegance/images/new_on_sale.png. Of course, you need to change the height and width values to match your image dimensions.