• Skip to main content
  • Skip to forum navigation

StudioPress

  • Shop for Themes
  • My StudioPress

Forum navigation

  • Home
  • General Genesis Discussions
  • StudioPress Themes
  • Genesis Blocks
    • Genesis Blocks
    • Genesis Custom Blocks
  • Retired Themes
  • FAQs
  • Forum Rules
  • Internationalization and Translations
  • Forum Bugs and Suggestions
  • Forum Log In

Are You Using The WordPress Block Editor?

Genesis now offers plugins that help you build better sites faster with the WordPress block editor (Gutenberg). Try the feature-rich free versions of each plugin for yourself!

Genesis Blocks Genesis Custom Blocks

Outreach template: issues with the header image

Welcome!

These forums are for general discussion on WordPress and Genesis. Official support for StudioPress themes is offered exclusively at My StudioPress. Responses in this forum are not guaranteed. Please note that this forum will require a new username, separate from the one used for My.StudioPress.

Log In
Register Lost Password

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

This topic is: resolved

Tagged: outreach header

  • This topic has 25 replies, 5 voices, and was last updated 10 years, 1 month ago by JingDoc.
Viewing 20 posts - 1 through 20 (of 26 total)
1 2 →
  • Author
    Posts
  • April 8, 2013 at 9:22 am #33987
    mpoyner
    Member

    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.

    April 8, 2013 at 9:35 am #33990
    mpoyner
    Member

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

    April 8, 2013 at 9:50 am #33993
    mpoyner
    Member

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

    April 8, 2013 at 5:30 pm #34151
    mpoyner
    Member

    Bump. Can anyone help?

    April 8, 2013 at 8:24 pm #34191
    susanlangenes
    Member

    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

    April 8, 2013 at 8:28 pm #34192
    susanlangenes
    Member

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

    Totally no problem to keep the dark grey squares.

    April 8, 2013 at 8:34 pm #34193
    mpoyner
    Member

    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!

    April 8, 2013 at 8:47 pm #34197
    susanlangenes
    Member

    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.

    April 8, 2013 at 8:53 pm #34199
    susanlangenes
    Member

    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.

    April 8, 2013 at 9:13 pm #34203
    mpoyner
    Member

    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.

    April 8, 2013 at 9:18 pm #34204
    mpoyner
    Member

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

    April 8, 2013 at 9:30 pm #34206
    susanlangenes
    Member

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

     

    April 8, 2013 at 9:30 pm #34207
    mpoyner
    Member

    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.

    April 8, 2013 at 9:31 pm #34208
    mpoyner
    Member

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

    April 8, 2013 at 9:32 pm #34210
    susanlangenes
    Member

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

    April 8, 2013 at 9:41 pm #34212
    mpoyner
    Member

    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!

    April 8, 2013 at 9:46 pm #34213
    susanlangenes
    Member

    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; }
    }

    April 8, 2013 at 9:55 pm #34214
    susanlangenes
    Member

    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!

    April 8, 2013 at 10:02 pm #34217
    mpoyner
    Member

    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.

    April 8, 2013 at 11:36 pm #34228
    susanlangenes
    Member

    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
Viewing 20 posts - 1 through 20 (of 26 total)
1 2 →
  • The topic ‘Outreach template: issues with the header image’ is closed to new replies.

CTA

Ready to get started? Create a site or shop for themes.

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2023 WPEngine, Inc.

Products
  • Create a Site with WP Engine
  • Shop for Themes
  • Theme Features
  • Get Started
  • Showcase
Company
  • Brand Assets
  • Terms of Service
  • Accptable Usse Policy
  • Privacy Policy
  • Refund Policy
  • Contact Us
Community
  • Find Developers
  • Forums
  • Facebook Group
  • #GenesisWP
  • Showcase
Resources
  • StudioPress Blog
  • Help & Documentation
  • FAQs
  • Code Snippets
  • Affiliates
Connect
  • StudioPress Live
  • StudioPress FM
  • Facebook
  • Twitter
  • Dribbble