Create A Page For Your Blog Without Sidebars

At the end of each article in the Knowledge Base, you'll find a very brief survey asking you if you found the article helpful. In addition to updating the Knowledge Base from your suggestions, we also get ideas for blog posts from the feedback you submit. Recently we were asked how to remove the sidebars from Pages. This is a question we receive on occasion and we wanted to share our recommendation with you.

By default, any Pages added to your site will use the same design as your blog. However, you can add a bit of CSS in the body of any page to hide the sidebars and expand the content of your page to fit the full width of your blog.

First, you'll need to determine the layout applied to your blog, and we'll provide you with the correct code for each of the classic layouts. You can go to Design > Layouts to determine which layout you are using for your blog.

Two Column (Right)

<style>
.layout-two-column-right #alpha { width: 100%; }
#beta { display: none; }
</style>

Two Column (Left)

<style>
#alpha { display: none; }
.layout-two-column-left #beta { width: 100%; }
</style>

Three Column (Right)

<style>
.layout-two-column-right #alpha { width: 100%; }
#beta { display: none; }
#gamma { display: none; }
</style>

Three Column (Right)

<style>
#alpha { display: none; }
.layout-two-column #beta { width: 100%; }
#gamma { display: none; }
</style>

After selecting the code which applies to your layout, you'll want to add the code to your Page. It is best if you finish writing the page before adding the code, because once the code is added, you will not be able to work in Rich Text mode.

At Posts > Pages, click on the title of the page to edit it. Click on the HTML tab to view the code for the post. Place the code at the end of your page and click Publish.

Please note you should not click back to Rich Text view after adding the code to hide the sidebars. Use the Preview button to see how the published page will appear on your blog, instead of Rich Text view.

The above code provided for each layout works beautifully without further adjustment for many themes. Some themes, however, may require additional tweaks, depending on borders and padding for the selected design.

The opposite of hiding the sidebars on a Page is displaying a specific module only on specific pages of your site. We have an article which covers this as well. Check out the article on setting a sidebar module to display only on a set page, post, or index for more information.

Do you have other design changes you want to make to your blog but you're not sure how to get started? Search the Knowledge Base for answers, and if you don't find a relevant article, take a few minutes to complete the survey at the end of the article. Let us know if you didn't find what you were looking for, if the articles which came up didn't relate to your search keywords, request new articles, or anything else you want to share! We look through all the survey results and update and add articles based on your feedback.

And if you have any other questions, you can always ask the Typepad community for tips in the forum.

Comments

[Dawn (KitchenTravels)]

Great intel, and perfect timing. Thank you!

[Dawn DuVal]

Just what I needed. Thanks

[jack389]

Very useful tips. Thanks

[A Twitter User]

Thanks for this additional tip. I might do this

[Wendy Cobrda]

I think I will try this -- might be more appealing visually, thank you!

[lady]

Very useful! Thank you.

[Lynnlee A'Court]

I seriously cannot get a blog even started. there is no "creat a blog" link. What am I doing wrong??

[Bri]

Hi Lynnlee. It looks like your account is a free profile account. In order to create a blog you will need to upgrade to a Pro plan. Click the upgrade link at the top right of your dashboard and select the Pro plan that meets your needs. You can compare the plans at http://www.typepad.com/pricing.