Easy Blog Design Tips

A couple weeks ago Tauni talked about how your blog is like a house and one of the reasons was the need to redecorate.

Sometimes a color is wrong, and sometimes you just want to change the entire design. I definitely understand this feeling, as I just re-designed all of my blogs AND my sister’s blog, because I just couldn’t stand looking at them any longer!

I’m going to let you in on a little secret that helps me make easy blog design tweaks and believe me, you’re going to LOVE this!  Especially if you know a little bit about CSS.

Before I get into the super awesome secret part, let me explain what CSS is. CSS stands for Cascading Style Sheet.  It’s basically the blueprint for your blog or website.

Each element of the design is usually defined in the CSS file.  Now, I won’t get into a full tutorial of CSS elements, but I promise to write a great CSS guide soon.

Say you’d like to change the color of the text for your post titles. Sounds simple enough, but if you don’t know your way around the CSS file, it can look a bit like Greek.

When I face this situation I pull out my secret tool, and I can find exactly the correct element in my CSS to change.

1. To get this tool, first you need to install Google Chrome.  It’s a web browser like Internet Explorer and Firefox (only BETTER!). Plus it’s FREE!

2. Open your website in Google Chrome.

3. Right click on the element of your page you want to change.  (color, position, spacing, anything you want to change).

4. Select “Inspect Element” from the drop down list that appears.

What will happen next is a little window will appear on the bottom that has your site’s code on one side of the screen and the CSS elements on the right side of the screen.

The very top will be the direct element you had right clicked on. In this example, you can see that the font color for the element is #AAA (which is grey).  You can also see which CSS file you will need to edit (in the case of the included image it’s style.css) and the line that this particular element is in (line 295 within the style.css file).

You can also see that what you will be looking for in the CSS is where it says #featPosts. As soon as you find #featPosts in the CSS file you can change the color from #AAA to #FFF if you want the color white. Here is a good list of the color codes.

If what you want to change simply needs to be nudged over a little bit, you can play with the padding or margins of the element.

Margins and padding is listed in the following order … Top, Right, Bottom, Left.

So when you see something that says padding: 0 10px 5px 0; that means there is no space between that item and the previous item, a space of 10 pixels to the right of the element, a space of 5 pixels on the bottom and zero space on the left.

Before you change anything drastic I would copy the current element and paste it to a notepad file so you have a backup in case the change you make destroys the entire layout.

I also use the “inspect element” feature to find errors in my coding, such as a <div> that is misplaced.  As you hover your mouse over the code on the left side of the inspect element tool you will see the various pieces of your blog highlighted in blue.  You can see if one part is running too far into another, or you can see where the spacing could be off.

Now you should be able to move some furniture around in your “house” without the need to hire a professional “decorator.” If you get in over your head, just let me know, so I can help you out!

 

Sarah is a diehard Microsoft and Dell fangirl and former IT Manager, who now spends her busy days taking care of two small children, consulting  with technology companies and sparring with Apple fans.

Sarah helps bloggers resolve site and server issues and blogs at Tech for Moms and Organized Mom.