The forums ran from 2008-2020 and are now closed and viewable here as an archive.

Home Forums CSS CSS Ribbons and Banners not working on WP

  • This topic is empty.
Viewing 1 post (of 1 total)
  • Author
  • #273363

    Hi there everyone and thanks in advance.

    Here is my problem : I want to create titles that are in a CSS Banner or Ribbons.

    In order to do that,
    1) I got some CSS snippets that I modified a bit
    2) Input of the additionnal CSS code in the Custom CSS part of WordPress
    3) Put the HTML in a webpage :

    However, the style does not apply. Other codes seem to work just fine …

    Your help is much appreciated

    The HTML code I put in the webpage is :



    Here is the copy paste I did in Custom CSS WP :

    .ribbon {
    font-size: 60px !important;

    width: 40%;
    box-shadow: 0 10px 15px #000a;
    position: relative;
    background: #323339;
    color: #fff;
    text-align: center;
    padding: 0.5em 0.5em;
    margin: 0.5em auto 0.5em;
    .ribbon:before, .ribbon:after {
    content: “”;
    position: absolute;
    display: block;
    bottom: -1em;
    border: 1em solid #323339;
    z-index: -2;

    .ribbon:before {
    left: -1.5em;
    bottom: -0.5em;
    border-right-width: 1.5em;
    border-left-color: transparent;
    box-shadow: 10px 1px 10px #000a;
    .ribbon:after {
    right: -1.5em;
    bottom: -0.5em;
    border-left-width: 1.5em;
    border-right-color: transparent;
    box-shadow: -10px 1px 10px #000a;

    .ribbon .ribbon-content:before, .ribbon .ribbon-content:after {
    content: “”;
    position: absolute;
    display: block;
    border-style: solid;
    border-color: #323339 transparent transparent transparent;
    bottom: -0.5em;
    .ribbon .ribbon-content:before {
    left: 0;
    border-width: 0.5em 0 0 1em;
    .ribbon .ribbon-content:after {
    right: 0;
    border-width: 0.5em 1em 0 0;

    .banner {
    position: absolute;
    left: 50%;
    display: block;
    margin: 100px -200px;
    width: 400px;
    height: 60px;
    border: 1px solid #323339;
    font: normal 30px/60px ‘Rye’;
    text-align: center;
    color: #FFFFFF;
    background: #323339;
    border-radius: 1px;
    box-shadow: 0 0 30px rgba(0,0,0,.15) inset,
    0 6px 10px rgba(0,0,0,.15);

    .banner::after {
    content: ”;
    position: absolute;
    z-index: -1;
    left: -70px;
    top: 24px;
    display: block;
    width: 40px;
    height: 0px;
    border: 30px solid #323339;
    border-right: 20px solid #414249;
    border-bottom-color: #323339;
    border-left-color: transparent;
    transform: rotate(-5deg);

    .banner::after {
    left: auto;
    right: -70px;
    border-left: 20px solid #414249;
    border-right: 30px solid transparent;
    transform: rotate(5deg);

Viewing 1 post (of 1 total)
  • The forum ‘CSS’ is closed to new topics and replies.