Community Forums › Forums › Archived Forums › Design Tips and Tricks › HEADER WRAP IN NEWS PRO
Tagged: css, footer wrap, header wrap, navigation wrap
- This topic has 9 replies, 2 voices, and was last updated 9 years, 5 months ago by ShariLee.
-
AuthorPosts
-
November 11, 2014 at 10:47 pm #131247ShariLeeMember
Is it possible to wrap a header in NewsPro? I have tried to find CSS code, and I have not been able to, but I did find some code to work with Genesis Hooks. It didn't work. How do you go about wrapping the header, the navigation and the footer without including the content area or either of the sidebars? Thanks you.
ShariLee Beynon
GoldaVere IMSNovember 12, 2014 at 1:22 am #131265TonyaMemberHi ShariLee,
Explain to me what you mean by"wrap". Do you mean you want to add a <div> or other HTML Dom tag before and after the <header>, <nav>, and <footer> sections? Or are you wanting something within these tags?
Or better yet, what are you trying to accomplish? Maybe I can help.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampNovember 12, 2014 at 11:07 pm #131370ShariLeeMemberThank you, Tonya. My site is http://www.bloggingmywayforward.com I am trying to get several things done. 1, the nav bar at the top with no spaces between the nav and header + the nav bar to go all the way across evenly spaced
2. A dark blue band under the header I have to extend all the way across in the same width as the header so it looks seamless.
3. The footer to go all the way across as well, but so it does not cause a problem when I start using the footer widgets.
Does that make sense? I did this with my site, http://www.theglutenalarm.com and it worked, but it is a different theme.
ShariLee Beynon
GoldaVere IMSNovember 12, 2014 at 11:34 pm #131374TonyaMemberHi ShariLee,
You just caught me before I turn my mac off for the night. You do have .wrap after each of these elements.
Let's walk through:
1. To get the contents within the nav, header, and footer to line-up with the rest of the site, add the following:
.nav-primary .wrap, .site-header .wrap, .site-footer .wrap { max-width: 1140px; margin: 0 auto; }
Notice that it's targeting the .wrap for each to set the max width and then center the contents.
2. On line 950 (style.css), you want to remove the padding around the top and bottom of the header's image:
.title-area { float: left; /* padding: 14px 0; padding: 1.4rem 0; */ padding: 0; /* This sets the padding to 0 */ width: 100%; }
3. On line 8 of the custom.css file, you want to do the following to make the blue bar the same width as the header image:
body .site-header .wrap {
Notice that I added .wrap to it.4. The change made in 1 above will make sure that the footer widgets stay within the .wrap width.
Now you also need to adjust the .wrap width for the responsive portion too.
I hope this helps.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampNovember 13, 2014 at 5:07 pm #131468ShariLeeMemberTonya,
Thank you so much. I entered each of these codes in the CSS Stylesheet editor, and your expertise totally resolved my nav bar problem + the nav bar and the header are now touching and look really good.The widgets fit great in the footer... the last one is far to the right, but I have had that happen before in other genesis themes.
In order to get my header to extend all the way across, I was thinking I needed to add a layer of my #18162C blue that extends out a bit. I guess my last question would be is that the correct way to go? I am trying to get my header to look like the one you did for your site... Maybe I should just hire you to do it...
ShariLee Beynon
GoldaVere IMSNovember 13, 2014 at 5:43 pm #131472ShariLeeMemberTonya,
Hi again. I finally found that boarder and changed the color from grey to red. Now I just have to get my header to wrap or fix it so it will wrap... Any ideas?
ShariLee Beynon
GoldaVere IMSNovember 13, 2014 at 5:51 pm #131473TonyaMemberHi ShariLee,
On my site, I'm using a small pattern that I repeat across the #welcome section. Looking at your header image, you are displaying the full width of that image, i.e. it's not wide enough to fill the entire space. So you have a few choices here to get it to stretch across:
1. Use Photoshop to stretch your original photo. Make sure that you make a few sizes too, i.e. smaller ones for the mobile version.
2. Use a javascript plugin called and then target it to stretch your image to the header.site-header element. This option will require some js work, albeit a small little script and you'll need to enqueue both the script and backstretch.js. How comfortable are you with js and PHP?
For the footer widget, the 6th one is being positioned via float: right; on line 1463 of the style.css file. Typically we like to set the width of the footer widgets using the built-in column classes, i.e. one-sixth in this case. You can do this in PHP or by setting the percentages within the CSS (use the .one-sixth css as an example - see line 510 in the style.css file).
If you are comfortable with a little bit of js and PHP let me know and I can work up a Gist for you to put in.
Cheers,
Tonya
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampNovember 13, 2014 at 6:02 pm #131475ShariLeeMemberTonya,
Thank you so much. I have never worked in javascript, but I'm a quick study. Thanks also for the footer fix. I took the black color out and just made the background white--at least for now.I don't have photoshop. I use Gimp. I think I'll try that route first. You have been amazing. I love your site. I'll be nosing around there. 😉 thank you again, ShariLee
ShariLee Beynon
GoldaVere IMSNovember 13, 2014 at 6:11 pm #131478TonyaMemberGimp works just fine too. 🙂
And you're welcome. Glad to help.
Software & Electrical Engineer and Programming Teacher · I’m on a mission to help developers be more awesome.
Find Me: KnowTheCode.io | @hellofromTonya | Profitable WordPress Developer BootcampNovember 13, 2014 at 10:05 pm #131483ShariLeeMemberThanks, Tonya. I am so grateful for all of your help.
ShariLee Beynon
GoldaVere IMS -
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.