Outreach Theme: Using a custom logo/header

[lgeraty]

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!

[dev]

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

[lgeraty]

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

[dev]

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

 

[mbreslow]

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

[tonyjalicea]

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?

[dev]

What were you expecting? Looked good to me.

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

Genesis Responsive Header Customizer Update

[tonyjalicea]

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

[dev]

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.

[tonyjalicea]

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?

[dev]

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.

[John]

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 😉

[Kim]

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

[Kim]

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

[dev]

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

[Kim]

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

[dev]

#header {
background: #000;
}

will put your header background to black.

[Kim]

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

[Kim]

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

[dev]

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