Jump to content
Sign in to follow this  
bibson

Enclosing/Wrapping post content in a box format.

Recommended Posts

bibson

Hi, I'm looking to tidy up the bottom part of my post content. I'm hoping a bit of css code can help me achieve this or any other way really. Basically I want the 'Possibly related post, and the 'tags' below the post content to be wrapped up in a box in its own section on every post, to help keep things a bit more tidy. A good example of what I'm trying to achieve here is demonstrated by the attached image below from this forum. If you want to see what the current format looks like - The site is: http://itsmyi.com I Hope someone can help lead me in the right direction. Thanks in advance Regards Example

Share this post


Link to post
Share on other sites
catrina

Add this to the base.css file in the PlatformBase theme files:

h2.related_post_title, div.related_post ul, div.tags  {background-color: #f0f0f0;}


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
bibson

Thanks Catrina. Thats a really great start, however, not quite how I want it. Is there a way to have it enclosed in a box like the example's below? Example 1 Desired look Good stuff so far. Thanks

Share this post


Link to post
Share on other sites
catrina

The box where these related post links are listed and the tags area are both separate so we can just put both in a single, bordered box. What is the exact name of the related posts plugin you're using?


Please read the docs before posting. Please do not private message me unless I ask you to.

Designer | Catrina Dulay

Founder | Catrina and Mouse

Share this post


Link to post
Share on other sites
Kate

@bibson Building on what Catrina said, try this:

	div.tags{border:1px solid #ddd !important;border-bottom:0px !important;border-top:0px !important}
	.related_post_title{background-color: #f0f0f0;margin-bottom:0px !important;border:1px solid #ddd;border-bottom:0px;}
	.related_post{background-color:#f0f0f0 !important;list-style-type:none;margin-left:0px !important;padding-left:20px;border:1px solid #ddd;border-top:0px;border-bottom:0px;padding-bottom:20px;margin-bottom:0px !important;}
	

I was fiddling around with it, so hopefully I didn't leave any extra code bits... Let us know if that's what you wanted. I had to just tinker with the CSS, because the plugin itself doesn't give put the related posts in their own div, unfortunately. So, there was no parent element to style. I would've suggested maybe inserting the call to the plugin manually, but I didn't see an option for that with the plugin either. So, hopefully this will work for you.

Share this post


Link to post
Share on other sites
Kate

@bibson Hmmm... Not sure what you mean. Could you clarify, please? (Do you want to change the color, etc.?) As you can see from the code above, it's actually three different elements styled to appear as one.

Share this post


Link to post
Share on other sites
bibson

No the colors are fine for now. I want to have a solid line definition on the box edges/borders on all four sides. Example Thanks.

Share this post


Link to post
Share on other sites
bryan-hadaway

We can try updating Kate's code to: ` div.tags{border:4px solid #666 !important;border-bottom:0px !important;border-top:0px !important} .related_post_title{background-color: #f0f0f0;margin-bottom:0px !important;border:4px solid #666;border-bottom:0px;} .related_post{background-color:#f0f0f0 !important;list-style-type:none;margin-left:0px !important;padding-left:20px;border:4px solid #666;border-top:0px;border-bottom:0px;padding-bottom:20px;margin-bottom:0px !important;} ` Let's see how that looks. Thanks, Bryan

Share this post


Link to post
Share on other sites
bibson

Thanks Bryan. This what your code gives me. Almost there I would like the pointed lines all round the box. Thanks

Share this post


Link to post
Share on other sites
Kate

Hey bibson, Try this:

div.tags{border:4px solid #ddd !important;border-bottom:0px !important;border-top:0px !important}
	.related_post_title{background-color: #f0f0f0;margin-bottom:0px !important;border:4px solid #ddd;border-bottom:0px;}
	.related_post{background-color:#f0f0f0 !important;list-style-type:none;margin-left:0px !important;padding-left:20px;border:4px solid #ddd;border-top:0px;border-bottom:0px;padding-bottom:20px;margin-bottom:0px !important;}

This is using the original color code I think you had, and the one I used earlier (#ddd). If you want the darker shade, then replace #ddd above with #666. Let me know if you have any questions.

Share this post


Link to post
Share on other sites
bibson

Catrina, Kate, Bryan - Thank you all for your help. Happy with the current outcome. Keeps that section tidy in my articles Appreciate your help :-)

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now

Sign in to follow this  

×