Header repeating in "Pretty Pictures" theme

[samantha]

I'm trying to upload a custom header in the "Pretty Pictures" theme.

I've created a PNG file at the recommended size, then I go to Appearance > Header to upload it, it looks fine in the back end of WordPress - but when I check it on the site it's like there's two versions of the image.

Help?!

http://glynisgosling.com/

[David Chu]

Hi,
That's a real brainteaser. Not obvious at all. I can see what, but not clearly why. There's a DIV in your code for backstretch, a script that is used for full page backgrounds, and is likely used for the default photo gallery processing in this theme. When I delete that DIV, the duplicate goes away. Its CSS (or Javascript) must have caused the duplication - I've seen a heck of a lot of CSS in my time, but never that exact problem before.

I see an excellent clue, though, in the theme's demo. The big photo up in the header is not the typical header background image. So it's getting into the header some other way, via that Backstretch thingie, whose directions can presumably be found in the theme's directions in your download area.

I'm guessing that the typical background header image will not be compatible with this theme.

Cheers, Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[samantha]

Thanks for your reply, Dave. I rechecked the theme instructions and what I did follows that:

"Set up Header area: The large image at the top of the site is a header image. Visit Appearance -> Header to upload your own. For the text, go to Appearance -> Widgets. Drag a text widget to the Header Right widget area. Fill in with whatever text you like."

If I delete the DIV to fix the header, do you think it will mess up other things? Or perhaps I can add the header image directly into the file manager?

Thanks for your help. I'm still a newbie doing copy/paste/test 🙂

Sam

[David Chu]

Sam,
It sounds like you did follow the instructions just right. I don't have that particular theme, otherwise I'd dig into it and find the answer. See, when I deleted the DIV, I was doing it in "test", using the Firebug browser tool - actually deleting it is a somewhat bigger deal. For instance, the way the theme is structured, I'm guessing the "backstretch" thing will be on every page.

Maybe official support will fill in the blanks for you with a quicker solution, you could try opening a ticket.

Dave

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[samantha]

Thanks again, Dave, I have done exactly that! Let's see what they say 🙂

[samantha]

Here's the reply I got from StudioPress support (pasting it in case anyone else has the same issue):

In your functions.php file, look for the custom header function.

Change it to this:

/** Add support for custom header */
add_theme_support( 'custom-header', array(
    'default-image'     => get_stylesheet_directory_uri() . '/images/header.jpg',
    'flex-height'       => true,
    'flex-width'        => true,
    'header-text'       => false,
    'height'            => 550,
    'width'             => 990,
    'wp-head-callback'       => '__return_false',
) );

The only difference is the last line and the comma after 990. It is very important that the function look exactly like the above to prevent an error on your site.

[David Chu]

Ah! Mystery solved. 🙂

---

Dave Chu · Custom WordPress Developer – likes collaborating with Designers

[Author]

Posts