Magazine pro child theme. Change back ground image and site container

[bheisler]

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.com

[Davinder Singh Kainth]

1. 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 Themes

[bheisler]

I 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.

[Davinder Singh Kainth]

As 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 Themes

[bheisler]

You 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.

[bheisler]

So, 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.

[Davinder Singh Kainth]

For 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 Themes

[Davinder Singh Kainth]

For 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 Themes

[Davinder Singh Kainth]

Lastly, 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 Themes

[bheisler]

Thank 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?

[bheisler]

So, 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.

http://livingportlandmagazine.com

[Davinder Singh Kainth]

Revert 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 Themes

[Davinder Singh Kainth]

Then 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 Themes

[bheisler]

I 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.

[Davinder Singh Kainth]

To 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 Themes

[Davinder Singh Kainth]

To 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 Themes

[bheisler]

Thank you. What can I do about The primary nav still being white?

[Author]

Posts