Ask your WordPress questions! Pay money and get answers fast! (more info)

Genesis theme layout question WordPress

  • SOLVED

Hi Guys

I want to learn how to create a full with website using Genesis

This is what it looks like out of the box

http://www.genesisframework.com/

What do I need to do to change it to look like this?

http://www.carriedils.com/

As you can see the page content has different widgets/elements that span the width of the page

Please watch this 1 minute video of me trying to explain better :)

http://screencast.com/t/NyU9qrfC

Many thanks
Steve

Answers (3)

2013-09-28

Kyle answers:

There are not a whole lot of tutorials on building entire genesis child themes unfortunately. The best thing is to look at the demo page for all the themes you like and try to replicate the div structure and css.

For example on this one: [[LINK href="http://my.studiopress.com/themes/pretty-pictures/#demo-full"]]http://my.studiopress.com/themes/pretty-pictures/#demo-full[[/LINK]]

That grey image area is created with the follow structure:
-Main body wrap (#wrap) has no set width (so the contained elements can be as wide as they want)
-Inside the main body wrap is the header area (#header), which once again has no width, but that is where the background color comes in.
-Then inside that header area is another div called "backstretch" which is what guarantees the full width. You will notice however, it is doing this dynamically (meaning it is not coming from the stylesheet). The element is absolutely positioned at left: 0, top: 0 inside the header element, and as you adjust resolution the width dynamically matches it.

Long story short, there are more than one way to skin a cat. Go through the designs you like and copy the structure. If you want to post a link to the exact theme you were referencing then I could help walk you through how that example does it. Looking at the various themes, many of them handle the elements in different ways, so the more specific the request, the more specific answer I could give.


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.

2013-09-28

Sabby Sam answers:

Hi Steve,
I would advice you to use this plugin

http://wordpress.org/plugins/genesis-layout-extras/
and the below link will help you to modify certain things.

http://genesistutorials.com/

2013-09-28

Abdelhadi Touil answers:

Hi.
To build a full width theme you should create a custom homepage and removing the sidebar from it, and you should make its width equal to 100%.
I see that Genesis framework already support full width display, ans I find here:

[[LINK href="http://forum.jigoshop.com/discussions/problems/24-genesis-theme-full-width-not-working"]]http://forum.jigoshop.com/discussions/problems/24-genesis-theme-full-width-not-working[[/LINK]]


Abdelhadi Touil comments:

Here is a nice tutorial show you how to create your full width custom wordpress template that you can make as homepage:

[[LINK href="http://wpmu.org/create-a-full-width-page-for-wordpress-in-5-simple-steps/"]]http://wpmu.org/create-a-full-width-page-for-wordpress-in-5-simple-steps/[[/LINK]]


Abdelhadi Touil comments:

More tutorials this time about Genesis framework:

[[LINK href="http://wpgenesis.blogspot.com/2013/04/custom-page-template-in-genesis-child.html"]]http://wpgenesis.blogspot.com/2013/04/custom-page-template-in-genesis-child.html[[/LINK]]

[[LINK href="http://wpgenesis.blogspot.com/2013/09/force-full-width-and-add-custom-content.html"]]http://wpgenesis.blogspot.com/2013/09/force-full-width-and-add-custom-content.html[[/LINK]]

I think this blog is a good for you as reference:

[[LINK href="http://wpgenesis.blogspot.com/"]]http://wpgenesis.blogspot.com/[[/LINK]]

Good luck.