Outreach template: issues with the header image

[mpoyner]

I'm having issues here. Can't understand why the uploading of a header image works the way it does in this theme.

Here's my site: http://69.195.124.88/~bridgeo9/

I uploaded an image that is 1060x120 (very strange, btw, to force the image to be this size. Why can't one just upload an normal logo image, with transparent background, that overlays the existing background? Then it could be whatever the size of the logo is. I don't understand this as a development choice?)

You can see on my site, that once I do this, it doesn't really work anyway, even if I do use the large dimensions. The right hand side of the header shows some grey color in the right 3rd of the header, and when you resize the browser window to simulate different device sizes, the text of the menu items in the header keep moving left and eventually just go right over the top of the image, making it impossible to read them or the logo.

I don't understand this at all.  I don't want to sound harsh, but if the header logo area isn't responsive, then this isn't a "responsive theme". Maybe I'm just missing the correct way to do this? Yes, I could hand code it. But I shouldn't have to, after purchasing what is already supposed to be a responsive theme. Anyone who knows how to fix this, I would appreciate any help that can be given.

[mpoyner]

Hmm. I just realized something else: if you keep resizing the browser window down to about mobile screen size, the grey color that I'm seeing appear at right in the header will then start creeping out from under my uploaded header image and the menu items from the header then can't be read very easily at all.

I don't see this color at all if I get rid of the header image altogether and just use text in the header logo area. But I can't do that. Our logo really needs to be used here instead of just a text name. (I imagine this is how most churches and organizations would want to use this template also.)

[mpoyner]

Hmmm. I'm wondering now if what I'm seeing as the custom header settings is just a WordPress custom header setting, and not a Genesis-specific setting?

If so, then how does one upload a logo to use instead of the text? I've googled it and saw a few pages talking about how to do it, but in my Genesis theme settings I don't have the toggle switch that's described on those pages for "dynamic text" or logo (such as in the directions on this page: http://www.blogmagician.com/how-to-add-custom-logo-genesis-child-theme/)

[mpoyner]

Bump. Can anyone help?

[susanlangenes]

Hey there. I just helped someone else with a similar issue with this theme so I thought I'd stop in.

I agree that it's a little wonky the way this theme's header/logo upload works. But we can get around it.  Couple questions:

1. Do you want your logo centered, or would it work for you to have it on the left? I ask because with it centered, we'll have to make some adjustments to the header widget area too.

2. Do you want to keep the dark grey squares pattern behind the logo or would you be cool with a solid color behind the logo?

If left-aligned and solid background is ok with you, that'd be the easiest fix.  Here's a screenshot of what that would look like:

collagetrio.com/design/ss.jpg

[susanlangenes]

Actually wait, here's another screenshot: collagetrio.com/design/ss2.jpg

Totally no problem to keep the dark grey squares.

[mpoyner]

Thanks so much for your help Susan!

Yes, left-aligned is perfect, and I'd like to keep the background pattern.

Will this way of fixing it keep the good responsiveness that the rest of the theme has?

Thanks so much!

[susanlangenes]

Yes, this'll keep the responsive-ness.  We might have to make a tweak or two.

For purposes of testing I downloaded your logo and did a very rough job of removing the background, so you're welcome to use that image if you want but I suspect you'll want to create a better one. It should be 400px in width.

First, go back to Appearance > Header and remove the header image. This will make the site title text reappear.

Next, upload your transparent-background logo via FTP to wherever you want, or via the WordPress media uploader, and get the url for the image.  Then, in your stylesheet for the Outreach theme (or some other custom stylesheet if you have one), put the following, replacing the url for my sloppy image with yours (and you can totally use mine for now if that's easier):

#title-area {
background: url(http://collagetrio.com/design/BOLheaderBG1400.png)no-repeat;
background-repeat: no-repeat;
}
.header-image #title-area { text-indent: -9999px; }

And once that's done come back and let's have a look to see what else needs to be tweaked.

[susanlangenes]

Oh woops, just realized an error.

.header-image #title-area { text-indent: -9999px; }

should be

.header-image #title-area a { text-indent: -9999px; }

And for purposes of consistency you might want to make the previous declarations specify .header-image #title-area as well, rather than just #title-area.  Should work either way though.

[mpoyner]

I have a transparent PNG at 400px that was already up there in my media library for use.

I put the code into the stylesheet for the Outlook theme. (I assume it should go there instead of in the Genesis theme styelsheet/s?)

I"m not seeing the image show up right now. Don't think I did anything wrong, but I'm going to double check.

[mpoyner]

Ok, I had to take .header-image off of the first #title-area line, then the image showed up.

[susanlangenes]

cool... give me a sec and I'll have another couple css rules for ya

 

[mpoyner]

So what I have now is:

#title-area {
background: url(/wp-content/uploads/2013/04/BOLwhiteTextShadow400.png)no-repeat;
background-repeat: no-repeat;
}
.header-image #title-area a { text-indent: -9999px; }

I turned off the header text to see what happens and the logo looks good, but the white space is showing at right in the header.

[mpoyner]

great, thanks (didn't see your last post until after I posted)

[susanlangenes]

Ok here, try this:

#header { background: #090909 url(images/header.png) center repeat-y!important; }

And yes, you're absolutely right to put the CSS in the child theme's stylesheet (not the Genesis stylesheet).

[mpoyner]

Wow, thanks so much! This is perfect.

I see a couple of places where I'd like a bit more negative/white space around the logo (just a few pixels). I assume the best way is to just build it into the PNG itself, rather than trying to play with margin CSS around the image?

I can't thank you enough for this help.

Have a great evening!

[susanlangenes]

Hey looks great!

If you'd like the logo to be centered for smaller screens, the same way the header widget is, then add this:

@media only screen and (max-width: 960px) {
#title-area { float:none; margin: 0 auto; }
}

[susanlangenes]

I can't figure out why our posts are in opposite order... oh well.

I'd actually recommend playing with the CSS rather than adding negative space to the image.

Put these lines in and you can have fun with adjustments:

.header-image #title-area {
height: 120px;
width: 400px;
}
You might also add media queries and play with those.
Cheers!

[mpoyner]

Actually, yeah, I was just going to ask about something with the media queries. How do I get the image to shrink as the viewport is getting smaller? Create a number of images and pull them in with media queries? Or is there a way to make the one image dynamically shrink? Whatever is the best practice is the way I'll do it.

[susanlangenes]

I think in your case a bit of a combination of the two will work best. The image will shrink if its width is specified as a percentage, but I'm thinking that doesn't really need to happen until the screen is around 500px wide.

What do you think? Can you specify how you'd like it at various screen sizes?

[Author]

Posts