Site maintenance: Sun 15 Nov, from 12:00 UTC, about 4–6 hours. Details

This cutover relies on some testing that is still incomplete so may be cancelled at short notice

Forums / Templates, Stylesheets, Page Layout / Flag New Products with in a Category?

Flag New Products with in a Category?

Started by amyn on 19 May 2011, 5:58 PM · Views: 4,558

Results 21 to 24 of 24
3 Sep 2013, 2:07 AM
#21
limitless avatar

limitless

Inactive

Join Date:
Jan 2012
Posts:
496
Plugin Contributions:
0

Flag New Products with in a Category?

Thank you. That squared that away. Now I think there is an issue with determining new, back in stock, and specials/featured products.

Will work on that and post up when I get stuck again.

4 Sep 2013, 6:02 AM
#22
limitless avatar

limitless

Inactive

Join Date:
Jan 2012
Posts:
496
Plugin Contributions:
0

Re: Flag New Products with in a Category?

If anyone else is interested in the css code required to make these ribbons.

Obviously will need to change colors and position to suit your site.

Base code was straight up stolen from here: http://css-tricks.com/snippets/css/corner-ribbon/

Attachment 13020

.productIcon {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: relative;
  left: -88px;
  top: -5px;

}

#productListing .productIcon {
  width: 85px;
  height: 88px;
  overflow: hidden;
  position: relative;
  left: -112px;
  top: -88px;

}
.ribbon {
  font: bold 15px Sans-Serif;
  color: #333;
  text-align: center;
  text-shadow: rgba(255,255,255,0.5) 0px 1px 0px;
  -webkit-transform: rotate(45deg);
  -moz-transform:    rotate(45deg);
  -ms-transform:     rotate(45deg);
  -o-transform:      rotate(45deg);
  position: relative;
  padding: 7px 0;
  left: -5px;
  top: 15px;
  width: 120px;
  background-color: #cf0404;
  background-image: -webkit-gradient(linear, left top, left bottom, from(#cf0404), to(#ff3019)); 
  background-image: -webkit-linear-gradient(top, #cf0404, #ff3019); 
  background-image:    -moz-linear-gradient(top, #cf0404, #ff3019); 
  background-image:     -ms-linear-gradient(top, #cf0404, #ff3019); 
  background-image:      -o-linear-gradient(top, #cf0404, #ff3019); 
  color: black;
  -webkit-box-shadow: 0px 0px 3px rgba(0,0,0,0.3);
  -moz-box-shadow:    0px 0px 3px rgba(0,0,0,0.3);
  box-shadow:         0px 0px 3px rgba(0,0,0,0.3);
  -webkit-backface-visibility: hidden; /* http://stackoverflow.com/a/6898097 */
}

.ribbon:before, .ribbon:after {
  content: "";
  border-top:   3px solid #ced19a;   
  border-left:  3px solid transparent;
  border-right: 3px solid transparent;
  position:absolute;
  bottom: -3px;
}

.ribbon:before {
  left: 0;
}
.ribbon:after {
  right: 0;
19 Apr 2016, 8:09 PM
#24
pricediscrimination avatar

pricediscrimination

Zen Follower

Join Date:
May 2008
Posts:
401
Plugin Contributions:
0

Re: Flag New Products with in a Category?

gjh42:

I want to add another place or two where the icons can be shown before final submission to Free Addons. Suggestions for the most desired places would be appreciated. (It actually only takes adding one function call to a line in a file to add icons to a location.)

I'll leave this up while testing is continuing.

Hello, would you happen to know if this is ok to use on v1.5.5? And is there is a way to use this for "Sold" icons over the thumbnail images in product listing pages? Thank you.