Adding Logo to Left of Site Title and Tagline: Twenty Twelve

Hi, you can add a graphic or logo to the left side or anywhere in the header using the header image option under the appearance tab.

And then find the code for that inside your header.php file, which
will be this:

<?php $header_image = get_header_image();
		if ( ! empty( $header_image ) ) : ?>
			<a href="<?php echo esc_url( home_url( '/' ) ); ?>"><img src="<?php echo esc_url( $header_image ); ?>" class="header-image" width="<?php echo get_custom_header()->width; ?>" height="<?php echo get_custom_header()->height; ?>" alt="" /></a>
		<?php endif; ?>

and place it besides the hgroup tag at the top and then set it with css.

Thank you for the tip. Now the issue I need to resolve is to remove the box-shadow around the image I just placed in the header. The way I did this to remove the shodow from images placed in pages or posts was to add the following to the style.css file:

.entry-content img {
 /*remove the border on images in posts and pages */
 box-shadow: none;
 }

What would I need to add to the css to fix this in the header?

Are you using a child theme?

Yes. I have a child theme and a child style.css.

Then can we see a site using this child theme please? Preferably a page that contains the image issue you mentioned above.

Then you have already sorted it out,need to find the class attached to the header image and do the same for it also.
or you can post a link here and we’ll take a look.

This did the trick when added to the style.css:

img.header-image {
 /*remove the border on images in posts and pages */
 box-shadow: none;
 }

great…Pls close this topic if reolved…cheers:)..

Thank you for the help. Answers above.

wp-21- Can you explain the css. My logo image sits over the title and tag, I would like it to sit to the left of both the tile and tag.

sorry: My theme is Twenty Twelve working in a child theme. Thanks.

Hi, Pls post the link to your site..

https://palettefoot.com

Hi,
You just need to float that logo to the left in the CSS.You can do that by creating a div around your code for the logo, giving it some class and then in your style.css file you can assign that class a float:left property.
like this,

<div class="logo">
<a href=""><img src="yourlogo.jpg" /></a>
</div>

in your style.css file:

.logo {
float:left;
}

When you will give that div a float left property then the title and tagline will automatically stick to its right.
And do all of this in a child theme only , do not edit source files directly.

Cheers.:).

Wow- I tried several different ways to include the new code and several different things happened.
What confuses me; do I replace the php for the image in the header.php with the html you supplied me with above? Does it go into or above the hgroup tag?

Secondly, under the /*Header*/ partition in the css, isn’t the command to float left already given with:
.header-image {
margin-top: 18px 24px, 0, 0;
margin-top: 1.28571429rem 1.714285714rem, 0, 0;
image-align
float: left;
}

If not, where do I insert that command?

I read somewhere that twentytwelve is difficult to customize because of it’s readiness to reformat for all the devices. So, or not so?

…. and, by the way, I sure appreciate the help.