Outreach Theme- Need help with Header image size

[coffeehauscat]

Hi I am having an issue with header image,

the theme didnt have a logo image area, so I had to put the logo on the header image, when I upload it it wants me to crop it, and it dient fit in the space. So there is a white space to the right of the header image.

 

I also tried going in the css and coding in the correct file with the correct size, and it wont work either. I really need help its for a client job that needs to be finished yesterday,

Tonia

[Susan]

In your theme functions php, look for this:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
	'width' 	=> 	1060,
	'height' 	=> 	120
) );

Adjust the size to suit your header size.

[briegger]

I'm having the same issue with OutReach! I've adjusted the sizing in function.php but it's still looking wonky! Any help would be appreciated.

http://triolandscaping.com/new/

Thanks!

[briegger]

So I may have found a solution, not sure if it's the right way or not but here's what I did I edited the style sheet:

I found this post http://www.studiopress.community/topic/how-to-add-a-logo-to-outreach-theme-header-left/#post-24374

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

I added the "background-position: center !important;" and changed the "min-height:120px;" to 300px.

[briegger]

Ok, I'm still struggling!! Here's a link to my image http://triolandscaping.com/new/wp-content/uploads/header.png

It's 960x169. I've changed the the header image in both the function.php file as well as the stylesheet but it's cropping half of my image off? Any help would be appreciated!

http://triolandscaping.com/new

Thanks 😉

[Brad Dalton]

Looks o.k to me. Did you resolve this:

You might want to change the padding under your header image:

Line 468 in your child themes style.css file:

#inner {
    background: url("images/inner.png") repeat-x scroll 0 0 #000000;
    clear: both;
    margin: 0 auto;
    overflow: hidden;
    padding: 30px;
}

You can change the padding value from 30px to anything.

---

Tutorials for StudioPress Themes.

[briegger]

Thanks Brad! I'd actually like some padding on the top of the header, not the bottom but my biggest problem right now is the header that you are seeing is only half of it! When I went into appearance >header, it cropped the right half of it off. Not sure why???

[wp guy]

Are you making sure you're uploading the proper sized image? If you're uploading an image that's too large then yes, it'll crop it.

[Brad Dalton]

The settings must be wrong. You need to go into your style.css file and make them the same as what you have in your functions.php file.

Another way to fix this is to paste the HTML for the header image into the genesis_header hook field after installing the Genesis Simple Hooks plugin.

---

Tutorials for StudioPress Themes.

[dreamscape]

Brad, et al! Thank you! The Genesis Simple Hooks plugin got me ALMOST there. I now see a logo over the tiled background, however when I turn off "Show header text with your image." in the Appearance>Header area, the text goes away (good) but the header squashes down to a smaller format and the background around the image goes white.

Any ideas? http://www.cepipelineservices.com/

[Brad Dalton]

What code did you paste into the hook field?

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Have you made any changes to the CSS, PHP or images?

Did you add a header using the Custom Header function under Appearance?

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Did you check unhook genesis header in Simple Hooks?

---

Tutorials for StudioPress Themes.

[dreamscape]

Brad, thank you for your response! Sorry for my delay. I neglected to check the email notification for this thread.

1. This is the code I pasted into the genesis_header hook field:

<img src="/wp-content/themes/outreach/images/blue/logo.png" alt="C E Pipeline Services logo" width="173" height="195">

2. No changes to the CSS, PHP or images beyond adding the following to the style.css:

#genesis-responsive-slider {
background-color:  #000000!important;
border: 10px solid #EEEEEE!important;
margin: 0 auto;
padding: 10px;
position: relative;
}

This was to center the slider because it wasn't centered when displayed in my 1280 x 1024 window.

3. I didn't have 'unhook genesis header' checked, but checking it showed no effect.

Thank you for any insight you can provide!

Matt

[Brad Dalton]

I had the same problem on my own site and also on a clients site and the way i fixed it was to unhook the header and remove the default header image.

On my own site i don't use a header and on the clients site i added the header using the Simple Hooks plugin but it was centred and not full width.

I have seen this problem before a few times but i do not understand what causes it at the moment. No doubt i will work it out at some stage and share the details.

---

Tutorials for StudioPress Themes.

[dreamscape]

Brad,

Am I able to use the Simple Hooks plugin to set the header background color? Or to set a pattern? Or does that need to happen in a custom.css file? Even if I could turn that background color to black and remove the header image while keeping the logo, that could help.

[Brad Dalton]

You could delete the header from your child themes images folder and change the background color of your header.

---

Tutorials for StudioPress Themes.

[Brad Dalton]

Line 33 in your child themes style.css file is where your problem is.

I just deleted the block using Firebug and it fixed the problem.

Backup the file first.

On line 183, i would change the

min-height: 120px;

to match your logo which has increased the default height.

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

To this:

#header {
    background: url("images/header.png") repeat-y scroll center center #090909;
    margin: 0 auto;
    min-height: 195px;
    overflow: hidden;
    width: 100%;
}

To this:

#header {
    background: url("images/header.png") repeat-y scroll center center #090909;
    margin: 0 auto;
    min-height: 195px;
    overflow: hidden;
    width: 100%;
}

---

Tutorials for StudioPress Themes.

[Brad Dalton]

You should also do this with the custom header code height which is 120 in your child themes functions.php file:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
	'width' 	=> 	1060,
	'height' 	=> 	120
) );

To this:

/** Add support for custom header */
add_theme_support( 'genesis-custom-header', array(
	'width' 	=> 	1060,
	'height' 	=> 	195
) );

*Don't delete the default header image.

---

Tutorials for StudioPress Themes.

[PageH]

I also got a little closer to solving this by using simple hooks, but the header image is now chopped of about 40% on the right.  Here's the site:

 

http://blairholmes.com/newsite/

Ideally I'd like to have a full white header with this image where it is or pushed left slightly to align with the main menu.

Also, is there a way to allow the logo (circle part) to "cut into" the menu strip slightly?

This is about the fourth method I've tried to solve the Outreach header issue--frustrated!

[Author]

Posts