Exercise 6


Total time: 1 hour
Resources needed: FireFox, Firebug
Goal: To customize the look and feel of your site.

We have made it to the last step of building your own blog. I feel like a proud parent on the first day of school. You are so close to hitting publish on that first blog post.

Today’s exercise is a fun one.
I know what you are thinking, aren’t they all fun? Absolutely, but today we get to start to make our site look and feel how we have always intended.

In today’s exercise we will be working with a bit of code, our layout, and some custom pieces. It will be a chance for you to learn more about your theme and wordpress. I am excited for you to get to see just how possible it is for you to make your site function how you want it to function.

The first step we need to take today is to open your FireFox browser. Now if you do not have FireFox that is okay. It is a free download that you can find right here:
Once FireFox is open you are going to search the term “Firebug extension”.

Now this tool here is only available on FireFox, but is one of the most powerful tools I have ever used. This has completely taught me how to develop and design sites. I have been building sites for the past 3 years and every single project has involved firebug.

Once firebug is installed we will start to go through some of the different ways to use this powerful tool.

Check out this video tutorial on Firebug

*|YOUTUBE:[$vid=sAQQ7zr-ZTU, $max_width=500, $ratings=N, $views=N, $border=N, $title=N, $trim_border=N]|*

You have your site installed, activated, and loaded. You are ready to go. But like anything you take out of the box you want to make it your own. Customizing your wordpress blog has never been easier and I am going to show you how.

We are going to focus on three main areas: Color, Header, Add-Ons.
These all have a heavy influence on your site layout and design and can really add to the overall aesthetics on your blog.


1. Color
Have you ever tried to re-decorate your house? If the experience is like most, picking the paint scheme is where you start. A blog is very similar to a house. It will be holding all your thoughts, feelings, and emotions. This will be the one page of the Internet that you stare at the most.

When picking the colors of your site it is important to look at color scheme. To find a pallet that not only you like but has been put together on purpose. There are several places to find great color pallets that you can work with.
Here are three places to look:

Now that you have your color scheme you are going to want to go in and start customizing a few sections of your blog. We are going to change a couple of colors: your background, links, and titles.

Open up firebug and grab the selector tool. Once this tool is selected hover over the background of your site. You should see in the CSS section something that says:
body { background: #fff}
This is where we will be changing the color to your main dominant color of choice.

I would highly recommend sticking with something light here. But whatever you choose this is the place to make that change. You can also insert a picture background or texture by simply using the code: body {background:url(image_url_here.jpg) repeat transparent;}.

2. Header
Your header is one of the first things people will see when they enter your site. This is the spot that is at the top of your blog and has your blog’s title, a description (optional) and some navigation options. The header is a great way to give people a quick peek at what your site is all about.

Most templates allow you to upload images straight in to your header. Some will have spaces where you can enter in text for your header. Either way, it is good to add in some personal touch to your header.

DIG DEEPER: 10 Great Examples of Blog Headers

3. Ad-Ons
This is where you start to add in some custom features to your site. There are tons and tons of options that are out there for blog ad-ons. Most are great, some are terrible. There really isn’t a guideline on how many ad-ons you can have for your site. The general rule of thumb here is to focus on what your site needs verses what you think might be cool.

If you post a lot of pictures then you might want to add in a Pinterest ad-on.
If you write statements or advice then you might want to add in a tweet quote ad-on.
If you focus on tutorials and how-to’s then you might want to add a stumble upon ad-on.

Ad-ons can greatly enhance your site but can also take away from your site. When thinking about what you will add, try and focus more on the function of the ad-on and how it will be beneficial to your reader.