White for Sablog-x 1.2
[2007.1.27 有更新]
[2007.2.3 有更新]
[2007.2.9 有更新]
继黑白的华丽之后又一作品
这次变动非常大
将简单进行到底
超简洁的界面
添加了链接和图片附件的渐变特效
效果非常好
注意:以前有朋友跟我反映上传完毕不能正常显示,今天我也遇到这种情况了,是由于ftp工具传输造成的,原因还不清楚,传送完毕之后会多出很多的换行,破坏了模板结构,造成无法正常显示,如果您上传之后无法正常显示请检查一下是否是类似情况. -02.15
图片附件:
附件:whire for sablog-x 1.2 070204.rar(64624 Byte)
附件:white for sablog-x 1.2 070209.rar(50641 Byte)
[2007.2.3有更新]
这个是white for sablog-x 1.2的日志归档部分
很久之前就想做了
但一直没有时间
正好这次出新模板
就一起做了
下在完毕解压然后覆盖在archives目录下即可
图片附件:
附件:white for sablog-x 1.2 archives 070201.rar(4055 Byte)
元旦的时候拍的,一直没有传上来.
我美丽的家乡,敦化.
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
图片附件:
———————————————————- + +
titlelogo |
}pageheader
navlink |
———————————————————- + |
description | guestlink }topmenu
———————————————————-+ + |
| | |
| | |
| | |
| | |
| | |
| | |
left | right | |
| | |
| }page }这部分是inmain 这之外是outmain
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| | |
| page** | |
———————————————————– |
footer
———————————————————– +
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
这里要提前讲一下模板文件是如何被使用的,以便理解下面内容,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的程序,这里只是为了让大家更好的理解模板的工作方法,从而做出更好的模板.
未完待续
本人技术有限,难免出现错误,希望高手指出
在接下来的文章里我将详细的为大家介绍如何修改每一个文件
当然sablog也不例外,作为一款优秀的博客程序也一定要有很多漂亮的模板.
现在开始进入正题,sablog和很多程序一样,模板文件是放在程序根目录的templates文件夹下的.sablog的templates目录下只有前台的模板文件夹,而sablog-x的后台模板也放到了templates目录下,后台模板默认为admin,sablog和sablog-x的默认前台模板都是default,而模板的内容也都在templates/default路径下,所以修改模板一般就是修改templates/default目录下的文件.当然最好不要修改默认模板,在templates目录下另建一个目录,然后将default中的文件全部拷贝到新建立的文件夹内,我们在新建立的文件夹内进行修改,以防止修改时发生不必要的麻烦.
未完待续
作者:maker
发布时间:2007.1.5
这是我的第一个正式php作品,一款批量文件内容替换程序,用来批量替换相同的内容.
运行环境:PHP
功能说明:
使用说明:
附件:replacer_2.0.rar(4960 Byte)
图片附件:
