Community Forums › Forums › Archived Forums › General Discussion › Header issues
Tagged: header, help, lifestyle Pro
- This topic has 17 replies, 3 voices, and was last updated 10 years, 2 months ago by wizz6113.
-
AuthorPosts
-
December 9, 2013 at 7:16 pm #77931ChrisGregoryMember
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/December 10, 2013 at 1:04 am #78001nutsandboltsMemberCan 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+December 10, 2013 at 9:08 am #78054ChrisGregoryMemberThis 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?December 10, 2013 at 9:10 am #78055nutsandboltsMemberAre 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+December 10, 2013 at 9:11 am #78056nutsandboltsMemberRe: 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+December 10, 2013 at 10:00 am #78064ChrisGregoryMemberSo 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?
December 10, 2013 at 10:02 am #78066ChrisGregoryMemberOk try looking now.
http://k1massagetherapy.com/December 10, 2013 at 10:02 am #78068nutsandboltsMemberStill 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+December 10, 2013 at 10:27 am #78074ChrisGregoryMemberHmm... Are you using Chrome?
What would cause the update not to show?
Have I messed up some browser friendly code?December 10, 2013 at 10:28 am #78076nutsandboltsMemberLogging 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+December 10, 2013 at 10:33 am #78081nutsandboltsMemberFind 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+December 10, 2013 at 6:31 pm #78210ChrisGregoryMemberI tried this, but nothing changed?
I cleared my cache, but still nothing changed?Is there anything else I should be changing?
December 10, 2013 at 8:53 pm #78238nutsandboltsMemberAre 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+December 11, 2013 at 7:33 pm #78470ChrisGregoryMemberWow! 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.December 12, 2013 at 2:38 pm #78611nutsandboltsMemberOh 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+December 12, 2013 at 7:40 pm #78698ChrisGregoryMemberThank 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?
December 12, 2013 at 7:59 pm #78702nutsandboltsMemberI 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+January 30, 2014 at 7:41 am #87813wizz6113MemberI 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.
-
AuthorPosts
- The forum ‘General Discussion’ is closed to new topics and replies.