Genesis theme layout question WordPress

Steve Watson comments:

Hi Kyle

Thats kind of you thanks

This is the theme I would like to learn how to replicate

http://demo.studiopress.com/modern-portfolio/

Here is someone who has used it and customised it really nicely - http://www.carriedils.com

Be great if you could give me a few pointers

Many thanks
Steve

Steve Watson comments:

Kyle, all the other answers talk about creating a full width page template I think which is not what i'm asking... you seem to understand what I am talking about and what I'm trying to learn.

Kyle comments:

Absolutely, from what I gather you are thinking big picture (so whole theme, not just 1 template), is that right?

I am working on a mobile conversion project right now haha, can I get back to you in an hour or so?

Steve Watson comments:

Correct, no rush Kyle get back to me whenever you have time.

I've been looking at another variation that uses the Genesis framework too

http://demo.junioratoms.com/sampler/rows/

How are these rows created? The guy talks about using the TVC toolset, I had a look and think it could make life easier once I get my head around it.

http://junioratoms.com/

Kyle comments:

Okay, so I'm ready to walk through this.

Looking at the theme you sent, Modern Portfolio, it looks like they are doing something similar to the example I started with. The largest areas don't have set widths (body & #wrap). From there the #wrap has 3 (4 if you count footer widgets) divs: #header, #inner, and #footer. These still don't have set widths, only max-widths, which is where the content boxes start to come from. What you notice though is that with no set widths, the divs naturally expand completely because there container expands completely. Here is a REALLY rough sketch of what this gives at this point:

[[LINK href="http://imgur.com/aMaYYOI"]]http://imgur.com/aMaYYOI[[/LINK]]

Again, to emphasize, the key points here are that none of the areas have been restricted by widths. The only thing we've done so far is lay the structural framework for sectioning off the layout.

The other important point to note here is that this is where your background colors are coming from. Although the widths are unencumbered, the heights get cleanly cut off by each of the 3 sections (header, inner, footer). Now at this point we can also begin to add more sections inside each one of the big 3. Meaning, inside #inner, we could do the same thing if we wanted and add three more sections, and give each a background color, as long as we don't start setting widths. Again here is another VERY rough sketch about then adding another section inside the one you made, that is not limited by width.

[[LINK href="http://imgur.com/aV3HZ7i"]]http://imgur.com/aV3HZ7i
[[/LINK]]
In Modern Portfolio, this is how they do the "Welcome to my Website" box (labeled as #about). Also note, that they add more structure before doing that though, allowing for more options when changing between templates -- i.e. the div structure there is #content-sidebar-wrap , then #content, and then finally #about. It is at this level with #about point that you start having individual page content, and the level above with #content-sidebar-wrap, would be the level where you make custom templates (so you can play with adding the sidebars you want, etc.).

With all of that said, there of course comes the point where you start setting the content areas so that your text areas aren't 2400px across the screen. At this point you should probably switch to classes instead of IDs if you haven't already, that way you can work on a more global level. In Modern Portfolio they use the .wrap class. To get the content to appear centered on the page, while not being too wide all they needed to do was add "margin: 0 auto; display: block; max-width: 1080px". So then you can have that class appear in each section, but have it follow the same rules -- i.e. #about .wrap , #header .wrap , etc.

So to recap, build a structure that doesn't limit widths until you get all the down to the content areas. Use lots of hierarchical divs before getting to content to allow for flexibility in the html structure.

Have a read over that, let me know which areas to go into more detail, and I'll keep going.

Kyle

Steve Watson comments:

Ok brilliant thank you. Are you up for walking me through this from the start?

I have Genesis installed here with the Dynamik Website Builder child theme

http://stevewatsondemos.com/

Are you up for showing me how to make those three inner areas full width?

or is that a bit different. Like you said there are many ways to skin a cat. :)

If i could learn how to do it using the DWB it will help me with all my future client sites.

Where do i begin?

If you are up for this we can either do it here or break off and do it privately via email or Skype and I can pay you properly for your time.

What do you think?

Kyle comments:

That's too funny, the mobile optimization project from earlier today was for a DWB theme haha

It looks like you are off to a great to start on the site. The starting structure seems to be at a good place. What is it you are looking to do?

I'd be happy to do some screenshares and walkthrough the different pieces of this with you. I may not be able to until Monday, if possible. Send me a PM with your email and we can chat more there.