Decorating the postbit title

[Daryn]

I'm trying to add a box shadow to the post title on the postbit. The class .b-post__title seems to be what I need, but it's not doing much other than letting me change the font size, which I needed to do anyway. Tried this so far without much result:

.b-post__title {
  display: block;
  box-shadow: 10px 10px white;
}

I also tried the same in the .b-media__body class, but all that ended up doing was putting a white block to the right of the title.

I thought that would've been fairly easy. Guess I was wrong there.

[glennrocksvb]

Try this:

.b-post__title {
    box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.5);
    margin-bottom: 15px;
    padding: 5px 10px;
    background: #eee;
    width: -webkit-calc(100% - 35px);
    width: calc(100% - 35px);
}

You can use this box shadow generator to adjust the shadow style

http://www.cssmatic.com/box-shadow

[Daryn]

That mostly gets it. 100% doesn't mean 100% in this case though. I think I can live with that though.

[glennrocksvb]

Yeah I just guessed what you were trying to do without knowing how you would want it to look like.

[Daryn]

Still trying to figure out why I can't get that thing to go all the way across the post. Might have to swap it for a div.

[glennrocksvb]

Can you post a screenshot of what you're trying to do? Changing the tag into div would mean editing the template which is not recommended. Should be doable with CSS without changing tag name.

[Daryn]

Sure can.

[glennrocksvb]

Are you using my suggested CSS? I set the width there using calc to accommodate the post # but since you moved that up, you can simply use width:100%.

[glennrocksvb]

The parent tag has width of 50% that's why the title doesn't span the entire post width.

Try this:

.b-post__content .b-media__body {
    width: 100%;
}
.b-post__title {
    font-size: 20px;
    box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.5);
    margin-bottom: 15px;
    padding: 5px 10px;
    background: #222;
    width: 100%;
}

[Daryn]

The CSS I'm using is mostly yours, except for the font size and the background color.

.b-post__title {
    font-size: 20px;
    box-shadow: 4px 5px 5px 0px rgba(0,0,0,0.5);
    margin-bottom: 15px;
    padding: 5px 10px;
    background: #222;
    width: -webkit-calc(100% - 35px);
    width: calc(100% - 35px);
}

I also tried width: 100% with no calc, same effect. I'll keep fiddling with it, but if you've got ideas, let me know.

Thanks a bunch Glenn.

[glennrocksvb]

Did you see my previous post? The parent tag is only 50% wide. You have to also set it to 100%.

[Daryn]

Ugh, my eyes went straight over that parent tag. Sorry about that.