Sidebar and Content Widths
May 19, 2008
This article reprinted from the the TypePad Hacks Weblog. The original article can be found online:
http://www.typepadhacks.org/2008/05/sidebar-and-con.html
© 2008, John T Unger
When John redesigned the TypePad Hacks site over the weekend, readers wanted to know how to make bigger sidebars.
When using Basic custom templates, it's just a matter of choosing the widths in the appropriate area of the Design Builder.
But as you can see, your choices are limited to the widths provided in the dropdown lists, which doesn't give you a lot of flexibility. This is one of the big reasons why Advanced Templates are so popular and are required for anyone who wants full control of their blog's design.
So what do you do when you want wide sidebars and a wide content area? Well, if you like how you've made everything else look in your blog using the Design Builder, you convert that design to a set of Advanced Templates, and you modify the Cascading Style Sheet to resize your columns.
But it gets a little confusing when you're doing it for the first time, as there are a ton of settings in the style sheet. To give you a glimpse of the "how to", I'll steer you in the right direction if you're using a three column layout with sidebars on the left and right, with content in the middle. Here are the steps...
- Convert your design to an Advanced Template, per the instruction above.
- Choose the Current Design from your blog's Design tab.
- In the top box in the design (it says "Index Templates"), you'll see "Stylesheet" - click on it to edit it.
- Scroll nearly all the way down to the bottom, and you should see the following:
- You'll need to edit the size of the container (the blog's total width), alpha, which is the first column in the layout, beta, which is the second column, and gamma, which is the third column. Let's say you wanted a left and right sidebar of 250px and a content area of 600px. You'd modify this section of the Stylesheet to look like this:
- Save the Stylesheet, then republish it. Open up your blog in a new window and check the results.
|
Link
|
6 Comments
| 
More Like This: Advanced Templates , CSS
John T Unger says:
I know some of you will want to change layouts without converting to advanced templates, and some of you are not totally familiar with CSS… so I'd like to add a few additional notes to David's entry above.
Posted: May 25, 2008 12:16:23 AM
Dave Weiss says:
Yeah, I guess I didn't mention it quite so clearly - there is one quick half sentence about the three column layout I used as an example.
Sorry about that.
Also note that some of the canned designs out there are not so simple to work with in the manner I wrote about above. Some designs just don't play nice.
The nice thing about using the "Edit Custom CSS" technique John mentioned is the fact that you can try stuff out and always just revert back to the original design if you don't like the results - you just empty out the Custom CSS field and republish.
Posted: May 25, 2008 12:51:53 AM
Jeff says:
Hello,
I converted Minimalist Blue template to an advance template, but when I go into the "Stylesheet" file under "Index Templates" it does not show the code for the blog width.
This is what it is showing:
/* Base */
@import url(/.shared/themes/common/base-weblog.css);
/* Portal */
/* Theme */
@import url(/.shared/themes/vox/minimalist-blue/screen.css);
/* Custom */
#banner { height: 50px; background-image: url(http://mydomainname.typepad.com/TPBanner7.jpg); background-position: 0px 0px; background-repeat: no-repeat; }
#banner-inner { overflow: visible; padding: 0; } #banner-header { position: absolute; left: 0; top: 0; width: 100%; height: 100%; margin: 0; padding: 0; } #banner-header a { display: block; left: 0; top: 0; height: 338px; text-indent: -1000em; } #banner-description { overflow: hidden; width: 0; height: 0; margin: 0; padding: 0; text-indent: -1000em; }
#banner {background-position: left;}
/* ph=1 */
/* nhm:from_kauri */
Any suggestions?
Thanks!
Jeff
Posted: Aug 30, 2008 1:29:08 AM
Dave Weiss says:
This is one of the designs I mentioned that doesn't "play nice".
I just helped someone through the same issue. We ended up creating a completely new design using the built-in style designer, converted it to an Advanced Template set, then modified the stylesheet and templates to match the needed design elements of the blog's original design.
Not easy to do, but you're better off in the long run to have a very standard architecture/design that you can easily modify in the future.
In fact, since I was able to recreate the design using a much more standard approach, I wonder why the original designers didn't do it this way to begin with. It makes life much easier.
John and I had discussed making some template sets for TypePad users that were snazzier than some of what's out there, with hacks like horizontal navigation pre-built into them. If and when we get around to it, that will probably make people's lives (as far as TypePad design and hacks go) a little easier.
Posted: Aug 31, 2008 12:57:02 PM
McCleskeyMS says:
Hey fellows. Recently took over administrating the teacher blogs for the middle school where I work. Been doing some research online and am considering just building a theme from the ground up since as you say the pre-defined don't "play nice." I really like some of the elements of the Morgan green theme in Typepad, but want to get rid of the brown background gradient behind the banner and just stretch the green floral banner all the way across the page. Is this possible to do using CSS? I have a Pro acct and not much experience using CSS (none, in fact except what I have been mucking about with in my redesign efforts today.) Any suggestions would be greatly appreciated!
Posted: May 28, 2009 10:24:17 PM
Kendra says:
Thank you thank you thank you! Your site is what I have been searching for to get my new food blog up and running. Genius!
Posted: Jun 7, 2010 1:44:18 PM