Designing your own blog with & CSS, part 2

Now that you’re all set up, it’s time to get down to the actual editing!

1: open up the CSS Style sheet of Toolbox by going to appearances > editor.  The file in the editing window should automatically be the stylesheet; if it isn’t just select stylesheet (style.css) from the list to the right.

2: Take a moment to look over the code.  It’s okay if you don’t know what everything is, we’ll do a nifty little trick to help figure out what everything is.  We’re going to add a black border around all the block elements to help figure out where they are.

3: Copy the following code:

 border: 1px solid black;

Now add the code to the following elements: #page, #content, #main-widget-area, #colophon, #site-title, #site-description and #access.

Make sure you add the new code under the CSS already excisting for each element but INSIDE the curly brackets for that element, so it looks like:

#page {
    display: block;
    margin: 1em;
    border: 1px solid black;

(our new code is in bold for you to see what to add)

If you accidentally put the code outside a curly bracket or delete a curly bracket by mistake, it will cause all sorts of problems, so keep an eye on them!

4: Click ‘update’ and then check out your blog.  You’ll see that all the elements now have black borders around them – handy, isn’t it? You can now tell where everything is!  Now we’ll add a little code to center the content into the middle of the browser window.

5: Edit the #page element and add the following code:

#page {
     display: block;
     border: 1px solid black;
     width: 900px;
     margin: 0px auto;

Note that the previous margin declaration has been removed for the new one. Select ‘update’ to save the changes then check your blog to see the new positioning.

6: It’s looking good but notice how the font is all pressed against the sides of the boxes? We need to add some padding to the elements.  For that, we’ll be using this code:

padding: 15px;

Add the above code to #content, #main-widget-area, #colophon, #site-title, #site-description and #access.

Update the page and see how the blog looks now.

7: You’ll notice that the font looks much better, but now the main widget area is now floating underneath the content – whoops, we don’t want that.  So what happened? The padding added more pixels to each element, therefore making them larger than the 900px page width, and to compensate the widget area was pushed down.  Let’s fix that by shrinking the main widget area’s padding from 15px to 8px:

#main .widget-area {
     float: right;
     overflow: hidden;
     width: 220px;
     border: 1px solid black;
     padding: 8px;

Check your blog again and you’ll see the widget area is back where it’s supposed to be.

8: Notice that the assess element (it’s the bar above the content and main widget area that has the ‘home’ and ‘page’ links currently) is too wide for the rest of the page box.  Once again, our extra padding is the culprit.  Change the code to the following:

#access {
     background: #eee;
     display: block;
     float: left;
     margin: 0 auto 1em;
     width: 870px;
     border: 1px solid black;
     padding: 15px;

9: Now that we have our elements nicely spaced and arranged, let’s work on editing the body of the page.  The body is the area behind our page, the space that takes up either side of the elements.  However, there is no code in the CSS file to manipulate the body so we’ll have to add it ourselves.  Go to the top of the file (right above the code for the #page element) and add the following code:

body {      background-color: #999999; }

10: Check your blog and you’ll see that everything is gray now – whoops, we want our elements to have a white background, at least for now.  Take the following code and add it to #page:

background-color: #FFFFFF;

The background of your blog should now be white.

In the next part we’ll talk about more design, add a header and begin to stylize our blog!


Posted on February 16, 2012, in Coding and tagged , , , . Bookmark the permalink. Leave a comment.

Leave a Reply

Fill in your details below or click an icon to log in: Logo

You are commenting using your account. Log Out /  Change )

Google+ photo

You are commenting using your Google+ account. Log Out /  Change )

Twitter picture

You are commenting using your Twitter account. Log Out /  Change )

Facebook photo

You are commenting using your Facebook account. Log Out /  Change )

Connecting to %s

%d bloggers like this: