Change page width on one page

[blueprairie]

Hello! I am working on a page on my site that will incorporate an iframe element and need to adjust the page width for only that page. Is there any easy way to do this? Do I need to create a new page template (similar to blog page or archive page?), if so, are there directions somewhere for doing this for a Genesis site?

Thank you!

http://www.locationone.com/lois/logon.do?username=dcd&appsection=localities&community_id=1934

[Marcy]

If you have a page or post, each of those has it's own body class, if you "view source" or use Firebug.

Then you can edit your style.css to add the following and then click the full page layout in your page. And it's probably best to use a page. This is for a theme using HTML5.

This is for a post with id of 20; change the width to be whatever you need.

.page-id-20 .site-container {
     width: 1200px;
}

For an older theme, it would be:

.page-id-20 #wrap {
     width: 1200px;
}

---

Marcy | Amethyst Website Design | Twitter

[blueprairie]

Hi Marcy! I appreciate your reply. This site is on Serenity which I believe is an older theme. I tried both CSS add ins with page id 1631 but nothing has changed.

Any other suggestions?

[Marcy]

Can you please post a link to the page in your Genesis theme so I can look at that page?

Thank you!

---

Marcy | Amethyst Website Design | Twitter

[blueprairie]

http://vanmeteria.gov/site-selector/ is the one page that needs to be wider (after the nav preferably)

Thanks!

[Marcy]

You're using a post for this, and not a page, so the code is different.
So the code would be:

.postid-1631 #wrap {
     width: 1200px;
}

But you also need to change to a full width layout. When you are on the post edit screen, you need to scroll down to the bottom where you see the possible Genesis layouts. You need to choose the full width option; you are currently using the content-sidebar option.

Then post back again for me to look at it.

---

Marcy | Amethyst Website Design | Twitter

[blueprairie]

That helped, the nav changed width, but not the center page.... is that something other than wrap?

THANK YOU!

[Marcy]

OK. Your menu scales to 100%, so if #wrap is 1200px, the menu will be too, but that will mess up the ribbon triangles on the sides. So let's try something else.

So remove this code:

.postid-1631 #wrap {
     width: 1200px;
}

Make sure the menu goes back to normal.

Then find this section:

#inner {
    background: none repeat scroll 0 0 #FFFFFF;
    border-color: #FFFFFF;
    border-style: solid;
    border-width: 0 0 5px;
    margin: 0 auto;
    overflow: hidden;
    padding: 20px 20px 5px;
    width: 840px;
}

Add this below it. It will make the content section extend off to the right.

.postid-1631 #inner {
      width: 1200px;
}

If you need the content centered, you will need to add these instead:

.postid-1631 #wrap {
     width: 1200px;
}
.postid-1631 #inner {
      width: 1160px;
}
.postid-1631 #megaMenu {
    width: 880px;
}

I am not sure if that will allow the menu to have the ribbon triangles; you may need 860px instead of 880px.

---

Marcy | Amethyst Website Design | Twitter

[blueprairie]

THANK YOU! I'll show this to the staff tomorrow and see if it is acceptable for just this one page. Question, in wordpress this page is found in the Pages section. Why did it need to be labeled as a post for the code to work?

[Marcy]

I'm glad you think it will work; I hope so...

---

Marcy | Amethyst Website Design | Twitter

[Author]

Posts