Add graphic next to blog title in twenty ten 1.2

I’m sorry, but you really should not alter the default theme. Making a child theme takes about 10 minutes, so you really should do it.

As for your image, You have a number of options:

1. Create an image of the correct size and set it as the header image. The advantage is that you can do this in the Dashboard. The disadvantage is that it’s a foreground image (I think) and so it would be tricky to overlay it with the header text. It also has to be a specific size
2. Create an image of the size you want and add a foreground image to the html in header.php. Aligning this with text can be tricky, but it’s not too hard. The disadvantage is the need to alter the header.php file rather than just do everything in CSS
3. Create a background image of the correct size and alter the styles in your child theme’s style.css to load this as your header background. The advantage of this is that it’s easy to overlay it with your header text

HTH

PAE

I tried option 2, since it seemed to be the path of least resistance. I have added an img tag to header.php right after <div id=masthead>, and I get the image above the text. Do you think this is because the img tag is in the wrong place, or maybe because the size of the image pushes the text to the next line? Putting it in places after that seems to make the image disappear or break the code.

I also tried to make a new element and float it to the left of the site title, then move the site title over by however many pixels are necessary. I actually tried defining the new element:
#your-mom {
float: left;
img: url(/blog/wp-content/uploads/2011/08/logoberry.jpg);
}

But it’s not displaying, so there must be more to it. Do I have to call your-mom (snicker) in header.php?

Sure, like I said, I plan on making a child theme after I finish this. It’s a nonissue until I’m even able to upgrade WordPress, so I feel no urgency.

There are two things happening here. Firstly you’ve put the image directly in the #masthead div, where it is followed by the #branding div in which the text resides.

A div is a block element, so it starts a new box immediately below the previous one. So your text comes below your image.

If you put the image in the #branding div in header.php (and possibly reduce the width of the #site-title div in your CSS), you should get the site title on the same level as your image. You may need to muck about with the site title’s padding to get it exactly where you want it.

You’ll then have to position the site description.

HTH

PAE

Thank you for your help. I have just spent a few minutes putting an image in between pretty much every element in the following chunk of code:

<div id="branding" role="banner">
				<?php $heading_tag = ( is_home() || is_front_page() ) ? 'h1' : 'div'; ?>
				<<?php echo $heading_tag; ?>
id="site-title">
					<span>
						<a href="<?php echo home_url( '/' ); ?>" title="<?php echo esc_attr( get_bloginfo( 'name', 'display' ) ); ?>" rel="home"><?php bloginfo( 'name' ); ?></a>
					</span>
				</<?php echo $heading_tag; ?>>
				<div id="site-description"><img src="/blog/wp-content/uploads/2011/08/logoberry.jpg"><?php bloginfo( 'description' ); ?></div>

<?php

In all cases but one, the image didn’t show up at all. In one case, when the img tag was in between these elements:

<<?php echo $heading_tag; ?>
id="site-title">

it broke the code that displays the site title.

I know it’s a valid path to the image because I tested it in the masthead div first. To address concerns about the width of the site title, I also used a smaller pic than my working logo (a Facebook profile pic actually). Do you have any idea what could cause the image to just vanish? I am pretty sure that I didn’t screw up the code that came with the header.php on installation, because I checked it against the local files.

Just put the image immediately after <div id="branding" role="banner">.

If it doesn’t show up, it probably means WP can’t find it. And that’s probably because you’ll need a full URL to the image. Relative URLs don’t work too well in WP. What would they be relative to?

Just put it where I suggest for now and let us know so we can go and look to see what’s happening.

Cheers

PAE

OK, I did that. I expanded the relative URL to a full one, but it’s still not displaying. File is here:
https://www.wordofthelaird.com/blog/wp-content/themes/twentyten/header.php

Loading that page gave me a “call to undefined function” error, so it may not help you much. I’m out of my depth with PHP. I’d be happy to copy in the code if you like.

The reason is because of this rule:

#branding img {
  display: none;
}

If you change that to:

#branding img {
  display: inherit;
}

(Add the new rule to the end of your style sheet (style.css))

… then all your images should show up.

Your next decision is which one(s) to keep. When you’ve decided that, we can sort out how to position things like the title and description text.

HTH

PAE

On a completely unrelated matter, you also need to check out the html in your text widget. It’s invalid. This may make cross-browser compatibility a problem for you at some stage.

Cheers

PAE

Thank you, that did indeed enable me to see the image. The reason I did that was to hide the blog’s banner image. I commented it out (in HTML in header.php) instead.

Now I have an interesting problem where the image has a black border on top and bottom, though not on the sides. It shows up anywhere inside the branding div but not if I put the image in the masthead div, so I think it must have something to do with the PHP code. It’s definitely not a link and not to do with the margins of the site title.

As you suggested, I also would like to reposition the title and image slightly relative to one another, but I think the black border makes that hard to judge right now.

There was no need to mess with the html to get rid of the header image. You can do that in Dashboard –> Appearance –> Header

As for the border, here’s the style rule that governs it:

#branding img {
  border-bottom: 1px solid #000000;
  border-top: 4px solid #000000;
  display: inherit;
  float: left;
}

Just get rid of the border-bottom and border-top properties.

Of course, all these changes you’ve made will only last until a twentyten security upgrade or something comes out that overwrites the files you’ve changed. At that point you’ll be back to square one.

That’s why it’s important to use a child theme.

Cheers

PAE

Thank you for your help! It seems to be working. Now that I am done with the design work, as I said, I will make a child theme (and also back stuff up to my hard drive).

Good for you!

After you’ve created your child theme and activated it you should reinstall twentyten to get it back to its original state.

Remember only to put the style rules you need (i.e. the ones you’ve changed) into your child theme style sheet (after the @import statement). You may need to reformulate some of them because you’ll be overriding in your child theme style sheet, rather than working on the original.

If you need any more help, just ask.

Cheers

PAE