[sablog-x 1.2 模板]White for Sablog-X 1.2

White for Sablog-x 1.2

[2007.1.27 有更新]

[2007.2.3 有更新]

  • 重新写了代码,完全符合w3c标准,可以在firefox下正常显示
    [2007.2.9 有更新]

继黑白的华丽之后又一作品
这次变动非常大
将简单进行到底
超简洁的界面
添加了链接和图片附件的渐变特效
效果非常好

注意:以前有朋友跟我反映上传完毕不能正常显示,今天我也遇到这种情况了,是由于ftp工具传输造成的,原因还不清楚,传送完毕之后会多出很多的换行,破坏了模板结构,造成无法正常显示,如果您上传之后无法正常显示请检查一下是否是类似情况. -02.15

图片附件:
white.jpg

附件:[whire for sablog-x 1.2 070204.rar](http://www.foolbird.net/wp-content/uploads/2007/02/155_whire for sablog-x 1.2 070204.rar)(64624 Byte)

附件:[white for sablog-x 1.2 070209.rar](http://www.foolbird.net/wp-content/uploads/2007/02/188_white for sablog-x 1.2 070209.rar)(50641 Byte)

White for Sablog-X 1.2 Archives (日志归档部分)

[2007.2.3有更新]

  • 修改了样式表,完全遵循w3c标准,可以在firefox下正常

这个是white for sablog-x 1.2的日志归档部分
很久之前就想做了
但一直没有时间
正好这次出新模板
就一起做了

下在完毕解压然后覆盖在archives目录下即可

 

图片附件:
archives.jpg

附件:[white for sablog-x 1.2 archives 070201.rar](http://www.foolbird.net/wp-content/uploads/2007/02/154_white for sablog-x 1.2 archives 070201.rar)(4055 Byte)

敦化雪景

元旦的时候拍的,一直没有传上来.

我美丽的家乡,敦化.

图片附件:
img1590a.jpg

图片附件:
img1591a.jpg

图片附件:
img1593a.jpg

图片附件:
img1594a.jpg

图片附件:
img1595a.jpg

图片附件:
img1596a.jpg

图片附件:
img1597a.jpg

图片附件:
img1598a.jpg

图片附件:
img1599a.jpg

图片附件:
img1600a.jpg

图片附件:
img1601a.jpg

图片附件:
img1603a.jpg

图片附件:
img1604a.jpg

图片附件:
img1605a.jpg

图片附件:
img1606a.jpg

图片附件:
img1609a.jpg

图片附件:
img1611a.jpg

sablog模板设计教程[3] - default/style.css文件分析

———————————————————-        +                +
titlelogo                                |
}pageheader
navlink         |
———————————————————-             +                |
description        |     guestlink                }topmenu
———————————————————-+           +                 |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
left        |         right                  |                        |
|                           |                        |
|                           }page                }这部分是inmain 这之外是outmain
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|                           |                        |
|        page**                   |                        |

———————————————————–                        |
footer
———————————————————–                         +

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
341
342
343
344
345
346
347
348
349
350
351
352
353
354
355
356
357
358
359
360
361
362
363
364
365
366
367
368
369
370
371
372
373
374
375
376
377
378
379
380
381
382
383
384
385
386
387
388
389
390
391
392
393
394
395
396
397
body {//整体页面的样式
margin: 0px;//外补丁设置为0,主要为了去掉页面内容和浏览器间的空隙
font: 12px "Verdana", "Tahoma", "sans-serif";//字体样式
line-height: 140%;//行高
color: #000;//字体颜色
background-color: #cdd6dd;//最底层背景颜色
text-align: center;//页面内容对齐方式,居中
}
form {//表单样式
padding: 0px;//表单内补丁为0,为了去掉表单其他内容间的空隙
margin: 0px;//表单外补丁为0,为了去掉表单其他内容间的空隙
}
h1 {
font-size: 14px;
color: #000;
margin: 0px;
padding: 0px;
}
ol li {//列表的样式
list-style-position: outside;
list-style-type: decimal;
}
a {//链接的样式
color: #333399;
text-decoration: underline;//默认有下划线
}
a:hover {//鼠标在链接上停留时链接的样式
color: #CC0000;
text-decoration: none;//停留时无下划线
}
td {//表格中的样式
font: 12px "Verdana", "Tahoma", "sans-serif";
line-height: 160%;
color: #000;
}
textarea {//表单文本域的样式,添加评论时的文本域等都被这个控制着
font: 12px "Verdana", "Tahoma", "sans-serif";
padding: 4px;
}
input  {//控制文本框 密码框和按钮的样式
background-color: #fff;
color: #000;
font: 12px "Verdana", "Tahoma", "sans-serif";
padding: 3px;
}
hr {//输出一条横线  sablog中很多地方都是用这个来分隔内容的
height: 1px;
border: 1px solid #B3CBE1;
margin-top: 15px!important;
margin-top: 5px;
margin-bottom: 15px!important;
margin-bottom: 5px;
}
#description {//站点描述样式
float: left;
padding-top: 0px!important;
padding-top: 3px;
text-indent:2px;
font: 12px "Verdana", "Tahoma", "sans-serif";
color: #003366;
}
#guestlink {//菜单链接的样式   就是 注册 | 登陆 字样的样式
float: right;
font: 12px "Verdana", "Tahoma", "sans-serif";
color: #003366;
}
#page {//中间部分整体样式
width: 100%;
background-repeat: repeat-y;
margin: 0px;
padding: 0px;
float: left;
background-color: #fff;
background-image: url(sidebar_border       $1.gif);
border-bottom: 1px dotted #386792;
margin-bottom: 1px;
clear:both;
}
#viewmode {//浏览模式 标准 列表 字样的样式
float: right;
}
#right {//中间右侧部分的样式
float: right;
width: 525px;
padding: 12px 15px 15px 15px;
text-align: left;
}
#top {
padding-bottom: 12px;
margin-bottom: 15px;
border-bottom: 1px solid #386792;
}
#left {//中间右侧部分的样式
float: left;
margin: 0px;
width: 180px;
padding: 20px 15px 15px 15px;
text-align: left;
}
#left h2 {//标题的样式 在default里用来控制左侧 日志分类 热门标签 日志归档 搜索文章 等字样的样式
font-size: 14px;
color: #999;
padding: 15px 0px;
margin: 15px 0px 0px 0px;
border-top: 1px solid #B3CBE1;
}
#left ul {
margin: 0px;
padding: 0px;
list-style-type: none;
}
#left ul li {
margin-bottom: 2px;
overflow:hidden;
display:block;
width:178px !important;
width /**/:178px;
clear: both;
}
#left #icp {//备案信息样式
margin-top: 15px;
padding-top: 15px;
border-top: 1px solid #B3CBE1;
}
.formbox {
line-height: 150%;
padding: 5px 0px;
}
.title {//标题
font-size: 14px;
clear:both;
position:relative;
height:18px;
font-weight: bold;
text-indent: 5px;
border-left: 6px solid #d6e3ef;
border-bottom: 1px solid #d6e3ef;
padding: 2px;
}
.newcminfo {
font-size: 11px;
padding-bottom: 7px;
color: #606060;
line-height: 13px
}
.formfield {
color: black;
background-color: #edf2f8;
border:1px solid #bbb;
padding: 3px;
}
.formbutton {//表单按钮
color: black;
background: #edf2f8;
border:1px solid #bbb;
padding-top: 0px!important;
padding-bottom: 3px!important;
padding: 3px 2px 0px 2px;
height: 21px;
border-left: 4px solid #bbb;
}

.cal_day1 {//日历
font-size: 11px;
text-align: center;
}
.cal_day1 a {//日历
text-decoration: underline;
}
.cal_day1 a:hover {//日历
text-decoration: none;
}
.cal_day2 {//日历 今天的样式
font-size: 11px;
text-align: center;
border: 1px solid #999;
font-weight: bold;
}
.cal_day2 a {//日历 今天的链接样式
text-decoration: underline;
}
.cal_day2 a:hover {//日历 鼠标停留在今天的链接上时的样式
text-decoration: none;
}
.curdate {//日历 年月的样式
font-weight: bold;
font-size: 11px;
text-align: center;
padding-bottom: 10px;
}
.curdate a {//日历 年月的链接样式
text-decoration: none;
}
.curdate a:hover {//日历 鼠标停留在年月的链接上时的样式
text-decoration: underline;
}
.attach {//附件
padding: 10px 0px;
}
.attach-desc {//附件
background-color: #edf2f8;
padding: 5px;
border: 1px solid #000;
display: inline;
}
.content {//文章正文样式
clear: both;
display: block;
margin-right: auto;
margin-left: auto;
}
.tags {//标签的样式
padding: 10px 0px;
}
.pagelink {//翻页部分 普通页码样式
padding:1px 3px;
font-size:11px;
font-weight:normal;
border:1px solid #386792;
}
.pagelink a {//翻页部分 普通页码链接样式
color: #333399;
text-decoration: none;
}
.pagelink2 {//翻页部分 第一页 最后一页 上页 下页的样式
padding:1px 3px;
font-size:11px;
font-weight:bold;
border:1px solid #386792;
}
.pagelink2 a {//翻页部分 第一页 最后一页 上页 下页的链接样式
color: #333399;
text-decoration: none;
}
.pagelink3 {//翻页部分,Record:的样式
padding:1px 3px;
font-size:11px;
font-weight:normal;
border:1px solid #386792;
background-color:#edf2f8;
}
.pagecurrent {//翻页部分,当前页链接的样式,如果当前是第一页,那么1就为此样式
padding:1px 3px;
font-size:11px;
font-weight:bold;
color:#000;
background-color:#d6e3ef;
border:1px solid #386792;
}
.post {//文章整体样式
margin-right: auto;
margin-left: auto;
overflow: hidden;
}
.posttitle {//文章标题样式
text-indent: 8px;
border-left: thick solid #386792;
font-size: 14px;
font-weight: bold;
padding: 2px;
margin-top: 5px;
clear:both;
}
.posttitle a {//文章标题链接样式
color: #333399;
text-decoration: underline;
}
.posttitle a:hover{//鼠标停留在文章标题链接上时的样式
height: 70px!important;
background-color: #d6e3ef;
border-bottom: 1px solid #386792;
vertical-align: text-bottom;
}
#titlelogo {//博客名称 或者 logo 的样式
padding: 10px;
float: left;
}
#article-other {
text-align: center;
margin-bottom: 15px;
}
#tburl {
margin: 5px 0px 15px 0px;
}
#trackbacks {//引用部分的样式
margin: 5px 0px 15px 0px;
}
.tbcontent {
margin: 5px 0px 10px 0px;
}
.tbdate {
color: #777777;
font-size: 11px;
padding-top: 2px;
text-align: right;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #B3CBE1;
}
.cmcontent {//评论内容样式
margin: 5px 0px 15px 0px;
overflow:hidden;
display:block;
width:523px !important;
width /**/ :571px;
clear: both;
}
.cmdate {//评论日期样式
color: #777777;
font-size: 11px;
padding-top: 2px;
text-align: right;
margin-bottom: 12px;
padding-bottom: 12px;
border-bottom: 1px solid #B3CBE1;
}
#message {//message.htm中消息的样式
margin-top: 100px;
background-color: #fff;
text-align:center;
width: 500px;
padding: 20px;
border: 1px dotted #386792;
margin-right: auto;
margin-left: auto;
}
.navlink {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的样式
float:right;
padding-bottom:5px;
font-family: "Tahoma", "sans-serif";
font-weight: bold;
margin-top: 50px;
}
.navlink a {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的链接样式
padding-right:10px;
text-decoration: none;
}
.navlink a:hover {//Home Archives Users Attachments Rss Tags Trackbacks Wap  菜单的链接样式
padding-right:10px;
text-decoration: underline;
}
#topmenu { //description + guestlink的整体样式
height: 18px!important;
background-color: #edf2f8;
border-bottom: 1px dotted #386792;
padding: 5px;
}
.week {//日历中 星期 一 二 三 四 无 六 日 的样式
padding: 3px;
font: 11px "Tahoma", "sans-serif";
background-color: #eee;
border-bottom: 2px solid #aaa;
text-align: center;
}
.keywordtd {
padding: 3px 10px;
border-bottom: 1px solid #ccc;
}
.listtd {
padding: 3px 0px;
border-bottom: 1px solid #ddd;
}
.listtd a {
text-decoration: none;
}
.listtd a:hover {
text-decoration: underline;
}
.phpcode {//这个是在添加文章时用的,用来显示php或者其他代码,要手动添加
border: 1px solid #b3cbe1;
border-left: 3px solid #b3cbe1;
background-color: #f8f8f8;
color: #000000;
margin: 5px;
padding: 5px;
}
.quote {
margin: 5px 0px;
padding: 5px;
border: 1px solid #000;
background-color: #edf2f8;
}
.divOFF {
display:none;
}
.divON {
display:block;
}
.attachttitle {//日志归档标题样式
font-weight: bold;
}
.attachicon {//日志归档
float: right;
}
.attachdesc {//日志归档
padding: 10px 0px;
}

先写这些吧,台湾地震之后博客访问就奇慢,又连不上了,有高手帮补充一下
未完待续

作者:maker

发表时间:2007.1.5

sablog模板设计教程[2] - sablog模板的组成

下面我来介绍一下sablog-x模板的组成部分,sablog与其大同小异,但比sablog-x更加简单

这里要提前讲一下模板文件是如何被使用的,以便理解下面内容,php中的模板不是由页构成,而是由块构成,我们可以把一个首页理解成若干个块,以sablog来举例,一般分为 header,footer和page,header块显示在页面最顶部,一般用来显示logo;footer块显示在页面最底部,一般用来显示版权信息;page块也就是中间的主要内容部分,很重要的是page还分为两块,分别是left和right,left就是首页中间左面的部分,用来显示日历,最新评论,日志分类,日志归档,友情链接等内容,而其实日历,最新评论,日志分类,日志归档,友情链接其实也是属于left中的块;right就很复杂了,在不同的页面中他显示不同的内容,调用不同的模板,比如在首页标准浏览模式下他调用normail.htm,列表模式下他调用list.htm,而在用户列表页面他调用user.htm等等.而这里指的模板不是整个页面的模板,而是某一块的模板.

目录
calendar

样式表
style.css

页面文件
attachment.htm

comments.htm

footer.htm

index.htm

left.htm

list.htm

login.htm

message.htm

none.htm

normal.htm

profile.htm

reg.htm

rss.htm

search.htm

searchstats.htm

show.htm

showuser.htm

tag.htm

trackbacks.htm

user.htm

图片
big5.jpg 这个基本上没有什么用,用来显示编码的
gbk.jpg 这个基本上没有什么用,用来显示编码的
noface.jpg 这个是在用户没有设置头像的时候默认显示的头像图片
sidebar_border.jpg 在默认模板default中是中间部分的背景,主要是为了控制显示中间的竖线
top_home.gif 这个是什么没有太注意…
watermark.png 是水印标记,当在后台打开了水印功能请修改此图片

这里再给大家举了例子,来说明一下模板是如何工作的,当用户发出请求进入yourdomain.com的时候,也就是进入你的首页的时候,我们这里先不涉及缓存问题,首先程序会从设置里找到你当前使用的模板名,然后去指定模板目录调用index.htm,index.htm又会调用header.htm,left.htm,footer.htm,然后程序再根据当前的请求来判断right部分去调用哪个模板,如果当前浏览模式为标准,请求为index.php,那么right部分会调用normal.htm在调用这些模板的同时对模板中的变量进行替换,然后再生成缓存,最后输出我们看到的首页.不过我说的这个并不是sablog-x中模板的工作流程,因为一直很忙,没有太多时间去读sablog-x的程序,这里只是为了让大家更好的理解模板的工作方法,从而做出更好的模板.

未完待续
本人技术有限,难免出现错误,希望高手指出
在接下来的文章里我将详细的为大家介绍如何修改每一个文件



作者:maker

发表时间:2007.1.5