Customizing Column Widths

Please Visit My Profile Page To See All My Blogs Thanks 

Http://Www.Blogger.Com/Profile/08427350034167098841

With a free, Micro blog, the width of the columns on your blog is determined by the theme selected. At Design > Choose a theme, you can select a different theme for your blog to change the column widths.




Plus members of TypePad have the option to create a custom theme using the Theme Builder where you can set the widths of the sidebars and main content column. At Design > Choose a theme > Customizable > Theme Builder, you can create a new custom theme. Under the Main Content Column section, you can set the column where your posts are displayed to 300 pixels, 400 pixels, 500 pixels, or a Fluid width. (A Fluid width with fill the browser window and the display of the blog will vary to each visitor.) Additionally, you can edit the Columns to be 150 pixels, 200 pixels, or 300 pixels.




Unlimited, Premium, and Business Class plans offer the Custom CSS feature which allows you to further customize any pre-made or custom themes. Custom CSS allows you to make minor or major design changes using small bits of CSS (Cascading Style Sheets) code. At Design > Custom CSS, you can enter a little bit of code to adjust the column width of your blog.




When using the Theme Builder to create a custom theme, the CSS you use will depend on the layout you have selected. If you have selected a Two-Column-Right Classic Layout, an example of the code you would use is:






.layout-two-column-right #container { width: 900px; }
.layout-two-column-right #alpha { width: 600px; }
.layout-two-column-right #beta { width: 300px; }






The #container is the total of all column widths. In this case, the main content column is 600px wide and the right sidebar is 300px, so the container of the blog is 900px. If you are using a layout with the sidebar on the left, you can replace layout-two-column-right with layout-two-column-left.




To change the width of a One-Column Classic Layout, here is an example of the CSS you can use:




.layout-one-column #container { width: 800px; }






For a Three-Column Classic Layout, you have three columns, alpha, beta, and gamma, and an example of the CSS you can use is:




.layout-three-column #container { width: 900px; }
.layout-three-column #alpha { width: 120px; }
.layout-three-column #beta { width: 480px; }
.layout-three-column #gamma { width: 300px; }






Many pre-defined Themes include padding in the columns and you will need to take the padding into consideration when setting your column width. Not all pre-defined Themes are compatible with Custom CSS changes as the themes include graphical elements.




An example of the CSS to edit the column width for the Vicksburg Theme with a two column right layout:






#container { width: 900px; }
#alpha { width: 580px; }
#beta { width: 280px; }
#banner { width: 890px; }






The total of the columns with the Vicksburg pre-defined Theme does not add up to the 900px container because the stylesheet includes 20px of padding in each column.




For the correct CSS to change the column widths for other themes, see the articles for the individual themes:




Journal Theme
Mosaic Theme
Please note that the pixel widths used in this article are just examples. Using an incorrect number could change the appearance of your blog as there are other elements involved in a theme. Some Themes will require additional CSS to remove styles unique to the theme. You may want to try adjusting these figures in increments of 50 or 100 pixels at a time to be sure you won't affect how the rest of the blog is configured. Also, you can always start over by removing all of the code from the Custom CSS field.