Results 1 to 4 of 4

Thread: Stuck creating CSS ribbons for titles

  1. #1
    Member aazad's Avatar
    Join Date
    Jan 2009
    Posts
    99
    Blog Entries
    1

    Question Stuck creating CSS ribbons for titles 16 Mar 2012 @ 13.13

    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;  
    }
    [FONT="Century Gothic"]Too Kool for Skool[/FONT]
      Reply With Quote

  2. #2
    Trusted Guru WelshStew's Avatar
    Join Date
    Dec 2008
    Posts
    2,555
    Blog Entries
    3

    Default 16 Mar 2012 @ 13.50

    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
      Reply With Quote

  3. #3
    Member aazad's Avatar
    Join Date
    Jan 2009
    Posts
    99
    Blog Entries
    1

    Default 16 Mar 2012 @ 14.14

    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
    [FONT="Century Gothic"]Too Kool for Skool[/FONT]
      Reply With Quote

  4. #4
    Member aazad's Avatar
    Join Date
    Jan 2009
    Posts
    99
    Blog Entries
    1

    Question <span> tag added, but not showing in source code why? 17 Mar 2012 @ 19.41

    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; 
    }
    [FONT="Century Gothic"]Too Kool for Skool[/FONT]
      Reply With Quote

Tags for this Thread

Posting Permissions

  • You may not post new threads
  • You may not post replies
  • You may not post attachments
  • You may not edit your posts
  •