CSS Ribbon help

[Jenny]

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? 😛

[David Chu]

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:

h2.entry-title {
  padding-left: 100px;
  padding-bottom: 30px;
}

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

[Jenny]

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? 😛

[Author]

Posts