How to Add Your Own Logo to WP-Magazine Theme
Adding your own logo to WP-Magazine Theme is a snap. Read on for the simple steps to get it done.
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 {
position:absolute;
text-indent:-999em;
font-size:20px;
margin:0;
line-height:24px;
height:24px;
}
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><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</div>
Change it to this:
<div class="sitehead-left" onclick="location.href='<?php bloginfo('url'); ?>';" style="cursor: pointer;">
<h1><?php bloginfo('name'); ?></h1>
<p><?php bloginfo('description'); ?></p>
</div>
Then update the file.
And that should do it.
Hi Doug:
It's a bit tricky, but I think this will work.
1. You probably added this to the About section on ...
Hi Michael,
how can I get the theme to use the new Identicons instead of the gravatar picture, which it currently ...
Hi Michael, Thanks for a great theme. Its fantastic and yor mods are always explained perfectly.
I've set up including adding ...
Hi Michael,
Thank you for the great instructions. They worked perfectly!
Comment by jamie on 18 December 2007:
I just purchased this great theme about an hour ago and have just added my custom logo - took less than five minutes.
now that’s a good theme with good support in short a winner!
Comment by Walt on 23 December 2007:
What size should the image be?
Comment by Scott Noon on 28 December 2007:
I love this theme. It’s really great. Michael, how can I make the logo in the upper left also link to “home”? That seems to be a common convention people are looking for.
Scott
Comment by Innovation Catalyst on 14 January 2008:
Excellent theme. How wide of a logo (in pixels) can your script accommodate?
Comment by Steffan on 18 January 2008:
This theme is totally flexible and there are plenty of options to add cool elements to make it unique. I purchased the theme a while ago and I love it. Michael helped me add a couple of header/logo-like elements to the top of the blog which really adds something to the blog design.
Thanks again Michael!
Comment by Frank on 24 January 2008:
I’m about to buy a single license for my site HeroesARG.com. I’d like to know if you’re going to post how the last commenter, Steffan, added the image and ad squares to the right on his site, http://www.digitalentrepreneur.net/.
Thanks!
Comment by Mark @ TheLocoMono on 29 January 2008:
Yes. Yes! YES! What size should this image be? I have a standard size logo but can easily resize it to meet the header space.
Comment by Allen on 1 February 2008:
How wide can the header be? Can we change the website background image and how?
Comment by daminc on 2 February 2008:
Hi there.
What if I want to make not an img logo, but to make my title linking to the home page?
By default it looks like this:
http://www.daminc.ru/
What should I do to make my title a link, but without it being invisible when mouse hovers above it?
Comment by daminc on 2 February 2008:
oh. IE6 looks ok, bit in Opera and FF blog title disappears when mouse hovers above
Comment by Allen on 4 February 2008:
I like what frank did with his banner. Is it possible to show the rest of the instructiuon for how this can be done.
Comment by Michael G Cohen on 4 February 2008:
Hi Michael,
Was wondering the same question as Frank previously asked. Could you offer some help or a tutorial on how the commenter, Steffan, added the image and ad squares to the right on his site, http://www.digitalentrepreneur.net/.
Thanks for your great design.
Comment by Russell West on 7 February 2008:
How do I add an “alt” tag to my header. If this is even were it goes. pretty new at this
#header .sitehead-left {
width:100%;
float:left;
margin:0;
padding:0;
background:url(images/RNWest LLC.jpg) top left no-repeat;
height:300px;
}
Very nice theme
Comment by brad miller on 8 February 2008:
2 questions - 1. I increased the height of the #header .sitehead-left to compensate for the size of the logo I added to the header. As a result - I have created a space beneath the dynamic page navigation (sitehead right) that I would like to place a banner add. How would I go about this?
2. It looks like we are having a lot of contributions to the modification of the this particular theme - I can only imagine that there will be more. Do you think a PHP bulletin board would serve our small community better?
Comment by Monica on 11 February 2008:
Loving this theme. I would also like to put a banner across the way Frank did, but I’m a total newbie and would love to see these instructions all together so it’s “easier” to follow (sorry frank). Thanks!!
Comment by Frank on 12 February 2008:
Ya agree, I think a board of some type should be brought into the mix.
Comment by DaNnY bOy on 13 February 2008:
Hi,
I was just wondering because where the main header is, I have made this 100px high so next to that where the page links are their is a considerable amount of space under that. I was wondering if it would be possible to put something like the google search bar in this area? If so… how?
Thanks.
Comment by DaNnY bOy on 13 February 2008:
Oh and also so it is allined to the right.
Thanks again.
Comment by James Doyle on 25 February 2008:
Hello -
This will certainly sound like a beginner question…it is for sure. My question concerns the “px” - is that short for pixels? If so, when I take a photo and change the pixels from 1000px x 700px (example) to 100px to 100px for the thumbnail, the picture becomes horrible. You can’t even see it. Please tell me this is a simple answer and that I’m missing something!
Thanks,
James
Comment by Ginger on 9 March 2008:
I’m all done! Finally got the logo to work by uploading the logo to WP instead of adding it to the images folder. Michael you’d be proud!
Comment by Oscar on 9 March 2008:
Hey Michael. Bought the theme today and been modding all evening. Brilliant theme if I may say so. I don’t know what happend really, but when I did the steps to insert my logo instead of tagline everything went fine except for one small detail;
For some reason the page is now exceeding it’s width, and IE is adding a scroll in the bottom, even though nothing is too wide. Any suggestions?
Comment by Mike Wong on 10 March 2008:
Michael - I recently purchased this template and really like it. I’m configuring everything right now and would like to know if there’s a way to replace the 300 x 250 banner ad block with a photo stream from flickr. Has anybody else done this? Any suggestions? Can it be replaced with a WP Widget?
Thanks!
Mike
Comment by Frances palaschuk on 11 March 2008:
Almost done, I have this theme linked to a family news site - it has wp outage on it so I can’t post the link yet. I love, love, love it… Thanks!
I am running into some areas that I cannot get past and I see that others are experiencing common issues. Mostly with aligning the header image. I want created a header image that spreads across the whole top. I want to put the pages above it and have the menu bar below. Does anyone know how to do this?
Comment by Gary Cheeseman on 14 March 2008:
Hi, is it possible to have a different 300×250 Banner Ad on each page?
Comment by Joel on 16 March 2008:
OK, then. I know nothing about PHP and this is my first ever Wordpress install, so if I can customize this theme, anyone can. After several hours of trial and error, there are some things that I can share that may help you, too. This will probably all be basic stuff, but to a newbie like me it could be helpful, so here we go:
To start with, the “header” is the part of the theme that is above the horizontal category links. It is divided into two parts: the left and the right. By default, the left side contains your the blog title and description or your logo and the right side contains today’s date and the links to your blog’s pages and RSS feed.
As Michael says in the article, when you update the code it will look like this:
#header .sitehead-left {
width:50%;
float:left;
margin:0;
padding:0;
background:url(images/filename.gif) top left no-repeat;
height:60px;
Just from looking at it, we can tell that we’re updating the left side of the header, which makes sense because that’s where we want the logo to go. Let’s look at some of the other parts of the code. Notice that the width is set to 50%. This means that whatever you put in the left side of the header can extend halfway across the page and no further. Just a little further down the file, we see similar code for the right side of the header:
#header .sitehead-right {
width:49%;
float:right;
margin:0;
padding:0;
}
The width of the right side is set to 49%. Combined with the left side’s width of 50% we’re up to 99%. I don’t know where that last 1% goes, but it doesn’t really matter. By default, half the header is allocated to the left side and the other half to the right.
But what if you want a wider logo that takes up more space? Well, it’s just as simple as you’d think: simply change the percentages to however you would like. I made sure they added up to 99% just in case there was a reason for it, so you might want to do that, too. Remember that if you make the left side too big there won’t be enough space for the text on the right side and it will run off or break and look ugly. In other words, if you want to make the left side any bigger than about 75% you’ll want to edit or delete the code at the bottom of the header.php file to remove the text from the right side to make room for your large logo or whatever else you’re putting on the left side.
Let’s return to the code from the left side of the header:
#header .sitehead-left {
width:50%;
float:left;
margin:0;
padding:0;
background:url(images/filename.gif) top left no-repeat;
height:60px;
}
Now, we already looked at the width, so let’s look at the height. By default, the height is set to 60px. This means you have 60 pixels of height to work with. So basically, with the default width and height, you could have a logo that is approximately the size of a horizontal banner: 468×60. It’s actually a little shorter and wider than that, but you get the idea. Now, that’s not a whole lot of space to work with, but you don’t always need a lot of space. The Nokia Blog uses this theme and their logo is only 39 pixels tall, but it is still very effective. Still, if you want a taller logo, simply change the height from 60px to whatever you want. You may want to make it slightly more than the height of your logo, just so it doesn’t run into the category list.
The only problem with changing the height of the left side is that it automatically changes the height of the right side, too. So you’re left with a lot of white space on the right side, and the links to your blog’s pages and RSS feed will be hovering higher than you want them on the right side.
To fix this, I found this code:
#topnav ul {
background:#fff;
float:right;
height:24px;
line-height:24px;
padding: 0;
margin: 0;
list-style-type: none;
“Topnav” is the part of the page where those hovering links are kept. Now, we want them down closer to the category links the way they were before, so we just have to add some “padding” to the top. Basically we’re telling the page to leave a certain amount of space above the links to push them down as far as we want. To do this, simply change “padding: 0;” to “top-padding: 100px;” or however many pixels you need. You’ll probably need to try a few numbers here until you get the one you want. This will push those links down farther so they’re not hovering in mid-air.
So basically, by doing those steps, your logo can be any size you want! I can’t be certain that this is exactly the technically correct way to do this, but it worked for me, so I hope it works for you, too!
Comment by Michael on 17 March 2008:
So far so good. Great template and excellent instructions.
Thank you.
Comment by NickD on 24 March 2008:
I do have one final question. Is it possible to have different header/logo images for different categories?
If so how is this done. I know I can create an animated gif so the images change on their own or the use of flash. However I was wondering if I can have a different image per category.
Comment by Al on 28 March 2008:
Hello,
I love the Theme but i have a few questions, How do i change the background colors in Features articles and how do i change the font style? Thanks!
Comment by sudarmaji on 22 April 2008:
Hello
#1. How can we make our header, if clicked, direct us to, say, our affiliate link?
#2. How create, say three different images at header, in which two of them have their own affiliate links?
Thank
Sudarmaji
Comment by Tricia on 22 April 2008:
I’m a newbie and working to change the color scheme. I can’t find where to change the color of the post titles from blue to something else. Can anyone point me in the right direction? Thanks in advance.