Community Forums › Forums › Archived Forums › Design Tips and Tricks › Missing .wrap DIV?
Tagged: .wrap structure layout class
- This topic has 4 replies, 2 voices, and was last updated 10 years, 5 months ago by kennypress.
-
AuthorPosts
-
October 23, 2013 at 2:37 pm #68488kennypressParticipant
Hi,
I'm new to Genesis framework and working on creating a clean, stripped-down master child theme to base all of our future designs on. We have 2 test sites that we've been using to set stuff up on. One is still using the 2.0 beta, and one I updated to the latest 2.1.On the beta 2.0 site, I notice that all of the main structural elements ('header', 'nav', 'div.site-inner' and 'footer') have a direct child of 'div.wrap'. But on the updated 2.1 site, that .wrap div is missing for the 'div.site-inner' (main content area).
1) Was that .wrap DIV intentionally removed from the latest Genesis update, or could I be 'hiding' it somehow?
2) If it is no longer there, isn't removing something that could be a major structural element being used dangerous for people's child-theme styling (fortunately, we're just starting out)?
3) If it is no longer there, how could I either: a) add it back in; or b) add a secondary class of .wrap to something like the 'div.content-sidebar-wrap' so it could function similarly? (not great with PHP, and new to Genesis, so hopefully some direction will get me going).
Not a deal-breaker, but just want to understand how to safely proceed with setting up some basic structure. Having the generic .wrap DIV in all places allows some default general rules to apply consistently.
Thanks!
October 23, 2013 at 4:13 pm #68502David ChuParticipantHi,
This change happened months ago, and it essentially boils down to this - one .wrap DIV was replaced by .site-inner, which goes around the main content area (surprisingly enough). That was an abrupt change during the beta process (and frankly, not well publicized, so it was a surprise to me, too).But in the end it's very easy to deal with, just be sure that .site-inner has a width set, very likely the same as .wrap in many designs - a 1-liner. If you get the latest Genesis Sample theme, all that is accounted for, so I'd recommend that. I've been with Genesis awhile, and I can tell you that the latest Sample theme CSS is extremely good, better than ever. Just about the best basis CSS I've ever seen, and I get around.
That's going to be easier than trying to swim against the tide and changing the markup back to what it used to be.
Enjoy using Genesis,
Dave
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
October 23, 2013 at 6:49 pm #68523kennypressParticipantThanks for the reply Dave! I appreciate it.
Actually, the .wrap DIV was INSIDE .site-inner, just like the other main content areas (header, nav, footer). So it was much more consistent and you could apply a general style (like max-width) to these generic .wrap DIVs, but leave their parents alone.
So if I was going to do something consistent, I would want to style the 'content-sidebar-wrap' DIV, which doesn't appear to have any styling by default. But not sure that will ALWAYS be there in all different page templates, layouts, etc.
And I did copy the Genesis Sample theme CSS as a starting point. But I'm stripping a lot of unnecessary stuff out to try to make a skeleton 'Bootstrap-y' theme that we can use as a starting point. I will need to make it liquid responsive, so the structure is really important to make this easy and flexible.
So in a typical theme I could add the .wrap DIV back in, or add another class of .wrap to the .content-sidebar-wrap DIV, in about 2 minutes. And then have a much more consistent and simplified structure to begin with.
A) How could I add these in Genesis properly?
I'm new to hooks/filters/actions, so a little direction may help (wish I knew PHP better).B) Is there a danger in doing this for our 'master' child theme?
I want to be future-proof as much as possible, but am already nervous that this element was dropped (we only found it as we had a javascript action that was looking for something in .wrap and it got broken - not good).Thanks again!
October 23, 2013 at 8:01 pm #68544David ChuParticipantAnd I did copy the Genesis Sample theme CSS as a starting point. But I’m stripping a lot of unnecessary stuff out to try to make a skeleton ‘Bootstrap-y’ theme that we can use as a starting point. I will need to make it liquid responsive, so the structure is really important to make this easy and flexible.
So in a typical theme I could add the .wrap DIV back in, or add another class of .wrap to the .content-sidebar-wrap DIV, in about 2 minutes. And then have a much more consistent and simplified structure to begin with.
A) How could I add these in Genesis properly?
I’m new to hooks/filters/actions, so a little direction may help (wish I knew PHP better).Wow, based on that, it sounds like you won't be happy with Genesis at all. If you are a serious Genesis user, you'll have to know PHP, and you'll have to learn hooks and filters, and you must know CSS. There's a learning curve, just as with any framework. And the changes to handle the missing wrap are so minor from a CSS perspective, the same 2 minutes that it would take you to code the missing wrap in an HTML template.
So sorry, but I'm clearly not the person to help you. Maybe someone else will jump in.
Good luck.
Dave Chu · Custom WordPress Developer – likes collaborating with Designers
October 23, 2013 at 8:59 pm #68548kennypressParticipantThanks again for the insight. I know there will be a learning curve, especially not being fluent in PHP.
I was hoping that the numerous tutorials and code snippets available would be helpful, but in my brief time I've found it might be pretty challenging to sift through what is 'current - 2.x' vs what is outdated info (even possibly on MyStudioPress) : (
I am very experienced with CSS/HTML, though, and know how I 'could' have approached it as a workaround. But I want to start off with the cleanest code so workarounds will be fewer and CSS will be more efficient.
But in my searching, I did find what 'appears' to be the solution (had to figure out how to modify for 2.0). In case it helps anyone, I added this:
add_theme_support( 'genesis-structural-wraps', array( 'header', 'nav', 'site-inner', 'footer' ) );
So now I have the consistent .wrap DIVs which will make full-width, liquid layouts a bit cleaner. But I do worry about how 'stable' this is if structural changes happen like this again...
-
AuthorPosts
- The forum ‘Design Tips and Tricks’ is closed to new topics and replies.