The ribbon is comprised of a number of CSS elements including a CSS triangle trick using borders.
In the main style.css file there’s a set of elements under
ul.products li .price (approx line 323 in the stylesheet) which you can adjust to change the appearance and position of the ribbon.
In the custom.css add the following to adjust the ribbon colour and position.
ul.products li .price {
top:10px; /* adjust to move ribbon up or down */
right:-6px; /* how far it sticks out the side */
/* can be changed to left */
background: #d23d46; /* change ribbon colour */
}
ul.products li .price:before {
border-color:#d23d46 #d23d46 #d23d46 transparent;
/* change the #d23d46 to same value as the style above to change ribbon ends or set all to transparent to remove */
}
ul.products li .price:after {
border-color: #892026 transparent transparent transparent;
/* change the #892026 to a darker value to the one you set in the above or set to transparent to remove the little tuck under the ribbon */
}
Hope that helps.