Header issues

[ChrisGregory]

I have been trying to upload a custom header for the lifestyle pro theme.

After editing the width and height in the functions php for the theme, and width and height for css for theme, I am stuck with the header not working properly?

Any idea how to upload a custom header. I would like it to be responsive, but the size was 1070px by 180px. Its not fitting properly.

Here is the link to my site: http://k1massagetherapy.com/

Please help

http://k1massagetherapy.com/

[nutsandbolts]

Can you put the image header back in place? It's hard to help troubleshoot without being able to see the header.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ChrisGregory]

This is strange, it shows up on my computer only in Chrome, but not on firefox.
Now at work, its not even showing up period?
Also, my gravatar is missing.

Maybe I should just reload the theme? Now I'm really confused.

What would be the best way to upload a custom header?
How should I do it so the theme still remains responsive?
What pixel size should I use, I used the ruler from web inspector to find 1070px x 180px, but I'm reading that it could be 1140px x 200px?
Can I use simple hooks to upload a custom footer?

[nutsandbolts]

Are you running a caching plugin on the site? If so, that's probably why it looks different on different browsers - if you use W3 Total Cache or WP Super Cache, changes will show to logged in users but will take awhile to show for logged out users.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[nutsandbolts]

Re: the footer, try my Genesis Custom Footer plugin: http://wordpress.org/plugins/genesis-custom-footer/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ChrisGregory]

So I should delete my cache, then you will see what my issues are?
I will check out your footer plug in.

so for the header, let me know what I'm missing.

I change functions PHP file for theme to pixel range desired.
I find #header in CSS and change pixel range to match functions PHP.... what happens if there is no #header in CSS?
Then I should be able to upload a header at set pixel size and it looks perfect?

Anything I'm missing?

[ChrisGregory]

Ok try looking now.
http://k1massagetherapy.com/

[nutsandbolts]

Still just the text title for me. :/

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ChrisGregory]

Hmm... Are you using Chrome?
What would cause the update not to show?
Have I messed up some browser friendly code?

[nutsandbolts]

Logging in to take a look - you should probably edit that post to remove your login info, just to be safe!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[nutsandbolts]

Find this in your stylesheet:

.site-header {
background-color: #fff;
padding: 48px;
padding: 4.8rem;
overflow: hidden;
height: 180px;
width: 1070px;
}

and change it to this:

.site-header {
background-color: #fff;
overflow: hidden;
height: 180px;
width: 1070px;
}

That will get rid of all the green around the header and it should display correctly. The responsiveness is another issue, but let's try to get it on the full size site first.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ChrisGregory]

I tried this, but nothing changed?
I cleared my cache, but still nothing changed?

Is there anything else I should be changing?

[nutsandbolts]

Are you using Cloudflare by chance? If so, that's why the site isn't updating like it should be. You can turn on development mode or set Cloudflare's caching to be less aggressive through your Hostgator CPanel if that's the case.

It's fixed for me:

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ChrisGregory]

Wow! Thanks, I attempted to change cloudfare's settings, but couldn't find them so I deactivated cloudfare.

One question, the header is there, but when I resize my screen, the header is not mobile responsive. Is there other code that I needed to change to keep the responsiveness?

Also, if I decide to change the background to a better color (want to create greater contrast between the header, background, and white area where content is, can I just upload a tiled background and it will cover the entire background or is it more tricky than that?

You're super smart! I appreciate the help!
How many plugins have you developed?
I think you could make some good money working on a schema.org / microdata plugin.

[nutsandbolts]

Oh yes. The responsive header is a whole different animal - you might want to check out this tutorial for Lifestyle Pro: http://wpsites.net/web-design/customize-lifestyle-pro-theme-header-image-area/

I just have one plugin for now... Several ideas but no time to work on them!

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[ChrisGregory]

Thank you! I will read it this weekend.

One last question, what would you recommend the best way for editing CSS for a studiopress site? Should I use firebug, and post changes to notepad, or use dreamweaver?

[nutsandbolts]

I usually just edit my stylesheet in Appearance > Editor in the WordPress dashboard.

---

Andrea Whitmer, Owner/Developer, Nuts and Bolts Media
I provide development and training services for designers • Find me on Twitter and Google+

[wizz6113]

I took your code advice 'nuts & bolts' to adjust my header to a custom one in Streamline Pro.

Basically, I uploaded new size (full width) header jpg to media (in my case 1140px width); then added it to Simple Hooks Plugin (checking remove default header) using html code between <div> </div>; and removed that .site-header padding in the CSS that you recommend.

All worked fine for me. No issues. Seemed simple. But I wouldn't have known the padding bit was the issue in rendering it correctly on the site.

Just to note in case someone else wishes to replace default header (often smaller size than full width) with custom one.

Thanks for this code posting.

[Author]

Posts