Scalable multiple columns design for Universal Web Templates in Movable Type Professional Pack

| 0 Comments | 1 TrackBack
(Tested on Movable Type 4.1 with professional pack)

Whenever a change of column layout was in need, I directly modified side bar template with three or two columns layout unchanged. Furthermore, widths for respective columns were out of my control. While tracking templates and style sheet, I came up with a clue how to customize column layout then poured a couple of hours to make my blog seen as it is now aiming at expanding the number of columns of entrance page from three to four (or more ideally). Followings are what I did to achieve the goal. Correct me please if there is something wrong. Any comment or suggestion for improvement will be appreciated, too. (I am not a MT guru)

1. Adding new style sheet for override

A screen capture below shows you how I overrode existing style by adding my own at the bottom of main style sheet. After that, I created the customized style sheet, named mystyle.css, from Blog templates (index templates) section of MT administration menu. You may modify or put my copy (mystyle.txt) into your preferred location.

2. Defining columns layout and scheme on that new style sheet

Adding delta-inner and epsilon-inner (experimental and future expansion purpose only) will be enough because existing MT style sheets have sections of alpha-inner, beta-inner, and gamma-inner. Inspection said that the summed length of each columns were 940px in maximum for proper tabulation. You may put your own width as long as the entire length does not exceed that size. Putting a certain name for this column structure is everything to do. For this blog, I named it with myhome. Look up excerpts (mystyle.txt) commented by "MY HOME" and around.

3. Changing sidebar by slight modification

Modifying sidebar template can be inevitable; it will be preferable minimizing the change and/or making it independent from system wide template/style change. This is link is for sidebar template. I've just added "else" conditions to put my own control below it. Look up excerpts commented by "below added by hyok"(sidebar.txt) or around. One thing kept in mind is that a division "delta" MUST be newly and entirely added as suggested.

4. Applying new layout

As shown below, I changed "page_layout" value into "layout-myhome" made from above in main index template section. That's all.

You may need to revisit step two and three to approach an optimal point in column width and widget placement.

1 TrackBack

TrackBack URL: http://kokeb.net/mt/mt-tb.cgi/43

在Movable Type 4.2中集成了Professional Template,通过使用这个template,可以让blog看起来更像一个个人网站。具体如何安装可以看这里。另外我按照这篇文章修改了首页的style,变成4栏,让它看起来更informative。还有一个Template也很棒,叫Mid-Century,感兴趣的可以看一下。... Read More

Leave a comment

Recent Entries

Green peas are creeping over the ground!
This is attributed to a lazy farmer, Hyok Kim. :-D Anomaly in climate does not make sense any more.…
Farming 2010; the same but challenging
Last year's great experience from weekend family farm led me to another challenge right after move-out to new home.…
왕 초보 발코니(베란다) 정원!
보름 여 작업 끝에 베란다 정원을 완성했다. 주말에만 작업을 했으니 실제로는 4-5일 정도. 건장한 남자 두 명이 투입된 나름대로 힘든…
  Dull Smile by newflower.

accepted here

Locations of visitors to this page