• 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, 10 months ago by dev.
Viewing 14 posts - 21 through 34 (of 34 total)
← 1 2
  • Author
    Posts
  • July 15, 2013 at 11:48 am #50819
    dev
    Participant

    oops, forgot the !important attribute

    #header {
        background: #090909 url(images/header.png) center repeat-y;
        margin: 0 auto;
        min-height: 120px;
        overflow: hidden;
        width: 100%;
    background-color: black !important;
    }
    

    see if that works for you.

    July 15, 2013 at 11:50 am #50821
    Kim
    Member

    I appreciate your help. Adding background-color: black; to the #header section made no change to the gray color. In another post (there have been so many I've tried) they said to put background-color: #090909 !important;. Now when I do that in the #header section it does change it to the black color, BUT, then I loose my logo.

    July 15, 2013 at 11:53 am #50822
    Kim
    Member

    Awesome....background color is correct and logo remains. Progress. Now, how would I get the logo correctly positioned (it's too far left)?

    July 15, 2013 at 12:02 pm #50826
    dev
    Participant

    Add these to the body and the header CSS selectors:

    body {
    background-color: black;
    }
    
    
    #header {
    margin-left: 50px;
    }
    
    

    (change 50 to whatever you like)

    July 15, 2013 at 12:18 pm #50831
    Kim
    Member

    Humm, well that worked to move the logo into the correct position. However, it also made most of the logo unclickable (to go back to the homepage) and it didn't just move my logo over, it moved my right header menu over & the right header widget over (which no longer fits in the header section).

    July 15, 2013 at 12:20 pm #50832
    Kim
    Member

    Seriously, I've never had issues w/ a header like this in all the sites I've designed.

    July 15, 2013 at 12:28 pm #50834
    dev
    Participant

    That's because WP was poorly designed when it came to headers. The entire 'mess' was a add-on and poorly thought out.

    You can save yourself a hell of a lot of trouble if you will simple make yourself a banner of whatever width you need containing your logo and background color and put it in the header CSS. Delete the logo from the WP page. Bypassing the screwy WP header stuff and just doing headers via CSS is often the the easiest thing to do.

    To be honest, WP does not work well with fluid-design (grid) themes (in my opinion) and I believe that outreach is more 'fluid' than what works well with WP (again my opinion... I could be wrong.)

    July 15, 2013 at 12:41 pm #50839
    Kim
    Member

    Yes, you would think that! That was what I did at first. I always create my own header for my sites. Initially, I created a header the 1060 x 120 suggested size and uploaded it in Appearance > Header like you would normally do. I ran into a lot of problems when the header would either 1) not center on the site, 2) or would completely not show up at all or 3) the black background turned gray! Even though my code says to center it and have the black background background: #090909 url(images/header.png) center repeat-y;

    After going thru the forums I learned that removing the header from Appearance > Header then either uploading my header via FTP or thru Media and pasting in the address. (I think this is what you're saying???) Still one thing or another wouldn't work.

    That's the only reason why I thought doing a smaller logo would work. Guess not.

    Maybe I will start from scratch and try that route again, but I was working on that for a week.

    July 15, 2013 at 12:57 pm #50841
    Kim
    Member

    Okay, so, I removed the header in Appearance > Header. Then I went into Media and deleted all instances of any other logos/headers uploaded and I uploaded my original header that I was trying to get to work in the first place. I copied that URL into the css below and --- lo and behold -- my header does not show up. The background is black, but no header.

    Before when I was trying this, there was someone who suggested making the header 1200 x 120 b/c the original header for the theme is that size. However, in the Appearance > Header section it says use 1060 x 120. When I tried to upload a 1200 x 120 image, the background went gray and there was no header image that can be seen. Seriously...

    #header {
    	background: #090909 url(http://www.newdesignsite.com/wp-content/uploads/2013/07/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 1:14 pm #50846
    dev
    Participant

    You are not seeing it because WP see sees your background as black. Has something to do with what is on the Appearanc/Header page.

    Put in this:

    background: #090909 url(http://www.newdesignsite.com/wp-content/uploads/snrheader1200.png) center no-repeat !important;

    (!important) and it will override what WP has.

    Take out the repeat-y as it screws things up when you make the screen smaller for a cell phone. Put in no-repeat.

    July 15, 2013 at 1:26 pm #50848
    Kim
    Member

    Thank you. At least now I can see the header on my site so I can make some edits! After I added that code to the #header IT CHANGED THE NAVBAR FROM RED TO GREEN! WHAT?? How did that happen??? Nothing else was changed. I'm about done w/ this theme...I love Genesis, but this theme is HORRIBLE! My theme is set to red and I have no idea why it would change my navbar when I just updated the code for the HEADER! Wow....disappointing.

    I appreciate your help very much!!!!!! Really...you've been a great help. =)

    July 15, 2013 at 1:34 pm #50849
    dev
    Participant

    You have it set to green, so you got green:

    #nav {
    background: url(images/nav.png);
    }

    http://www.newdesignsite.com/wp-content/themes/outreach/images/nav.png

    (What were you expecting?) 🙂

    BTW, do you know how to use Chrome's Inspect Element. It will make much of this a lot easier if you can become adept at this tool. Lots of tutorials are on the net to learn it.

    July 15, 2013 at 1:40 pm #50850
    Kim
    Member

    Yeah, I saw that only it's not set for green....it's set for red in the Genesis > Theme Settings. Done for now...can't stand looking at it anymore. LOL.

    I have Firefox Web Developer & Firebug. I use them now and then but I'm not sure how they are work. I know, I need to learn them...it would be better for me and then you wouldn't get asked stupid questions. LOL.

    Thanks again!

    July 15, 2013 at 1:53 pm #50852
    dev
    Participant

    Well, try setting it to something else, save changes, view and see if it changes. Then change to red and see what you get.

    Or just hard-code it in the CSS.

    Something somewhere didn't get updated or is being overridden.

    Or

  • Author
    Posts
Viewing 14 posts - 21 through 34 (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