By popular demand, I decided to publish a short tutorial on how to add your own logo to the Simple Balance WordPress theme.

So, in order to achieve this we’ll walk through the following steps:

  1. The logo image guidelines and instructions;
  2. Files to update;
  3. Code explanation.

The logo requirements

In order to achieve the best implementation quality of your logo, you should consider saving you logo with a transparent background. A .gif file will work well, and if you’re using a software like Adobe Photoshop to edit your images, when saving the image (File > Save for Web & Devices…), setting the Matte to white would be good. This will ensure that the margins of your transparent background logo will look good on Simple Balance’s light background color.

As you can see on the live demo, I’ve used a .gif image for logo, and basically, this is what you are about to achieve with your own blog too.

Once you’ve saved your image, upload it to the “img” folder inside the Simple Balance theme folder (wp-content/themes/simplebalance/img). From here, we’ll link to it later.

Quick tips

  1. Save your logo with transparent background;
  2. Save it with a white matte;
  3. Keep the width below 200 pixels, as that’s the maximum space reserved for the logo;
  4. Write down the size of the image (width and height), as we’ll use them later.

Adding the logo in your CSS stylesheet

Now that you have uploaded the logo on your FTP, it’s time to add it to the design. There’s only one file you’ll need to update, and that is style.css, which is located in the root folder of the theme.

Open the file with a text editor (a basic Notepad should suffice) and look for this lines of code:

.topLogo h1 a, .topLogo h2 a {
	text-decoration: none;
	color: #d90202;
}

Select the whole block and replace it with the following code:

.topLogo h1 a, .topLogo h2 a {
	text-decoration: none;
	color: #d90202;
	display: block;
	width: 156px;
	height: 42px;
	background: url(img/name-of-your-logo-file.gif) no-repeat;
	text-indent: -9999px;
}

Be careful

… and don’t forget to replace the values in this new block of code with the real values of your image, as follows:

width: 156px;

The ‘156’ value should be the actual width of your image. ‘156’ is only a width I used as an example. Do not delete the ‘px’ text as it defines our measuring unit.

height: 42px;

The ’42’ value should be the actual height of your image. ’42’ is only a width I used as an example. Again, be careful with the ‘px’.

background: url(img/name-of-your-logo-file.gif) no-repeat;

Replace ‘name-of-your-logo-file.gif’ with the actual name of your logo file.

The ‘display’ and ‘text-indent’ properties are meant to ensure the correct display of your logo, so you should not worry about those, but keep them. They are important.

Once you finish the editing, save the file and reupload it to your server. Et voila, the logo should be there the next time you check you blog.

A good idea…

…would be to go to the Simple Balance Control Panel (WP administration > Design > Simple Balance 2.1/2.0 CP) and uncheck the box that displays the blog description. Of course, only if you think it affect the design, or the new logo in a bad way.

If you have any questions, i’ll be happy to answer in the comments section of this post.