[Resolved] Corner ribbon

Home Forums Support Corner ribbon

Viewing 15 posts - 1 through 15 (of 19 total)
  • Author
    Posts
  • #336241
    Harris

    Hello,

    I’ve got this html

    <span>TEXT</span>

    and that css

    .box {
    width: 200px; height: 300px;
    position: relative;
    border: 1px solid #BBB;
    background: #EEE;
    }
    .ribbon {
    position: absolute;
    right: -5px; top: -5px;
    z-index: 1;
    overflow: hidden;
    width: 75px; height: 75px;
    text-align: right;
    }
    .ribbon span {
    font-size: 10px;
    font-weight: bold;
    color: #FFF;
    text-transform: uppercase;
    text-align: center;
    line-height: 20px;
    transform: rotate(45deg);
    -webkit-transform: rotate(45deg);
    width: 100px;
    display: block;
    background: #79A70A;
    background: linear-gradient(#6680B9 0%, 86c2db 100%);
    box-shadow: 0 3px 10px -5px rgba(0, 0, 0, 1);
    position: absolute;
    top: 19px; right: -21px;
    }
    .ribbon span::before {
    content: “”;
    position: absolute; left: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid 86c2db;
    border-right: 3px solid transparent;
    border-bottom: 3px solid transparent;
    border-top: 3px solid 86c2db;
    }
    .ribbon span::after {
    content: “”;
    position: absolute; right: 0px; top: 100%;
    z-index: -1;
    border-left: 3px solid transparent;
    border-right: 3px solid 86c2db;
    border-bottom: 3px solid transparent;
    border-top: 3px solid 86c2db;
    }

    and I want to add the ribbon appearing on the top right corner of my homepage, overriding anything else.

    I guess I can add the CSS with simple CSS.

    How and where do I have to add the html?

    Thanks
    Harris

    GeneratePress 1.3.48
    GP Premium 1.3.1
    #336261
    Leo
    Staff
    Customer Support
    #336271
    Harris

    edited

    #336287
    Harris

    I managed to place it at the top bar as a widget.

    Now I am trying to move it down either to the navigation top right or to the content top right.

    The problem I have now is that into whatever hook I try to put it it still shows in the same place.
    On the top right of the top bar (I have removed the widget that was placing it there)

    I tried almost all header and content hooks.

    Have in mind that I am not using header but I am using navigation instead.

    Please help

    Thanks

    #336420
    Leo
    Staff
    Customer Support

    Can you provide a link to your site?

    #336429
    Harris

    Same as in the other ticket 🙂
    Juse added it back so you can see it.

    Its in the inside content container hook so I assume it should show in the top right corner of the moving photo

    #336666
    Tom
    Lead Developer
    Lead Developer

    Try adding this:

    .site-main {
        position: relative;
    }
    #336680
    Harris

    Thanks! It is placed properly now.

    Is there some way I can have it only in the homepage?

    #336950
    Tom
    Lead Developer
    Lead Developer

    How/where are you currently adding the HTML element?

    #336955
    Harris

    Hello!

    Its in the “Inside Content Container” hook.
    Code is: <div class="ribbon-wrapper-green"><div class="ribbon-green">MYKONOS</div></div>

    #336993
    Leo
    Staff
    Customer Support

    Try this in the hook:

    <?php if ( is_front_page() ) : ?>
         <div class="ribbon-wrapper-green">
            <div class="ribbon-green">MYKONOS</div>
         </div>
    <?php endif; ?> 
    #337000
    Harris

    Hello,

    This makes all site’s pages loading nothing but header (navigation)

    #337001
    Leo
    Staff
    Customer Support

    Did you check Execute PHP?

    #337005
    Harris

    Yes. Otherwise it wouldn’t break the site 🙂

    #337007
    Leo
    Staff
    Customer Support

    Sorry had a typo before. Edited the code. Give it another shot?

Viewing 15 posts - 1 through 15 (of 19 total)
  • You must be logged in to reply to this topic.