How To Customize Your Blog

People new to blogging might feel that having a professional blog might not be worth investing in or believe that you need to learn HTML in order to have a nice looking blog.

That’s not true if you know where to look. You can have a customized blog for free.

I’ve made this step by step tutorial for newbies and pro bloggers alike who want to jazz up their blogs a bit.

This tutorial is for WordPress blogs that are hosted with it’s own URL (read part one
“How To Start A Blog” if you’re not sure what hosted means)

If you’re at this stage, you should have WordPress already installed on your website. Let’s begin..

Pimp My Blog

WordPress comes standard with the TwentyTen theme which looks like this when you type in your blog’s URL.

This is the theme I will customize.

As you can see, it looks pretty *yawn* boring. You may want to change the header picture and the colors to suit your taste and branding. The TwentyTen theme is the standard theme when anyone installs WordPress so it’s already active once WordPress starts running on your website.

Changing The Header Image

Log into your WordPress administration panel. If you’ve forgotten, it’s usually www.yoursite.com/wp-admin

Once inside, select “Appearance” tab and then “Header” tab.

It should now show you the current header image. It also says images 940 x 198 pixels will be used as-is. So keep your header images to this size and it should fit nicely.

Most of you may not have Photoshop to make header images (and Paint is too basic), but don’t worry, there are online banner makers to use for free.

The ones I know of are www.puresilvabannermaker.com and www.bannerfans.com/banner_maker.php

Whether you choose Puresilva or BannerFans, when doing the sizing of the header images, make sure it’s 940 by 198 pixels. That’s 940 width by 198 height.

Both banner makers are easy to use. Just type in your website URL, name or whatever you want written, choose the color, size and font. You can add your own image or a stock color background for your banner.

Once you’re happy with the banner you’ve made, save it to your computer. Go back to your WordPress admin panel. Go “Appearance” tab and then “Header” tab. Click “Choose File” and upload the banner/header image that you just made.

Once that’s done, click “Visit Your Site” to see if you like it.

Adding a Background Image or Changing The Background Color

Under “Appearance” tab, select “Background”. If you want to upload a background tile or image, select “Choose File”. If you want a colored background, click “Select A Color” or enter the hex color code that you want.

What’s a hex color code? Hexadecimal codes are 6 digit alpha-numeric code which represents a color. Usually written with a # symbol at the front. Knowing your website or logo’s hex code will make life easier because you can always get the exact color match (think uniform background and logo colors) which is great for branding.

The code never changes – regardless of which website you use it on. For example, white is represented by #FFFFFF whereas black is always represented by #000000

Here’s a free hex color code generator: http://www.2createawebsite.com/build/hex-colors.html

Deleting The WordPress Tagline

Some people don’t mind the tagline but others feel that it sticks out like a sore thumb. If you want to get rid of it, select “Settings” and then “General” tab.

Delete the tagline and click “Update” to save.

Now refresh your website and have a look, the tagline should be gone.

Getting Rid Of Top & Bottom Black Header Image Bars

The TwentyTen theme comes with standard top and bottom bars (which includes the menu bar) that only comes in black. If you want to change the color to match your logo or background, here’s how:

Select “Appearance” tab, then “Editor” tab. Currently, the file you’re looking at should be style.css (if not, select it from the right hand panel).

On your keyboard, hold the Control key (“Ctrl”) and letter “F” and type in the line “branding img”, press enter twice to get to the second “branding img” line (there are two in there – you want the second one). This makes the line much faster to find than going through each line one by one – especially if you’re not familiar with CSS code.

Change the hex code for border top and bottom, as well as for access. Then “Update File” to save.

Now have a look at your website to see if you’re happy with the colors.

How To Add Pages Into The Menu Panel

Select “Page” tab, then click on “Add New” tab.

Now name your page where I’ve circled the “About Us” section. Add content if you want (or you can leave it blank and come back later to change) and click on “Publish” button to get the page live. The name you give your page will also be the URL of the page.

For example, if you name the page “Contact Us“, the URL will automatically be www.yoursite.com/contact-us and show up on your website’s menu bar.

Changing The Menu Navigation Bar Color

Now that I’ve changed the black header image bars and menu bars to blue, and created a new page called “Sample Page”, when I look at the website, the grey font now looks really faint against the blue bar. I also want it to change color when I hover my mouse over it.

Select “Appearance” tab and then “Editor” tab. Hold down Control & F keys and find “access a” and “access ul ul :hover”

Change the hex colors to the ones you want for both the bars and the fonts.

Refresh your website to see if you like the changes.

Below is an example of what the menu bar looks like after the changes were made:

Changing The TwentyTen Theme Footer Bar Color

Not all themes have this footer bar, but the standard WordPress TwentyTen theme does. I don’t mind it, but if you want the color of it to change and match the rest of the website, here’s how.

Select “Appearance” tab and then “Editor” tab. Hold down Control & F keys and find the second “#colophon” and change the hex color.

Then update file to see changes on your site.

How To Remove The ‘Powered By WordPress’ Logo & Link

Some say it’s not nice to remove it but I’ll have to admit, taking it out actually makes the site look more professional. Plus I don’t mind taking it out, because I love WordPress and write about them in my posts recommending them over Blogger – so that far outweighs not having their logo on the bottom of my site.

Select “Appearance” tab and then “Editor” tab. On the menu on the right-hand panel, select “Footer.php”

Hold down Control & F keys and find “div id=”site-generator” OR find the section of code below that I’ve highlighted (click on image below for full view of code).

Delete that whole section and update to save changes.

Refresh your website to see the change.

Giving A Color Background To The Sidebar Widget

I personally don’t like how the TwentyTen theme sidebar is white and undefined (as in no border around it) so if you want to give the sidebar navigation a background color to make it stand out, here’s how.

Select “Appearance” tab and then “Editor” tab. On the menu on the right-hand panel, select “Style.css”

Hold down Control & F keys and find the first “secondary” word you come across.

Copy and paste over the existing code with this code below and put in the hex color you want:

#secondary {
background: none repeat scroll 0 0 #FFFFFF ;
float: right;
overflow: hidden;
padding-left: 0;
padding-top: 10px;
width: 280px;}

Next, hold down Control & F keys and find the third “widget-area ul” and change the margin-left number like below. Do the same for the second “container” you find.

Then click “Update File” to save. Now refresh your website and see if you’re happy with the changes.

FINALLY.. have a look at the result!

Now this looks much more interesting and lively than before – and customized too. The colors are just an example. You can go for a more professional look with greys and blacks or use a green color scheme for eco websites. The sky is the limit!

Check out a variation of the TwentyTen theme below the blue one.

Here’s one I did for a website made for kids:

Hope this guide helps! Any comments or questions are welcome.

Zoe