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

    Thanks

    • This topic was modified 5 years, 5 months ago by evanyzd.
    • This topic was modified 5 years, 5 months 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)
  • Hello @evanyzd

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

    Thread Starter evanyzd

    (@evanyzd)

    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 🙁

    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)

    @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

    Hello,

    Please share your website link.

    Thread Starter evanyzd

    (@evanyzd)

    @anoopranawat

    Hello again. Please check this

    Thank you

    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.