Step 1 – Remove the Existing Site Title and Description

Before you can place your logo in the upper left corner of your new WP-Magazine Theme driven site, you’ll need to make some space for it. So, lets remove the existing site title and description.

1. In your WordPress control panel, click the Presentation link; then click Theme Editor. On the next page, you should see see the stylesheet.css template.

2. Scroll down till you see this block of code:
#header .sitehead-left p {
margin:0;
height:26px;
line-height:26px;
}

You’ll want to change it to this:

#header .sitehead-left p {
position:absolute;
text-indent:-999em;
margin:0;
height:26px;
line-height:26px;
}

3. Next, scroll down till you see this block of code:
#header h1 {
font-size:20px;
margin:0;
line-height:24px;
height:24px;
}

Change it to this:
#header h1 {
font-size:20px;
margin:0;
line-height:24px;
height:24px;
display:none;
}

Then, be sure to click “Update File” in the bottom right corner.

Step 2 – Upload and Install Your Logo

Now that we have some room in the top, left corner, you’ll need to upload your logo to your WordPress theme. The best place to upload your logo is the /images folder, which within WP-Magazine theme folder.

After the image is uploaded, again, open your stylesheet template and scroll down till you find this block of code:
#header .sitehead-left {
width:50%;
float:left;
margin:0;
padding:0;
}

You’ll need to change it to this:
#header .sitehead-left {
width:50%;
float:left;
margin:0;
padding:0;
background:url(images/filename.gif) top left no-repeat;
height:60px;
}

Be sure to change the “filename.gif” above to the actual filename and file extension of your own logo. Also, you may have to adjust the height, depending upon the dimensions of your logo.

Just be sure to click the Update File button after any changes.

Step 3 – Optional – Link Your Logo to the Home Page

If you’d like to link your logo to your home page, open your Header template, and find this block of code:


<div class="sitehead-left">
<h1><!--p bloginfo('name');--></h1>
<!--p bloginfo('description');--></div>
 

Change it to this:

 

Then update the file.

And that should do it.