Thread: Stuck creating CSS ribbons for titles

Hi Guys,

Creating a test site in wordpress. Trying to use CSS to create ribbons but getting a bit stuck. I'm following this tutorial...

How to Create CSS3 Ribbons Without Images » SitePoint

and can't seem to get the flag shape to appear on the end of the .entry-title. I'm also having trouble with the .widget-titles. The fold is appearing on the wrong side.

Site link - Sugar Couture | Bespoke Cake Design

CSS below. Any feedback would be much appreciated.

Code:

.entry-title {  
    position: relative;  
    width: 70%;  
    padding: 6px 20px 6px 90px;  
    margin: 0 10px 10px -97px; 
    color: #555;  
    background-color: #999;  
    text-shadow: 0px 1px 2px #bbb;  
    -webkit-box-shadow: 0px 2px 4px #888;  
    -moz-box-shadow: 0px 2px 4px #888;  
    box-shadow: 0px 2px 4px #888;  
    font-size: 18px;
    font-weight: bold;
}


.entry-title:after {  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 0px;  
    top: 100%;  
    border-width: 5px 10px;  
    border-style: solid;  
    border-color: #666 #666 transparent transparent;  
}


.entry-title:before  
{  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    right: -2px;  
    top: 0px;  
    border-color: transparent #666 transparent transparent;  
}




.widget-title {  
    position: relative;  
    width: 60%;  
    padding: 6px 20px 6px 90px;  
    margin: 0 10px 10px -97px; 
    color: #555;  
    background-color: #999;  
    text-shadow: 0px 1px 2px #bbb;  
    -webkit-box-shadow: 0px 2px 4px #888;  
    -moz-box-shadow: 0px 2px 4px #888;  
    box-shadow: 0px 2px 4px #888;  
}


.widget-title:after {  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 0px;  
    top: 100%;  
    border-width: 5px 10px;  
    border-style: solid;  
    border-color: #666 #666 transparent transparent;  
}


.widget-title:before {  
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    right: -2px;  
    top: 0px;  
    border-color: transparent #fff transparent transparent;  
}

Top navigation:
From a quick play, that tutorial only works with solid background colours, not gradients. I changed it to use #EEA1EB as the solid background colour and #B420AF as the shadow and it looks good.

Entry header
I couldn't get this working, but let me keep playing and I will get back to you

Cheers for the tip on colours. I hadn't really focused on that bit as yet. Just been trying to get the flag bit working on the entry-title and the widget-title.

Just been having a play with the colours of the top nav now though. I'm not sure pink is the way to go. Looks a bit much. Maybe a light purple might work. The client wanted more purple on the site. I'm not sure. I think the top nav looked better in black. :s

Hi Guys,

I've still had no luck with these.

It's the sidebar on the right that's the main issue. I can't get the flag shape for each heading appearing on the right side. It appears on the left fine, but not the right. One thing I noticed which I think is causing the problem is the <span> tag I've added to...

<h3 class="widget-title"><span><?php _e( 'Meta', 'twentyeleven' ); ?></span></h3>

This is needed to show the flag shape on the right side, yet when I view the code in Chrome this tag doesn't show. It's as if it's not even there.

Code:

<div id="secondary" class="widget-area" role="complementary">

            <?php if ( ! dynamic_sidebar( 'sidebar-1' ) ) : ?>






                <aside id="archives" class="widget">


                    <h3 class="widget-title"><span><?php _e( 'Archives', 'twentyeleven' ); ?></span></h3>


                    <ul>


                        <?php wp_get_archives( array( 'type' => 'monthly' ) ); ?>


                    </ul>


                </aside>






                <aside id="meta" class="widget">


                    <h3 class="widget-title"><span><?php _e( 'Meta', 'twentyeleven' ); ?></span></h3>


                    <ul>


                        <?php wp_register(); ?>


                        <li><?php wp_loginout(); ?></li>


                        <?php wp_meta(); ?>


                    </ul>


                </aside>






            <?php endif; // end sidebar widget area ?>


        </div><!-- #secondary .widget-area -->

Code:

.widget-title {    background: none;
    background: #69598e;
    -webkit-box-shadow: 2px 2px 4px #bab0bd;  
    -moz-box-shadow: 2px 2px 4px #bab0bd;  
    box-shadow: 2px 2px 4px #bab0bd;
    position: relative;  
    padding: 0 20px 0 20px;  
    margin: 0 10px 0 -20px;  
    color: #fff;   
    font-weight:bold;
}


.widget-title span {
    display: block;
}


.widget-title:after {  /* left shadow triangle */
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    left: 0px;  
    top: 100%;  
    border-width: 5px 10px;  
    border-style: solid;  
    border-color: #333 #333 transparent transparent; 
} 


.widget-title span:after {  /* right shadow triangle */
    content: ' ';  
    position: absolute;  
    width: 0;  
    height: 0;  
    right: 0px;  
    top: 100%;  
    border-width: 5px 10px;  
    border-style: solid;  
    border-color: #333 transparent transparent #333;   
}


.widget-title:before {  /* left flag shape */    
    content: ' ';  
    position: absolute;  
    width: 30px;  
    height: 0;  
    left: -30px;  
    top: 12px;  
    border-width: 20px 10px;  
    border-style: solid;  
    border-color: #69598e #69598e #69598e transparent;  
} 
 
.widget-title span:before {  /* right flag shape */
    content: ' ';  
    position: absolute;  
    width: 30px;  
    height: 0;  
    right: -30px;  
    top: 12px;  
    border-width: 20px 10px;  
    border-style: solid;  
    border-color: #69598e transparent #69598e #69598e; 
}