Wrap .site-inner inside a new div

Community Forums Forums Design Tips and Tricks Wrap .site-inner inside a new div

This topic is: not resolved

This topic contains 10 replies, has 2 voices, and was last updated by  Susan Nelson 1 year, 1 month ago.

Viewing 11 posts - 1 through 11 (of 11 total)
  • Author
    Posts
  • #71923

    northk
    Member
    Post count: 5

    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/
    #72013

    Susan Nelson
    Participant
    Post count: 207

    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.


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #72051

    northk
    Member
    Post count: 5

    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.

    #72055

    Susan Nelson
    Participant
    Post count: 207

    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!


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #72061

    northk
    Member
    Post count: 5

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

    Thanks.

    #72072

    northk
    Member
    Post count: 5

    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.

    #72078

    Susan Nelson
    Participant
    Post count: 207

    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 | Oh, Hello Designs | Twitter | Facebook

    #72079

    Susan Nelson
    Participant
    Post count: 207

    And the HTML would look like this:

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

    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

    #72083

    northk
    Member
    Post count: 5

    Susan, thanks I’ll try that!
    -NorthK

    #72086

    northk
    Member
    Post count: 5

    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

    #72088

    Susan Nelson
    Participant
    Post count: 207

    You’re welcome! I’m glad I could help. :)


    Susan Nelson | Oh, Hello Designs | Twitter | Facebook

Viewing 11 posts - 1 through 11 (of 11 total)

You must be logged in to reply to this topic.