Outreach Theme: Using a custom logo/header

[dev]

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.

[Kim]

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.

[Kim]

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

[dev]

Add these to the body and the header CSS selectors:

body {
background-color: black;
}


#header {
margin-left: 50px;
}

(change 50 to whatever you like)

[Kim]

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

[Kim]

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

[dev]

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

[Kim]

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.

[Kim]

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

[dev]

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.

[Kim]

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

[dev]

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.

[Kim]

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!

[dev]

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