Ribbon Style

  • Posted in : BookCard WP
  • deseyr
    Participant

    Hi,

    is it possible to style the ribbon like this:

    http://imageshack.us/a/img541/5504/ribbonz.jpg

    i don’t get it in the CSS, also on the front page

    thanks,

    marco

    Mehmet S.
    Keymaster

    For close button:

    – Paste to Theme Options > Style > Custom CSS:

    .rm-close { border-bottom: 1px dashed #888; }
    .rm-close:after,
    .rm-close:before
    {
    border-top: 4px solid #333;
    margin-top: 1px;
    width: 25px;
    }
    

    For open button:

    – Paste to Theme Options > Style > Custom CSS:

    .ribbon:before { border-left-color: #D64B4B; }
    
    camarano
    Participant

    Hi, i;ve tried this style but it only changes the left tip of the ribbon. Is it possible to change the whole ribbon color?
    Thanks

    Mehmet S.
    Keymaster

    Paste to Theme Options > Style > Custom CSS:

    .ribbon { background: green; }
    .ribbon:before { border-left-color: green; }
    .ribbon:before { border: 24px solid green; }
    
    reece
    Participant

    How can you change the colour of the ribbon but keep the style I tried a few custom css to change colour but it always made the ribbon a rectangle.
    Thanks.

    Mehmet S.
    Keymaster

    Which color do you want to apply?

    thedeancorp
    Participant

    @reese, I couldn’t use the custom css or it made it a square for me too. It’s only like three properties though, so just change out the applicable hex codes starting on line 427 of main.css (line 431, 441 and 443). Doing it that way worked for me, although you’ll have to redo those if you ever update the theme.

    reece
    Participant

    I managed to keep the shape etc just made the part that does the triangle transparent so it got rid of the square shape. thanks for the replies though.

    aguimoye
    Participant

    Hello,

    I managed to change my ribbon color and shape on the Front Cover but would like to match the stitching and sizing to that of the “X” button on my site.
    http://www.alejandroguimoye.com

    Here is the custom CSS code I’m currently using:

    .ribbon strong { color: #FFF; text-shadow: 0 1px 0 #000; }
    .ribbon {background: #333333; }
    .ribbon:before{border-left-color: #333333;}
    .ribbon:before{border: 24px solid #333333;}

    .rm-close {border-bottom: 1px dashed #888;}
    .rm-close:after,
    .rm-close:before
    {border-top: 4px solid #333;
    margin-top: 1px;
    width: 25px;}

    ahmetsali
    Keymaster

    Hi @aguimoye

    you can try this custom css;

    a.ribbon:after {
        content: "";
        display: block;
        position: absolute;
        top: 2px;
        bottom: 2px;
        left: -45px;
        width: 1px;
        border-left: 1px dashed #888;
    }
    .ribbon-stitches-top {
        border-top: 1px dashed #888;
        box-shadow: none;
        margin-left: -45px;
    }
    .ribbon-stitches-bottom {
        border-top: 1px dashed #888;  
        box-shadow: none;
        margin-left: -45px;
    }
    
    promoo
    Participant

    Hi,

    The answer to Reece’s question wasn’t answered. I want to keep the ribbon style but just change the colour to #fb089e on the front and back ribbon.

    Please advise.

    CJ

    ahmetsali
    Keymaster

    Hi @promo,

    please check out;

    how to change ribbon color.

    photoclipID
    Participant

    Hello there!!!
    First of all – thank you for a wonderful WP theme: great job! Appreciate it!
    And my question is as follows: its clear about color of ribbon … but:
    HOW TO CHANGE a TEXT (“open” to whatever)
    Thank you in advance!

    Mehmet S.
    Keymaster

    Hi, you can use localization method to change the text. Please check out Localization section in the theme documentation.

    Thanks

    photoclipID
    Participant

    Thank you for response! But still … localization method will translate “OPEN” to any provided language: but I need to change “OPEN” to … “GO”, or “HELLO”, or whatever! Is it possibel (in custom CSS, for example)!?
    Thank you in advance!

    Mehmet S.
    Keymaster

    You can find it in the page_inner-front_cover.php file

    photoclipID
    Participant

    You are wonderful!!! Thanks a lot!

    Mehmet S.
    Keymaster

    You are welcome.

Viewing 18 posts - 1 through 18 (of 18 total)

You must be logged in and have valid license to reply to this topic.

License required for the following item
Login and Registration Log in · Register