• 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 Theme: Using a custom logo/header

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 › General Discussion › Outreach Theme: Using a custom logo/header

This topic is: not resolved
  • This topic has 33 replies, 6 voices, and was last updated 11 years, 11 months ago by dev.
Viewing 20 posts - 1 through 20 (of 34 total)
1 2 →
  • Author
    Posts
  • May 22, 2013 at 10:09 am #42213
    lgeraty
    Member

    I'm trying to upload a custom logo/header and every time I do, it looks really messed up. Is there a way to upload a logo that would utilize the original background that is something like 350 by 120?

    If so, how would I do that? Every time I upload it in the header section of the dashboard, it tries to resize it.

    Thanks!

    May 22, 2013 at 11:10 am #42219
    dev
    Participant

    This has to be the most-asked question on this forum. It would be nice for SP to put up a page showing all the different ways to do a logo/header.

    Here is how I do it.

    1. Upload your logo/header to the Media Lib

    2. Find the size (width x height) in px of your logo/header.

    3. In functions.php of your theme add the following code, using your own sizes:

    add_theme_support( 'genesis-custom-header', array(
    'width' => 385,
    'height' => 100
    ) );
    

    4. In WP Admin go to Appearance, Header and choose the file from the Media Lib.

    5. Uncheck the "Show text..." box on the above page.

    NewMedia Website Design

    May 22, 2013 at 12:53 pm #42231
    lgeraty
    Member

    Ah... that makes sense now... when I did the search there were so many different ways that I was completely confused... ha ha.

    May 22, 2013 at 1:13 pm #42235
    dev
    Participant

    Yes, I know about the confusion. I had it too.

    On some themes you can simply upload your logo/banner to the theme's /image directory and rename it to logo.png and it will work.

    Most Gen themes now have support for the "WP way" but you still have to code the size or WP wants you to crop it to some default size or something. All I know is that this code has always worked for us... so far.

    NewMedia Website Design

     

    June 2, 2013 at 2:58 pm #43661
    mbreslow
    Member

    Ok, I did that, but when it goes mobile, it looks AWFUL.  http://www.mainsite.digitaloatmeal.net

    June 18, 2013 at 7:48 am #46518
    tonyjalicea
    Member

    I followed the instructions from "dev" and I still can't get this working correctly. I added the code to my functions.php file, uploaded my logo.png file and unchecked the "Show header text with your image" option and this is what I get:

    http://harbourchurch.tonyjalicea.com/

    What am I missing?

    June 18, 2013 at 8:19 am #46521
    dev
    Participant

    What were you expecting? Looked good to me.

    For mbreslow: Why not try the Genesis Responsive Header plugin:

    Genesis Responsive Header Customizer Update

    June 18, 2013 at 8:20 am #46523
    tonyjalicea
    Member

    I was hoping to have the original textured background behind the logo. Is that possible?

    June 18, 2013 at 8:40 am #46525
    dev
    Participant

    I see what you are saying. You want your logo on top of the textured background image that comes with theme? The best and easiest way to do this is to create a "banner" that has your logo as a "layer" on top of a background image, fused into a .jpg or .png file. Either you need some skills with a graphic program (I use Pixelmator on the Mac, but GIMP works well on PCs) or you should have a graphic person do this for you... won't cost you much.

    Your background is here:

    http://harbourchurch.tonyjalicea.com/wp-content/themes/outreach/images/header.png

    The size is 1200x120 so have your graphics person create a .png file of your logo (maybe with a transparent background) and pop it on top of the header.png and flatten it.

    There is a way you can position your logo on top of the image  with CSS using 'postion,' 'top', and 'left' but it won't be responsive and is not a good way to do it.

    If you are willing to forego the texture, you can always just use a color via

    #header {
    background: url(http://harbourchurch.tonyjalicea.com/wp-content/uploads/2013/06/logo1.png) no-repeat;
    background-color: #F00;
    }
    

    ... but since your logo is not transparent, the white white background will show... but maybe that is a good thing.

    The best way is to create a banner with your logo and background texture all in one .jpg or .png.

    June 18, 2013 at 10:52 am #46564
    tonyjalicea
    Member

    Thanks for your help! I created a graphic with that header image with my logo over it. I inverted the colors and gave it a transparent background. It looks good but I lose the responsiveness (it gets wonky when I drag my browser window smaller) and my header menu drops to the next line.

    http://harbourchurch.tonyjalicea.com/

    Any thoughts on that? Or do I just lose the responsiveness with what I'm trying to do?

    June 18, 2013 at 11:23 am #46573
    dev
    Participant

    For responsiveness, as I said above, try:

    Genesis Responsive Header Customizer Update

    Making a textured graphic background banner works but there are always header responsive issues with most graphics. We always suggest people use a small logo graphic and just choose a background color. Make life easy!

    However, your method might work with the plugin above. Try it and let us know.

    July 4, 2013 at 12:05 pm #49223
    John
    Participant

    Regarding the header - logo issue you might want to give this a try: http://blackhillswebworks.com/2013/05/10/how-to-replace-the-studiopress-background-header-image-with-a-real-image-logo/

    John


    John Sundberg | blackhillswebworks.com
    A WordPress developer’s toolbox: Firebug | WordPress Codex | Google 😉

    July 15, 2013 at 10:51 am #50800
    Kim
    Member

    Oh my goodness! Thank you Dev! I've been messing with this for days! Followed your instructions and got my logo which is 430 x 120 to actually show up! Progress. But it's too far left...I know it's got to be something easy that I'm missing. Any suggestions. Thanks!

    Kim

    Here's my site

    July 15, 2013 at 11:28 am #50807
    Kim
    Member

    ....and now my black background is gone! Grrrr!!!!

    July 15, 2013 at 11:31 am #50808
    dev
    Participant

    Too far left? It's way on the right side of the header... because you but it in the Header Right widget area. Is that what you want? Did you follow the instructions in:

    Outreach Theme: Using a custom logo/header

    above? I don't think so... but I"m not sure.

    If want it on the right and want it more to the right edge you could do (note the minus sign):

    #text-2 {
    margin-right: -4em;
    }
    

    or

    #text-2 {
    margin-right: -70px;
    }
    

    Personally, I think it should go on the left, using the standard WP protocol, but it is up to you.

    Dev
    NewMedia Website Design

    July 15, 2013 at 11:36 am #50810
    Kim
    Member

    No, that's my header widget. My logo isn't showing up anymore on the left. This is really been frustrating.

    July 15, 2013 at 11:37 am #50811
    dev
    Participant
    #header {
    background: #000;
    }
    

    will put your header background to black.

    July 15, 2013 at 11:38 am #50812
    Kim
    Member

    ...and it's got a gray background instead of the #090909....so weird.

    July 15, 2013 at 11:41 am #50814
    Kim
    Member

    Okay, the logo is there now, but the background is still gray (and logo is too far to the left). Here's the code for my header below.

    #header {
    	background: #090909 url(images/header.png) center repeat-y;
    	margin: 0 auto;
    	min-height: 120px;
    	overflow: hidden;
    	width: 100%;
    }
    
    #title-area {
    	float: left;
    	overflow: hidden;
    	width: 430px;
    }
    July 15, 2013 at 11:45 am #50818
    dev
    Participant

    add:

    background-color: black;

    to the #header stuff above.

    #header {
    	background: #090909 url(images/header.png) center repeat-y;
    	margin: 0 auto;
    	min-height: 120px;
    	overflow: hidden;
    	width: 100%;
    background-color: black;
    }
    
  • Author
    Posts
Viewing 20 posts - 1 through 20 (of 34 total)
1 2 →
  • The forum ‘General Discussion’ is closed to new topics and replies.

CTA

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

Create a site with WP EngineShop for Themes

Footer

StudioPress

© 2025 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