CSS and XHTML: July 2006 Archives

花了点心思,还是完成了从 MT3.2 到 3.31 模板的修改。

以前我的这个设计是在 MT3.2 的基础上做的。由于CSS样式是根据页面结构来设计的,所以随着MT3.31页面模板结构的变化,其CSS样式也应该在原来的基础上做相应的变化 (了解MT3.2的模板特点)。

其实并不是件难事,有点像是帖几块创口贴的味道,贴这里不对那就换个地方贴,总会贴中那个伤口。

在开始之前,我已经新建了一个MT,把MT3.2的所有模板和CSS文件全部覆盖到新的MT(相应的模板)上面,然后"rebuild all files"。这样出来的就是原来的样式,也是备份下以前的模板和样式。如果你只是把所有模板和样式表储存在本地,那好像还不够。

所谓储存的那些3.2的模板可能是你以前自己修改的,也可能是在其他网站下载过来的主题(或皮肤),都没有关系,问题是你确定要使用它来作为你的3.3的样式。

有了上面这个备份,现在就要开始纯粹的体力活了(我是老实人,喜欢做老实事)。首先比较两份CSS文件(3.2和3.3),好苦。把3.2中没有的 class 和 ID 从3.3中复制过来,这样我这个MT3.3 的CSS 文件就应该包含以前的样式和3.3版本新增加的样式了。将它保存好之后就可以看看现在的网站是什么样子了。整个不对头了?

如果是整个的结构都走调了,那你首先要检查的是页面模板的 body 标签中的 "class=......" 是否对头,两栏,三栏还是左边右边。接下来再看 "banner" ,"alpha","beta" 等。这几个 ID 对了就应该不会走调了,布局正确。

因为你已经有了3.2 的备份,所以你开两个窗口看浏览器中的效果有什么不同的地方。本来以前这里有这个的,现在却不见了?

那你就要找到这个东西的名字才知道结果。

例如在首页,本来每篇文章标题上是有时间的,现在没有了,那就到 Main Index 模板中找找看,它的名字是 "date-header" (h2 class="date-header"),然后到CSS文件中找它的定义,你看到了:

/* Main index styles
Suppress date header on main index */
.main-index .date-header { display: none; }

这个时间被隐藏起来了。你想要它象以前一样的显示? 把括号中的 "display: none;" 去掉就是。

你发现哪个东西和以前不一样了?或者你想要它变成一个别的样子?那还是要到模板中先知道它叫什么名字,再到CSS文件中看它的定义,针对该元素的定义进行修改。嘿,先到 Firefox 下看结果,再到 Internet Explorer 下看是否正常 ! MT3.3不是新加了 TAGS 的功能吗?到 Main Index,Individual Entry Archive 和 Search Results Template 几个模板中去看看,它都分别被叫做什么名字?还是要到CSS中找到相关的定义才能对它进行修改或重定义。没有什么特别的。

MT3.31中所有的页面模板和 MT3.2 时代的一个很大的不同是每个页面模板的 body 标签都被分别同时定义了两个类,而3.2 只有一个。怎么说?

看几个模板吧:

<body class="layout-two-column-right main-index">
<body class="layout-two-column-right master-archive-index">
<body class="layout-two-column-right category-archive">
<body class="layout-two-column-right individual-entry-archive">
<body class="layout-one-column comment-preview">
<body class="layout-one-column comment-pending">

以前是类似于这样的:
<body class="layout-two-column-right">

最上面的首页模板中,body 同时被 layout-two-column-right 和 main-index 两个类定义着。不能说这是多此一举。它能更好的满足各个用户的需求,不是说“林子大了什么样的鸟都有”吗?这样你就可以把各个不同的页面做成不同的样子,只要分别定义后面那个类就是。你不想搞得那么是是非非,那就统统地把他们集合到一起给一个统一的定义,不就都一样了吗?

定义body的那些类,不一定都能在CSS中找到,有的没有,主要的几个都有。你要定义它的时候只要到模板中把它复制过来就是,或者单独定义,或者加到同类的里面让它和那些一样就是了。

MT3.3 的模板中,新加了一个模板叫“搜索模板”(Search Results Template),这在以前是没有的。加上来方便多了,而且它是个相当重要的模板类型。我在这个搜索模板中看到了不少的象铁路一样的东西:

<MTIgnore>
########## STRAIGHT SEARCHES GET THE SEARCH QUERY FORM
</MTIgnore>

如果你还不完全明白他们的含义,最好别碰他们啊,都是关于搜索的条件之类的玩意。我不明白我就不动他们。我明白那几个 clas,ID 和那几句洋文什么的,我就改动一点,翻译一下。胆小呢。

还有,那个 Comment Listing Template ,嘿嘿, 里面是空心的,什么都没有 ! 不会吧?有点吓人?那是 Movable Type 的一个小失误,他们忘记了! 可能是那个工程师正好肚子痛来不及了。不过没关系,没有什么影响。因为那是用来评论时以弹出窗口的形式用的模板。如果你不是用弹出窗口那它就没有用,如果你要弹出窗口你可以把3.2的这个模板复制过来就是。总算可以放心了!过不了几天,Movable Type 应该会针对这个模板出个通知的。

其实没有什么好说的,无非就是找来找去,比来比去的。象那首歌:“找呀找呀找呀找,找到一个朋友 ... ...”

虽然有点繁琐,细心点就好了。当最终你的修改完成时,你会觉得还算值。

有点象记流水账哦。写了一堆,也不知道朋友们是不是被我搞糊涂了?实在糊涂的话,把我这个网站的页面多翻几次可能会清醒点。

About this Archive

This page is a archive of entries in the CSS and XHTML category from July 2006.

CSS and XHTML: June 2006 is the previous archive.

CSS and XHTML: September 2006 is the next archive.

Find recent content on the main index or look in the archives to find all content.