How Is This Done (Adding A Ribbon)?

2 replies
  • WEB DESIGN
  • |
Hi,

Looking at this page: Themes | ThemeFuse You see the ribbons on some of the images, saying ''from $59" and "new". How is this done? Because I have some product images I'd like to add '"new" too.
#adding #ribbon
  • Profile picture of the author WPcrew
    Well, product image and ribbon are in a container that's position: relative. Ribbon is position: apsolute to top right corner, and lower z-index.
    Here's an example: http://code.adonline.id.au/clickable-corner-ribbon/.
    {{ DiscussionBoard.errors[8954722].message }}
  • Profile picture of the author sham2
    You can use it easily . Actually this image is use as a background image through css. Make a div and give some class name for example "test_ribbon" make an image for it save it with the name of test_ribbon and apply this style on it.
    .test_ribbon{
    background: url(test_ribbon.png) no-repeat;
    position: absolute;
    }
    use some padding and margin if needed.
    {{ DiscussionBoard.errors[8960861].message }}

Trending Topics