Featured Blog: Creative Thursday
Typepad's New Look: Rebranding an icon

Increase Column Widths To Allow For Premium Ads, Widescreen Videos, & Larger Images

In the forum, Typepad blogger, David, wanted to know the best width for premium ads and any other design considerations he should be aware of when placing ads on his blog.

A 300px width is recommended for premium ad space, and the column widths on your blog may need to be increased to accommodate for the wider ads. The new pre-made themes being released to Typepad have the wider sidebars, including the Retro Theme.

If you prefer to use one of the pre-made themes or a custom design created with the Theme Builder, the space in the sidebar is reduced by the column padding. However, you can use Custom CSS to customize the column widths to fit any content.

The three column right classic layout is ideal for placing ads on your site, and we'll use this layout in our example.

To set up a blog with three columns with available space of 600px, 200px, and 300px, you'll need to add extra pixels to allow for the 15px of padding on each side.

.layout-three-column-right #container { width: 1190px; }
.layout-three-column-right #alpha { width: 630px; }
.layout-three-column-right #beta { width: 230px; }
.layout-three-column-right #gamma { width: 330px; }

At Design > Custom CSS, enter the above code in the text field and click Save Changes to update your blog with the wider columns.

By setting the main content, alpha, column to 630px, you can include 600px wide images and widescreen videos within the body of your post. Wide Ad Above Two Columns Vimeo and YouTube set the embedded video width at 500px and 560px respectively. The 630px column width for your main content will easily accommodate the widescreen videos.

See the article on customizing column widths for tips on changing the column widths for other layouts.

If you're not sure where to get started with placing ads on your blog, check out the article on including advertisements on your blog for tips.

Additionally, you can utilize the previous tip on adding a Wide Image or Ad Above Two Sidebars which gives you a wide ad space in the sidebar as well.

If you are looking for design tips for your blog, start a thread in the Typepad forum to get help from your fellow bloggers and the Typepad team.

comments powered by Disqus