Outreach template: issues with the header image

Community Forums Forums Design Tips and Tricks Outreach template: issues with the header image

This topic is: resolved

This topic contains 25 replies, has 5 voices, and was last updated by  JingDoc 1 year ago.

Viewing 15 posts - 1 through 15 (of 26 total)
  • Author
    Posts
  • #33987

    mpoyner
    Participant
    Post count: 21

    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 1060×120 (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.

    #33990

    mpoyner
    Participant
    Post count: 21

    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.)

    #33993

    mpoyner
    Participant
    Post count: 21

    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/)

    #34151

    mpoyner
    Participant
    Post count: 21

    Bump. Can anyone help?

    #34191

    susanlangenes
    Participant
    Post count: 28

    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

    #34192

    susanlangenes
    Participant
    Post count: 28

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

    Totally no problem to keep the dark grey squares.

    #34193

    mpoyner
    Participant
    Post count: 21

    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!

    #34197

    susanlangenes
    Participant
    Post count: 28

    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.

    #34199

    susanlangenes
    Participant
    Post count: 28

    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.

    #34203

    mpoyner
    Participant
    Post count: 21

    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.

    #34204

    mpoyner
    Participant
    Post count: 21

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

    #34206

    susanlangenes
    Participant
    Post count: 28

    cool… give me a sec and I’ll have another couple css rules for ya

     

    #34207

    mpoyner
    Participant
    Post count: 21

    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.

    #34208

    mpoyner
    Participant
    Post count: 21

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

    #34210

    susanlangenes
    Participant
    Post count: 28

    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).

Viewing 15 posts - 1 through 15 (of 26 total)

The topic ‘Outreach template: issues with the header image’ is closed to new replies.