Wrap .site-inner inside a new div

[northk]

Greetings all,

I'm coming up to speed on Genesis. I want to wrap the <div class="site-inner"> wrapper in the Genesis Sample child theme with my own full-width wrapper, so it looks like this:

<div class="myclass">
  <div class="site-inner">
  </div>
</div>

I've read several tutorials and I feel comfortable making changes in functions.php but I'm having trouble getting this right. Your help would be appreciated. The purpose is so I can include a background image that is full-width, but begins below the header and navigation.

Thanks!

http://www.highintegritydesign.com/

[Susan Nelson]

Hello!

You could use this in your functions.php file to add structural wraps: http://my.studiopress.com/snippets/structural-wraps/

The markup would look something like this:

<div class="site-inner">
    <div class="wrap">
    </div>
</div>

Let me know if that doesn't work for you.

[northk]

Hi Susan,

Thanks for writing back. What I'd like to do is a little different-- the <div class="wrap"> should enclose the <div class="site-inner">, rather than the other way around. I've read the Genesis tutorials and tried the structural wraps code, but it doesn't seem to cover this scenario.

Any ideas?

Thanks.

[Susan Nelson]

Hmmm...can you just change your .myclass to .site-inner and then use .wrap as you were planning to use .site-inner? It accomplishes the same thing just using different class names. Otherwise, I don't know of a way to do what you want. Sorry about that!

[northk]

Also it looks like I might need to generate my own class name since .wrap is already being used for other purposes.

Thanks.

[northk]

Susan, I thought about doing what you are suggesting-- basically apply all the styles used by .site-inner into .wrap, and then apply my own CSS to .site-inner. But the problem is that both .site-inner and .wrap have a lot of css applied in the Genesis Sample style sheet already, including in the media queries. And .wrap is used in other places in the theme.

So I think it might be pretty complicated to do this. I was hoping a simpler solution. Thanks though. Does anyone else know a way to generate my own wrapper code as I'm proposing?

Thanks.

[Susan Nelson]

You could use .site-inner for your main background image and then .site-inner .wrap for the inside part. As long as you put .site-inner in front of .wrap, it won't affect the other .wraps in the theme.

So, your CSS might look like this:

.site-inner {
    background: url(images/yourimage.png);
}

.site-inner .wrap {
    background-color: #fff;
}

It works. I just did it with the Minimum Pro theme. 🙂

[Susan Nelson]

And the HTML would look like this:

<div class="site-inner">
    <div class="wrap">
    </div>
</div>

[northk]

Susan, thanks I'll try that!
-NorthK

[northk]

Susan, it works! (of course you knew that 🙂 Thanks so much. I should have thought of doing it that way, but I got stuck thinking there was only one way to solve the problem. Only change I made was to make the background color transparent for .wrap:

@media only screen and (min-width: 1024px) {
	.site-inner {
		max-width: 100%;
		background-image: url(images/body-background-2.jpg);
		background-repeat: no-repeat;
		background-position: right top; 
	}
	.site-inner .wrap {
		background: transparent;
	}
}

Thanks again!
-NorthK

[Susan Nelson]

You're welcome! I'm glad I could help. 🙂

[Author]

Posts