Friday, December 27, 2013

Creating A Box Frame Around Individual Posts

If you notice, I have a box around my individual blog posts. I like it this way because it separates it from the rest and to me looks more stream-lined.

If you'd like to do this, below is the code on this blog.

border: 2px solid #000000;
margin-top: 10px;
padding: 10px;
width: 750px;

I'll explain to you what each is for and you can change it up however you please.

Background:#ffffff - This is the hex code for white.

Border: 2px. solid #000000;
This is your border around your post. 2px is the size of the border in terms of thickness. #000000 is the hex code for black.

Margin-top: 10px; - This is pretty self-explanatory.

Padding: 10px; - However, the padding is on the inside of your box.

Width: I have different widths on all my blogs. Just play with it to see how wide you want your box to be.

To add this to your blog go to Design> Layout>Customize>Scroll down to Advanced>Then scroll down to Add CSS. In the CSS box, add the code I gave you. Sometimes if I hit the space bar it shows up if it hasn't already.


That's it!

No comments:

Post a Comment