Generate Header Issues (post 2.0 upgrade)

[chloethomas]

Hi,

I'm not a coding whizz - but with ok instructions I can usually succeed!

I use the Generate theme at eCommerceMasterPlan.com.
Pre-upgrade I was using the Genesis Simple Headers plugin to load a 150 pixel high, full width header image.
With a widget'ed banner sitting above it.
And to stop the header text appearing I had emptied those fields in "general settings".

As soon as I upgraded I had the header image appearing twice.
Tried various things, with the following results:
- header perfect, BUT sitting far left of screen, not over the website
- header in a space above the header bar
- header in the right space, but the header space not allowing the header to show through (grey bar along the bottom)

Could someone please let me know what code I need to put into the css sheet so I can get a full width 150 pixel high header image to show in the right place, without any text on top of it, and with a widget banner?

Thanks in advance
Chloe

http://eCommercemasterplan.com

[Brad Dalton]

Do you want the header image where the title is and the banner in the header right widget?

Like this:

---

Tutorials for StudioPress Themes.

[chloethomas]

Hi Brad,

Your link's not working. But I want an image 150 pixels high filling the header space, with a banner in the header right widget.

C.

[Brad Dalton]

Link works fine for me.

What modifications have you made to any of the code?

The 2 tutorials i have written result in what you can see in the above screenshot. Is that exactly what you want?

---

Tutorials for StudioPress Themes.

[chloethomas]

Hi Brad,

When I click the link it's starting with an ip address - and isn't working

"127.0.0.1:4001/wordpress/wp-content/uploads/2013/07/new-header-image-sizes.png"

As far as I'm aware I've made no modifications to the code - try to avoid doing that as much as possible!
I like the simple life!!

Chloe

[Brad Dalton]

Here's the tutorial http://wpsites.net/web-design/customize-header-logo-banner-images-in-metro-theme/

---

Tutorials for StudioPress Themes.

[chloethomas]

Sweet! Thanks Brad - will give that a go!

[chloethomas]

Hi Brad / All,

Have tried to follow the tutorial - BUT the code doesn't match that of the generate theme. So I'm stumbling.

Got to here:

https://www.dropbox.com/s/j4uzclt8cd98fj7/header%20nightmare%202%20140813.PNG

which leaves me with 2 issues:
1. header aligned to the far left
2. widget in a whole area below the rest of the header.

This will be live on the site for a bit whilst I try and find another solution - but if anyone has any suggestions that would be greatly appreciated.

Thanks
Chloe

[chloethomas]

OK,

Further progress.

I've now got to this:
https://www.dropbox.com/s/ty05toehfj6z3jm/header%20nightmare%203.PNG

So,
- header image in the right place
- text over it that I'd like to remove
- widget in the wrong place and blocking some the header

(right now I'm going to turn off the widget and delete the text in General settings so that I can leave my site looking ok)

BUT that's a very temporary solution
- I still want to know how to remove the text
- I still want to know how to get the widget in the right place

FYI the way I've got the header to show is using the following:

#title-area {
background: url(http://ecommercemasterplan.com/wp-content/uploads/2012/10/ECMP-Header.png);
padding: 20px 0 0;
height: 120px;
width: 450px; /* 450px / 960px */
}

No idea if that's good / bad / horrendous. But that's what I've done.

Thanks in advance for any help!
Chloe

[Brad Dalton]

Do you want your header right widget aligned with your logo image?

What are you going to put in the header right widget?

To remove the text, simply remove it from the general settings and the setting on the Custom Header page.

---

Tutorials for StudioPress Themes.

[chloethomas]

I want my right header widget to appear where you'd expect it to appear.
I will be putting a promotional banner in it.

If anyone from Genesis read these - really pleased to see that the latest Genesis update doesn't fit the problems with the Generate header either.

[Brad Dalton]

The best way to add a header image in the Generate theme is to upload it to the images folder and make sure its:

1. .png file format
2. named logo

This way it replaces the default logo which is already included in your theme and also includes CSS to position it correctly.

You will then need to modify the CSS code in your style sheet and change the height values from 100px to 150px.

If you also want to add an image to the header right widget you will also need to change the height value to match which in your case is 150px.

You cannot use a header image which is 960px in width and also add a image to the right widget so you will need to crop your logo to about 560px width and then upload it to your images folder in your child theme.

I wouldn't add it to your CSS as you have done as the CSS for a default logo is already included in your style sheet.

You can then add the HTML for your header right widget image which should be about 340px width and 150px height.

If you want to use a full width header, you will need to change the values for the width as well.

Here's the full tutorial i published on this today. http://wpsites.net/web-design/add-logo-or-full-width-header-image-to-generate-theme/

---

Tutorials for StudioPress Themes.

[Author]

Posts