Docs

[moabullon]

Hi,

My site is thetogas.com

on my main page I would like my featured blog post to have some sort of outline around them.
I am finding that the white background is blending at times so I would like to have my blog posts outlined in one way or another.

Honestly I am not sure how many ways this can be done so I trust that you will provide me with a good way of some how highlighting or outline both the post and post title. Now after its all said and done, I’m not sure until I see it, but maybe I would like both the post featured pic and the post title highlighted together or just the post featured pic highlighted with the post title floating under.

Please advise on how to accomplish this. And maybe what you would recommend, unless its simple to show me both and then I choose the best from the options. Thanks.
Thank you very much.

[Rupok]

Hi there,

Thanks for writing in! You can add this under Custom > CSS in the Customizer.

.blog .x-iso-container {
  margin: 0 auto;
}

.blog .x-main .hentry {
  box-shadow: 0 0 0 1px #333 inset;
}

I can’t guarantee it would be perfect but you can try that and might need to fix other spacing as well.

Cheers!

[moabullon]

I see what you did there with the outline. I like the idea but its not exactly what I thought of. is there a way to change it up. Maybe make it look a bit better or professional. maybe make it look sold around the back or at least make the title post have a sold background that then links up perfectly around the featured pic

[Rupok]

Hi there,

Thanks for writing back. You can try something like this :

.blog article > h2 {
  background: #eee none repeat scroll 0 0;
  padding: 10px 10px 15px;
  text-align: center;
}

Also remove this code while adding this :

.blog h2.mtn {
  height: 60px;
}

Hope this helps.

Cheers!

[moabullon]

That looks great! I do have one problem now. I played around with the padding but I can’t seem to get it to work.
I need the black background to be a bit larger so that it does not look odd when I have two lines on my post titles. I tried changing the font size and the padding numbers but I can’t seem to get the actual black part to expand ever so slightly.
Thanks

[Lely]

Hello There,

From you custom CSS, I can see this:

.blog article > h2 {
    background: black none repeat scroll 0 0;
    padding: 7px 10px 25px; 
    text-align: center;
}

Let’s decode this line: padding: 7px 10px 25px;
7px is your top padding. The space on top.
10px is your left and right padding.
25px is your bottom padding.

When you add padding to an element, it was added to it’s height. But then you have this custom CSS:

.blog h2.mtn {
  height: 60px;
}

The padding above will not work because you have limited the h2 tag to have 60px height only. Remove that height and the padding will work. See attached screenshot. That is the result when you remove the 60px height for heading.

Hope this helps.

[moabullon]

Dang you are good. Thanks for easily explaining that

[Rahul]

You are welcome!

[Author]

Posts