Blog Design Series Lesson #3 – Crafting with Cat Hair

We’ve already decided on our blog layout and colors, but to frame our blog we need to add borders and dividers. These require a little bit of tweaking, unless you are really good at dimensions and math, which I am so not!

Don’t forget to save your template before making any changes!

Make sure you are in the Edit HTML tab under Layout.

We’ll first add a border to the outside of the main wrapper. Scroll down to the section that reads:

/* Outer-Wrapper
———————————————– */

#outer-wrapper {
background-color:#FFFCCF;
width: 880px;
margin:0 auto;
padding:10px;
text-align:$startSide;
font: $bodyfont;
}

On the line after “font: $bodyfont;” and before “}” add this:

border:6px solid #C5E3BF;

Click Save Template.

We have now added a pretty thick, solid, green border around the main wrapper.

Don’t want your border green? Change the color by using the HTML color codes. Want a dotted or dashed line instead of a solid one? Replace the word “solid” for “dotted” or “dashed” and the “6px” to something less, like “2px”.

We now want to put some borders around the text box and both sidebar boxes. First is the text box. Scroll down until you find the section:

#main-wrapper {
background-color:#FFFFFF;
width: 410px;
float: left;
margin-left: 20px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

After “background-color:#FFFFFF;” add this:

border:1px dashed #F08080;

I want my border to be pink (#F08080) and slightly dashed which is why I chose “1px” and “dashed”. Again, you can play around with the thickness of the border by changing “1px” to a higher number. You can also change it to a solid or dotted border, and change the color.

Now scroll a little further down the page and add borders to both sidebars:

#sidebar-wrapper {
background-color:#FFFFFF;

border:1px dashed #F08080;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#left-sidebar-wrapper {
background-color:#FFFFFF;
border:1px dashed #F08080;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Click Save Template.

We can now change the color and look of the dividers. Scroll down a little more and find the section:

/* Posts
———————————————–

Find the section:

.post {
margin:.5em 0 1.5em;
border-bottom:1px dotted $bordercolor;
padding-bottom:1.5em;
}

I’m going to change the border-bottom to a dashed and to green. Next to the section that says “border-bottom:1px” replace “dotted $bordercolor” with:

border-bottom: 1px dashed #8AA37B;

Click, Save Template.

Next, we’ll do the images in our posts. Scroll down a little further to find:

.post img {
padding:4px;
border:1px dotted $bordercolor;
}

Change to:

border:1px dashed #8AA37B;

Click, Save Template.

Now, the sidebar dividers. Scroll down a little further to find the section:

/* Sidebar Content
———————————————– */

.sidebar .widget, .main .widget {
border-bottom:1px dotted $bordercolor;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Again, let’s change the “border-bottom” to:

border-bottom: 1px dashed #8AA37B;

Click, Save Template.

Okay, here comes the tricky part, at least for me! See how close the borders are to the text and picture? We have to change the margins to make it more readable.

I have played around with different numbers to get these the way I want them for my blog. If you change the width of your outer wrapper, side wrappers, header, etc. you will need to change your margins and padding accordingly. If you have a math mind, you might find this to be easy. I don’t so it took me a little while to figure them all out!

First up is the date header. Scroll back to the section we just changed:

/* Posts
———————————————–

*/
h2.date-header {
margin:1.5em 0 .5em;
}

We’re going to change the margin to:

margin:1.5em 1.5em;

See how the date shifted over from the side? Yay! That is what we want.

Next, the text header and comments:

.post {
margin:.5em 0 1.5em;

Change to:

margin:0 .75em;

Now the text:

post-body {
margin:0 0 .75em;

Change to:

margin: .75em 0;

Now the sidebars:

.sidebar .widget, .main .widget {
border-bottom:1px dashed #8AA37B;
margin:0 0 1.5em;
padding:0 0 1.5em;
}

Change to:

margin:0 1em;

We now have to add a few margins. Here we go! Scroll back up to:

/* Outer-Wrapper
———————————————– */

Add the green lines in each section.

#main-wrapper {
background-color:#FFFFFF;
border:1px dashed #F08080;
margin-right: 5px;
margin-left: 9px;

width: 410px;
float: left;
margin-left: 9px;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#sidebar-wrapper {
background-color:#FFFFFF;
border:1px dashed #F08080;
margin-right: 5px;
width: 220px;
float: right;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

#left-sidebar-wrapper {
background-color:#FFFFFF;
border:1px dashed #F08080;
margin-left: 1px;
width: 220px;
float: left;
word-wrap: break-word; /* fix for long text breaking sidebar float in IE */
overflow: hidden; /* fix for long non-text content breaking IE sidebar float */
}

Click, Save Template.

Whew! How does it look? Your three sections should be equally separated, or pretty close.

I’m not really sure how to get the image on the left of my screen in the center. I tend to use HTML codes to place pictures on my blog, not the image widget. I’m going to go over widgets/gadgets tomorrow. I figure that might be a mystery to some!

2 comments