Community Forums › Forums › Archived Forums › Design Tips and Tricks › Magazine pro child theme. Change back ground image and site container
Tagged: coding, design, Magazine Pro, theme design
- This topic has 16 replies, 2 voices, and was last updated 10 years, 4 months ago by bheisler.
-
AuthorPosts
-
June 27, 2014 at 3:50 pm #111804bheislerMember
I am able to change the background image in magazine pro, but it takes over the entire background. I would like the site container to be white while the rest of the background is the image. Please help. I am pretty new to this stuff, but learn quickly. i have seen this on other themes so I am guessing that it is possible.
thank you in advance!
http://livingportlandmagazine.comJune 28, 2014 at 5:53 am #111857Davinder Singh KainthMember1. After you add background image, make following change.
2. Change the following code in style.css
/* Site Containers --------------------------------------------- */ .site-inner, .wrap { margin: 0 auto; max-width: 1140px; }
to
/* Site Containers --------------------------------------------- */ .site-inner, .wrap { background:#fff !important; margin: 0 auto; max-width: 1140px; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 28, 2014 at 4:55 pm #111896bheislerMemberI inserted the new code as instructed, but all I see is the entire background image. It doesn't change the content container. Could this be because I am adding the background image via a plugin? I appreciate your help on this.
June 29, 2014 at 12:13 am #111938Davinder Singh KainthMemberAs of now your background is cream / light yellow color (my color visualization is bad!) and inner container is white color. Add background image and let me see how it behaves.
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 29, 2014 at 4:11 pm #112023bheislerMemberYou are right. It wasn't showing when I last checked. However, The white goes too far up into the black menu bar above and covers my menu options. I need to be able to bring it down some. Also, I think the pixel dimension is too narrow because now all content is distorted. Please help. Thank you in advance.
June 29, 2014 at 4:23 pm #112024bheislerMemberSo, after looking at it with a background image, I need to widen the container, and keep the top menu bar black, and the footer space where search and archives are need to stay black as well.
June 29, 2014 at 10:54 pm #112059Davinder Singh KainthMemberFor top navigation bar with dark background. Look for following code in style.css
.nav-primary { background-color: #222; left: 0; position: fixed; top: 0; width: 100%; z-index: 999; }
Add following code below the above code
.nav-primary .wrap { background-color: #222; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 29, 2014 at 10:56 pm #112060Davinder Singh KainthMemberFor dark background color in footer area. Look for following code in style.css
/* Footer Widgets ---------------------------------------------------------------------------------------------------- */ .footer-widgets { background-color: #222; color: #aaa; clear: both; font-size: 14px; padding: 60px 0 20px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { width: 360px; }
and change it to
/* Footer Widgets ---------------------------------------------------------------------------------------------------- */ .footer-widgets { background-color: #222; color: #aaa; clear: both; font-size: 14px; padding: 60px 0 20px; } .footer-widgets-1, .footer-widgets-2, .footer-widgets-3 { background: #222 !important; width: 360px; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 29, 2014 at 10:58 pm #112061Davinder Singh KainthMemberLastly, to prevent content from touching edges - add padding to the following section. Look for following code:
/* Site Containers --------------------------------------------- */ .site-inner, .wrap { background:#fff !important; margin: 0 auto; max-width: 1140px; }
change it to
/* Site Containers --------------------------------------------- */ .site-inner, .wrap { background:#fff !important; padding:40px; margin: 0 auto; max-width: 1140px; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 29, 2014 at 11:28 pm #112070bheislerMemberThank you very much for all of your help. I have added the code as you have instructed, and it has not changed. I am editing it through the dashboard > appearance > editor. I don't know if that makes a difference or not?
June 30, 2014 at 12:03 am #112071bheislerMemberSo, I cleared cache and some changes showed up. the header doesn't show my logo anymore, and is still white. The padding was added , but it threw everything out of order. Then the footer, only a small part turned the color it was supposed to. Please help. These are the final touches to my site. I really appreciate all of your help! Thank you very much.
June 30, 2014 at 12:30 am #112072Davinder Singh KainthMemberRevert to old style.css file and make changes step wise
First make the padding change as explained here - http://www.studiopress.community/topic/magazine-pro-child-theme-change-back-ground-image-and-site-container/#post-112061
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 30, 2014 at 12:34 am #112073Davinder Singh KainthMemberThen to make footer widget background dark - add following code in footer widgets section
.footer-widgets .wrap { background: #222 !important; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 30, 2014 at 1:31 am #112076bheislerMemberI went back to the original style.css the did them in individual steps. The footer is the only one that worked, but left a big space white. The padding code still mess with the sidebar widgets, and the header code doesn't seem to work for me at all.
June 30, 2014 at 1:47 am #112079Davinder Singh KainthMemberTo fix the white area at bottom, look for following code
.site-footer .wrap { border-top: 1px solid #444; padding: 60px 0; }
change this to
.site-footer .wrap { background: #222 !important; border-top: 1px solid #444; padding: 60px 0; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 30, 2014 at 1:48 am #112080Davinder Singh KainthMemberTo fix sidebar dropping down, reduce 360 to 280px in the following code
/* Primary Sidebar */ .sidebar-primary { float: right; width: 360px; }
Sunshine PRO genesis theme
Need Genesis help? Davinder @ iGuiding Media | My Blog | Fresh Genesis ThemesJune 30, 2014 at 2:13 am #112082bheislerMemberThank you. What can I do about The primary nav still being white?
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.