Twenty Eleven Header

Do not edit the Twenty Eleven theme. It is the default WordPress 3.2 theme and having access to an unedited version of the theme is vital when dealing with a range of site issues. Create a child theme for your changes. Once your child theme is active, we should be able to help with the customisation.

Your current logo is at:
https://warangashores.com/wp-content/uploads/2011/10/header.jpg

Overwrite with a new LOGO to same path ??

That’s the header image – not a logo.

You said “but the logo seems magnified”. I cannot see a logo on your website, thought you are calling header image as logo. People sometimes call so. You can crop your header image and merge a new LOGo within it or remove site title and sub title and replace with your own logo in header.php and css placement.

Hi Guys,

Sorry, that link will now be obsolete as I’ve created a child theme as suggested by esmi.

The only file I’ve created for the child is the style.css as suggested.

How do I go about adding a logo and removing the standard text from here?

oK – so how large is your logo and where should it be positioned?

Logo is 295 x 68.

Would like it positioned in place of the standard site title info and to line up with the “Home” button.

Upload the logo image (eg. logo.jpg) to your child theme’s images folder and then try adding:

#site-title {background:url(images/logo.jpg) no-repeat left top;}

to the bottom of the child’s stylesheet. Bear in mind that this will look awful at first as there’s some more tweaking still to be done.

Beautiful, the logo has appeared.

I should also add that I would like the logo to link back to Home eventually.

Ah – now you tell me! Add a copy of the parent’s header.php template file into your child theme, edit it and change:

<h1 id="site-title"><span><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a></span></h1>

to:

<h1 id="site-title"><a href="<?php echo esc_url( home_url( '/' ) ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><span><?php bloginfo( 'name' ); ?></span></a></h1>

Then edit the CSS you added and change:

#site-title {background:url(images/logo.jpg) no-repeat left top;}

to:

#site-title a {
display:inline-block;
width:295px;
height:68px;
background:url(images/logo.jpg) no-repeat left top;
}

That’s more like what I was playing around with yesterday, however, I didn’t amend the CSS to define size.

The last thing is how do I remove the site title which is running in front of the logo?

Now try adding:

#branding h1 span,
#site-description {
display:block;
position:absolute;
top:-9999px;
left:-9999px;
}

to your style.css file.

You, my friend, are a legend!

Thanks for your help.