How to get full width banner in News Pro solved

[CDM]

Hi.. this basically works. I found most of the instructions at http://wpsites.net/web-design/news-pro-full-container-width-header-image/

but I still had too much space beneath the banner so I changed this line 1077 in the style.css

The PHP Modifications
1. //* Lines 41 & 42 Change height & width values
2. add_theme_support( 'custom-header', array(
3. 'header_image' => '',
4. 'header-selector' => '.site-title a',
5. 'header-text' => false,
6. 'height' => 190,
7. 'width' => 1170,
8. ) );
The CSS Modifications
Modify the CSS declarations under the Site Header section of your child themes style.css file for these 4 classes.
You’ll find these 4 classes between lines 997 and 1062.
.site-header {
background-color: #fff;
}
.site-header .wrap {
}
.title-area {
width: 100%;
}
.header-image .site-title a {
min-height: 190px;
width: 100%;
}
But at line 1077 change the padding to get the banner to go right across the page

From
1077 padding 0 40px

To

1077 padding 0 0px

http://hcvadvocate.org/wordpress/

[RightNerve]

CDM, THANK YOU SO MUCH!!! I literally have been fighting this for 6 days since I purchased News Pro last week.

I notice that both your site and mine after your mods above, however, still have the too-much-white-space-between-title-and-menu on cell phones.

Have you got any way to address that yet?

Also, the banner shrinks to the cell phone size (yea!) when I look at your site in cell phone portrait mode, but when I turn the screen sideways (landscape), the banner doesn't resize and is too big. (Mine does this too, but again, I made your mods above.)

Any suggestions there? Have you noticed that about your site on a cell phone? OR is it somehow a problem with my cell only?

Thanks so much,

Greg

[CDM]

Hi Greg.. Yup.. Those are the remaining problems! You got it.. So when you or someone else figgers them out.. post them. .. I'm slowly developing the site and as of now I do not know the answers... But.. this forum is a great place and you never know.. Someone might figger them out soon.. and it might be me..

All the best and keep us posted

CD

[RightNerve]

Your reply just now was helpful because knowing I'm not the only one seeing these issues means it's still a problem and not just me messing something up.

But you got the foundation done here. Thanks!.

I'm stunned StudioPress refuses to offer a full-size banner option THE WAY MOST WEBSITES HAVE HAD FOR 2 DECADES NOW. I realize they want all their sites to be scaleable to cell phone size, and of course that's a great goal, but they should trust us to have banners that are readable when the banners automatically shrink. To eliminate the full-size, scaleable banner option altogether just makes it SO frustrating for us to figure out how to force it, especially those of us who are not WordPress pros.

I love StudioPress, but this issue seems excruciatingly limiting for us.

Greg

[CDM]

Hi Greg.. Have you asked the support people at StudioPress? I will eventually; I'm just giving them a rest from all the bugging I've been doing. But they have been very quick to respond. Also this forum. It might be something simple in the css, or it may involve a php tweak. Php is beyond me. Css I can do at an intermediate level.

CD

[RightNerve]

Yes and the amazing thing is I got a NO IT WOULDN'T BE DYNAMIC AND BE AS VISIBLE ON SMALL SCREENS- to which I think, isn't this something MOST PEOPLE WANT ANYWAY? Make it dynamic!

If we create a banner that isn't readable when it shrinks on a cell phone, that's OUR problem, but give us the ability!

I also pointed out a bug in the Lifestyle Pro theme (the first menu option does not automatically center when you create the sample theme, requiring a code fix) and the answer was, "Check the forums."

Again... my 8 days or so with StudioPress have been a mixed blessing, mostly I LOVE the themes. But I'm unsure why they would be such sticklers on the banner/heading issue, and if I did point out a bug, agreeing it's a bug or telling me I was wrong (turns out I was right, it was) would be better than not owning up to it and sending me to the forums. The forums are great for things, but to verify a bug??? That's sort of on them.

G

[CDM]

Mobile issue is now fixed.. Hello All: I contacted StudioPress support and they were great. They send me the following code changes (add/modify to what I put above) for the style.css Now there is no huge space below the banner on my phone. I haven't tested it on a tablet yet, so if any of you have a tablet and want to test it (or an iPad) please let me know!!!

Here the code changes message from StudioPress Support:

We usually suggest using the default logo size as this displays best on mobile devices.

You will want to look for this code in your style.css file:

.header-image .site-title a {
background-position: center top !important;
min-height: 190px;
width: 100%;
}

and change to this:

.header-image .site-title a {
background-position: center top !important;
background-size: contain !important;
min-height: 190px;
width: 100%;
}

You can try adding a new media query to the bottom of your style.css file after the last } bracket. This should help reduce the space and you may need to adjust this to have it display correctly. (make sure to include both closing }} brackets):

@media only screen and (max-width: 480px) {

.title-area {
height: 80px;
}
}

Here are a couple other resources with different options that may help in creating a full width responsive header:

You could try this tutorial for adding multiple size headers to your theme: http://thepixelista.com/responsive-genesis-child-theme-logo/

http://keypresswp.com/full-width-responsive-header-image-lifestyle-pro/

You can also ask on the Community Forums, to see if another user has done something similar and can share the code: http://studiopress.community

Please let us know if you have any other questions or problems – we'd be happy to help. You can open new tickets at http://my.studiopress.com/help/ . For CSS and theme customization help, check out our community forums at http://www.studiopress.community

Regards,

Corinne Olson
Customer Success Specialist

[CDM]

Oh I forgot: here's the link to my site in progress:
http://hcvadvocate.org/wordpress/

[RightNerve]

CDM, you are my HERO!!!!!!!!

You got much farther with them than I did when I asked this. THANK YOU!!!

Now we must decide if we want to do the multiple header/banner sizes or not. That makes some sense and might be a better approach but... in the meantime, YEA our sites work now!!!!!

Greg

[CDM]

Hi Ditto. I noticed that the alternate banner images at different sizes were automatically generated by Genesis.. I think this is in the functions php.

Anyways: if you have an iPad could you please check my site and tell me if it's resizing?

All the best

CD

[RightNerve]

I sure would, but I have no Apple product. Sorry, I wish I did, it would be extremely useful to know the answer.
Greg

[twoaussietravellers]

Thanks so much for sharing, I gave up months ago in total frustration, will have another go this week now!

[twoaussietravellers]

Thanks so much for this, i've been trying to do this on and off for so long. Can I just check that the size I should be making my image to upload is 190x1700?

[CDM]

Hi twoaussie... I think that 1700 is too wide. It is for our site. We are using 1138 x 190. So anyways... the code changes are all good, but I'm not sure about your width..

CD

[TheresaSh]

I'm having an extreme problem too!! Trying for about a month - this looks good!! I'll see if I can fix mine - I found videos, etc but none are trying to do what we are - I used 1138 but I still have the side padding and above and below with 1138 x 200 - top is fine but cutting out - still not responsive. I'm going to follow this thread from the top and see how it goes.

TS

[CDM]

one thing to remember is to leave the tag line in the header settings blank!! This is important. I found that when I left my tagline in the settings it pushed everything down and put in space..

[TheresaSh]

Okay, Thanks it worked on the live site but the appearance of the header on a mobile device leaves alot to be desired!! Way small...using the feedback from the Helpdesk. I did one on Lifestyle Pro too and the header looks great on Chrome on my laptop but not on mobile device!! Way too big! Going to try the plan on http://wpsites.net/web-design/news-pro-full-container-width-header-image/ as he has a video showing responsive header? We shall see....

[TheresaSh]

That worked removing the padding everywhere I could on the media screen sections. Alot better but not perfect. Will try that other one that does all sizes now. But I am getting close!!

I will try taking out the header tagline!! Should not have to leave it out though but whatever - I don't think its going to be a serious SEO breach?

Now the thread is closed. I feel sorry for people when the threads are closed and deemed resolved and other people on the forums dont get the benefit of everyone else's experience. I've seen that happen alot on here. People getting resolution and the thread being closed. Isn't a forum for everyone.?

[TheresaSh]

Okay, now its showing as not resolved.

Thanks CDM - it didn't make any difference on my iphone - funny if I put my iphone sideways it works great but if I put it up like normal it leaves the white space between the header and the menu- content and lots of space between the menu and the content.!! but its pretty good. If I get it down exactly I'll post again.

[TheresaSh]

I went to the Pixelista site http://thepixelista.com/responsive-genesis-child-theme-logo/

She gives a good link to try out your site at studiopress viaGitHub with all sizes so you can see where its not working. I haven't had time tonight to perfect it but my site looks ok on all the sizes - just not perfect.

if you put your site in put a backslash at the end like this http://www.mydomain.com/

Thanks everyone for all your expertise.

[Author]

Posts