Extending the Sidebar to the Bottom of the Page in MT
Let me preface this by saying I'm no expert in Movable Type. I've only been using it for a very short time, and most of the things I've learned about it have been directly related to something I wanted to do with my weblog. I take the experimental approach to solving a problem, rather than a defined procedure. If one thing doesn't work, I change this code or that css and see what happens. Rarely do I even remember what I did.
My newest project: If my content was longer than my sidebar, I wanted to make my sidebar equal the length of my content. If my sidebar was longer than my content, I didn't want any portion of the sidebar (border, etc) being cut off to the length of the content. Ha! Confusing, huh? Ok - how about this - I just wanted some consistency!
First thing I did was hit Photoshop. I wanted my sidebar to be a rounded box with a border. So I created a new PS file - standard 800x600 and filled the background with white. I added guides at 500 and 700px vertical. On a new layer, I drew a rounded rectangle - the height really didn't matter. I added a 2px stroke, then selected the layer, created a new layer, and filled the selection with black. I added a gaussian blur, lowered the opacity to ~60%, and moved it slightly right and down for a nice drop shadow. I then lowered horizontal guides to right below the top rounded corners and right above the bottom rounded corners. I added two more horizontal guides to somewhere in the middle of the box.
Then I cropped out the top part of the rectangle, and the bottom part The middle section (between the two horizontal guides in the middle) - crop out from 0px to 700px so you have a 500px white area and a 200px area with your sidebar image/background. I saved these as sidebartop.gif, sidebarbottom.gif, and sidebarback.gif, then uploaded them to the server.
Now for the MT fun. In the stylesheet, I made my content css look like this:
The only difference there was changing the background to "none".
Then I added this to the bottom of the stylesheet:Then, I edited my templates: the Main Index Template, my About template, and the Category Archive, Individual Archive, and Date-Based Archive Templates.
Above the tag, enter the following code: Then, after the closing div tags for your sidebar, enter the following:This is basically creating a container to hold your content and sidebar, with a repeating background for your sidebar. Then I just stuck the rounded portions in new divs at the top and bottom.
I hope this made sense, it's quite late and I'm starting to see double.
Leave a comment