Image Category Ribbon

  • evanyzd

    (@evanyzd)


    6 years ago

    Hi, I’m curious.. What’s the name of this plugin (see the image)
    screen
    source:

    Thanks

    • This topic was modified 6 years ago by evanyzd.
    • This topic was modified 6 years ago by Jan Dembowski.

    The page I need help with: [log in to see the link]

Viewing 7 replies - 1 through 7 (of 7 total)
  • Anoop Ranawat

    (@anoopranawat)

    6 years ago

    Hello @evanyzd

    Its not created with any plugin. I think theme author/ developer created with custom coding.

    Thread Starter evanyzd

    (@evanyzd)

    6 years ago

    Hi @anoopranawat thanks for the reply.

    I see.. Can you please give an article that will explain how to customized it? Well, the easiest way is switch to theme that offer ribbon feature. But since I’m already stick with my current theme 🙁

    Anoop Ranawat

    (@anoopranawat)

    6 years ago

    Hello,

    Here is HTML and css code

    HTML

    <div class="category ribbon">Category Name</div>

    CSS

    
.ribbon::after {
    content: "";
    display: block;
    position: absolute;
    width: 0;
    height: 0;
    right: -8px;
    bottom: 0;
    top: 0;
    border-width: 13px 8px 14px;
    border-style: solid;
    border-color: #ff8a01 transparent #ff8a01 #ff8a01;
}

.content.list .item .category {
    position: absolute;
    top: 20px;
    left: 0;
    z-index: 1;
}

.ribbon, .ribbon a {
    color: #fff;
}

.ribbon {
    display: inline-block;
    position: relative;
    padding: 5px 10px;
    font-size: 12px;
    text-transform: uppercase;
    background-color: #ff8a01;
}

.ribbon {
    font-size: 12px;
    text-transform: uppercase;
}
    Thread Starter evanyzd

    (@evanyzd)

    6 years ago

    @anoopranawat

    Thanks again for the reply. Since I’m a totally beginner in HTML/CSS. Can you please let me know where I should put those code? I did paste the CSS code into my additional CSS (Theme menu) and the HTML file into my header.php. This is what I got: http://take.ms/9F25i

    Anoop Ranawat

    (@anoopranawat)

    6 years ago

    Hello,

    Please share your website link.

    Thread Starter evanyzd

    (@evanyzd)

    6 years ago

    @anoopranawat

    Hello again. Please check this

    Thank you

    Anoop Ranawat

    (@anoopranawat)

    6 years ago

    Hello @evanyzd,

    Please added following HTML code <div class="category ribbon">Category Name</div> inside the entry-thumbnail :

    <div class="entry-thumbnail">

---YOUR IMG CODE Will come here---

<div class="category ribbon">Category Name</div>
</div>
Viewing 7 replies - 1 through 7 (of 7 total)
  • The topic ‘Image Category Ribbon’ is closed to new replies.