CSS Ribbon help

Community Forums Forums Design Tips and Tricks CSS Ribbon help

This topic is: not resolved

This topic contains 2 replies, has 2 voices, and was last updated by  Jenny 1 year, 2 months ago.

Viewing 3 posts - 1 through 3 (of 3 total)
  • Author
    Posts
  • #48373

    Jenny
    Participant
    Post count: 37

    I am following the tutorial on this page: http://www.sitepoint.com/pure-css3-ribbons/

    and this is the result I am getting: http://so-very.me/test

    here is the code in my css~

    #content .post h2.entry-title a {
    width: 80%;
    position:relative;
    font-size: 24pt;
    font-weight: 300;
    padding: 6px 20px 6px 70px;
    margin: 30px 10px 10px -70px;
    color: #FFF;
    background-color: #d7d1bd;
    }
    
    #content .post h2.entry-title a:after {
    	content: " ";
    	width: 0;
    	height: 0;
    	left: 0px;
    	top: 100%;
    	position:absolute;
    	border-width: 5px 10px;
    	border-style: solid;
    	border-color: #666 #666 transparent transparent;
    }
    
    #content .post h2.entry-title a:before {
    	content: " ";
    	width: 30px;
    	height: 0;
    	left: -30px;
    	top: 12px;
    	position:absolute;
    	border-width: 20px 10px;
    	border-style: solid;
    	border-color: #999 #999 #999 transparent;
    }

    I have NO Idea where I am going wrong or if it’s the parent theme causing it or how to fix it… any tips? or hacks? or corrections? :P

    #48379

    David Chu
    Participant
    Post count: 1364

    Hi,
    That’s a cute idea. You know what? It’s actually working, it’s just invisible. At first I thought it was because you were styling the link instead of the H2, but it’s fine, it just needs to be shoved a bit.

    To see your results, try sticking this pinch of CSS in your stylesheet:

    [css]
    h2.entry-title {
    padding-left: 100px;
    padding-bottom: 30px;
    }
    [/css]

    Obviously you’ll want to play with spacing and other bits of style, but you’re almost there.

    I also got your thing to appear by taking “overflow: hidden” off on #inner. But that messes up some other stuff. The Genesis uses of “overflow: hidden” on various HTML bits is quite challenging at times. :-) Your scenario here is tricky because you’re trying to style something inside #content and the outer wrapper has its own ideas.

    Cheers, Dave


    Dave Chu · Custom WordPress Developer – likes collaborating with Designers

    #48386

    Jenny
    Participant
    Post count: 37

    Nope didn’t work. I did see it when it got moved over but… once I played with it a little it kinda disappeared again xD I guess it’s just not meant to be? :P

    • This reply was modified 1 year, 2 months ago by  Jenny.
    • This reply was modified 1 year, 2 months ago by  Jenny.
Viewing 3 posts - 1 through 3 (of 3 total)

You must be logged in to reply to this topic.