Print, video, sounds

Dolling up your Movable Type install

Once you have your website structure
you can make it pretty and different.		 pdf version
Movable-Typec_dashboard.jpg
 Once you have spent a lot of time thinking out the architecture of your MT5.0 install, and a goodly amount of time adding content, you can doll up the install to be pretty and different.

Most people do the exact opposite, spending all their time on pretty look and no time on architecture. I know I did at first. When I installed Wordpress as my first blog, I spent months figuring out how to make a liquid-three column layout.

That was a complete waste of time. What you should do is think a lot about architecture. Once you get the skeleton of the site built, you should add quite a bit content, This lets you see how the index, category and your table-of-contents page looks with a bunch of listings.		 When I got the sense to switch to Movable Type I knew better. I spent a month sketching out and thinking about the architecture of the site. Then I just used the default "Classic" style.

There will be a time to make things pretty and unique, and more importantly, have liquid pages that fill the browser window width. That time is down the road.

[Update, 2018 redesign is responsive, and partially liquid.]
Bottom of first columnmove down to the left
Still, I wanted to have some difference in the 8 or 9 blogs that comprise the site. My design philosophy already includes a unique home page and table of contents. So to make the blogs look interesting

I put a background image in the header. I did this by adding a style rule to the blog stylesheet and uploading the image to the blog site. I used FileZilla and went around the whole "asset" malarkey.

The code I added to the stylesheet I got out of the great and faboulsy Syllizer. I added a rule in stylizer, saved that to a local file, and then cut-and pasted that into the sylesheet template in Movable Type. The code worked out to be:

#header
{
background-image: url(http://www.rako.com/Diamond/images/Diamond_bullet.jpg);
/*[disabled]background-position:577px 0px;*/
/*[disabled]background-repeat: no-repeat;*/
}

I played with the repeat and position rules in Sylizer, but then disabled them. I just figured to paste the code including the disabled part in, to remind me of my options down the road. The code let m eput a repeating image of a bullet with a diamond tip behind the header of the Diamond Bullets blog. I used the same mething to put a repeating imgage of the no-cheeze iso symbol behind hte header of the Recommended or not blog.

[Update} I had such fun putting a picture strip in the header I did one for every blog. Then I repeated the exact same code but substituted #footer where the the above has #header. Now the picture repeats across the footer as well.
move up a little to the right move down to the left

This post is in these categories:

Categories

 border bar
Bottom of first column This is the end.