Post Customization with Mindstream theme

[beautyfool]

Hi everyone,

I was hoping to get some help with customizing the posts in Mindstream theme.

How can I change the white space padding of the blog posts? So far it's 40px padding, but when I change it, to say, 25px, the whole content area "shrinks" and is disconnected from the sidebar. How can I change the posts padding and keep the rest in place? (In other words, what I'm trying to do is make the whole blog content area a little more "compact")

Also, how can I remove the little images on the top left hand side of the posts (to show post format)? I don't think I'll be needing it right now.

Thanks so much!
Renee

[Mike]

Hi beautyfool,

To answer your last question regarding post format images, go to your style.css and locate the setting for .post-format-image. It should be around line number 929.

The original looks like this:

.post-format-image {
	-moz-box-shadow: 0 0 5px #bbb;
	-webkit-box-shadow: 0 0 5px #bbb;
	background-color: #ddd;
	border: 1px solid #fff;
	border-right: none;
	box-shadow: 0 0 5px #bbb inset;
	display: block;
	left: -101px;
	overflow: hidden;
	position: absolute;
	top: 0;
}

If you think you might want to use it later, just comment the style out and insert a display: none on it like below:

.post-format-image {
/*
	-moz-box-shadow: 0 0 5px #bbb;
	-webkit-box-shadow: 0 0 5px #bbb;
	background-color: #ddd;
	border: 1px solid #fff;
	border-right: none;
	box-shadow: 0 0 5px #bbb inset;
	display: block;
	left: -101px;
	overflow: hidden;
	position: absolute;
	top: 0;
*/
    display: none;
}

[Mike]

To change the padding on your posts, hopefully this will get you started.

Open the style.css and locate the setting for .post.
It will be on or around line 512.
You should see something very similar to the code below.

.post {
	border-bottom: 5px solid #eee;
	margin: 0 0 25px;
	position: relative;
}

Adjust the left and right margin by something substantial so you see the difference.
Something like 50px like the code below.

.post {
	border-bottom: 5px solid #eee;
	margin: 0 50px 25px;
	position: relative;
}

Then, in the style.css file, locate .single .post around line 518.
Do something similar as you did with .post.

.single .post {
	border: none;
	margin: 0 50px 25px;
}

Lastly, you likely want to adjust the comment area as well.
Again, in the style.css file locate #comments on or around line 1322.
Add the same margin value as you did for the .post and .single .post to match

#comments,
#respond {
	margin: 0 50px 15px;
	overflow: hidden;
}

Hope that is what your after.

[beautyfool]

Hi Mike,

Thank you so much for your help! That was such a good idea about the Post Format Images, thank you!

For the padding, maybe it's easier to show an example of my site, it's at blogforbeauty.com.

As you can see, I have put in a 1px grey border around my blog posts, and I've adjusted the padding for the content inside that border. What I am trying to do now is to "cut off" that extra 20px on the left and right spacing. Would you know what to do?

Thank you so much,
Renee

[Mike]

How about this...

In styles.css go to line number 490 until you find #content.

ORIGINAL CODE
Note the value for the left & right padding at 40px and the width of 600px. You will want to change those.

#content {
	-moz-box-shadow: 0 0 3px #bbb;
	-webkit-box-shadow: 0 0 3px #bbb;
	background-color: #fff;
	box-shadow: 0 0 3px #bbb;
	float: left;
	padding: 25px 40px;
	width: 600px;
}

CODE WITH CHANGES
Try a value of 20px for the left & right padding and a width of 640px.

#content {
	-moz-box-shadow: 0 0 3px #bbb;
	-webkit-box-shadow: 0 0 3px #bbb;
	background-color: #fff;
	box-shadow: 0 0 3px #bbb;
	float: left;
	padding: 25px 20px;
	width: 640px;
}

Hope that helps.

[beautyfool]

Hi Mike,

Thanks so much for this. It worked perfectly and looks great, but I'd still prefer to make my content column a little slimmer. It's looking a little wide now. Would you know how I can still cut off about 40px in width - and is it worth the effort? Looking at the code, I'd need to change quite a bit to change the width?

Thanks again for helping me out,
Renee

[Mike]

Ok, let’s see. How about if you go to line 513 and locate .post & .entry and make the following changes:

ORIGINAL

.post {
	border: 1px solid #e1e0e0;
	margin: 0 0 20px;
	position: relative;
}

.entry {
	padding: 15px;
	margin-bottom: 50px;
}

NEW

.post {
	border: 1px solid #e1e0e0;
	margin: 20px 20px;
	position: relative;
}

.entry {
	padding: 30px;
	margin-bottom: 50px;
}

[beautyfool]

Hey Mike,

Yeah, that's what I did originally, but now there's too much padding around the border of the posts again. :/

Renee

[Mike]

Sorry Renee. Wish I could be of more assistance. You should be able to fine tune with my second post if I'm understanding you correctly. But, I may not be. 😉

[beautyfool]

No worries, thanks Mike. 🙂

There were two parts to my question, the padding, etc, is all good now, but now I am looking to make my left content column less wide overall, I feel it's too wide.

I'll wait if there are other responses, thank you so much for your help previously!

Renee

[Author]

Posts