[2007.1.27 有更新]

[2007.2.3 有更新]

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

[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)

Related Posts

• Jan 4, 2007 -- sablog-X 1.1模板一套 黑白的华丽
• Jan 4, 2007 -- sablog-X 1.2模板一套 黑白的华丽
• Apr 24, 2008 -- Sablog-X 1.6 => Wordpress 2.2.3 转换程序 – 080422 测试版
• Nov 18, 2007 -- SaBlog-X1.6 -> WordPress 2.2.3 数据完美转移.
• Jan 5, 2007 -- sablog模板设计教程[3] – default/style.css文件分析
• Jan 5, 2007 -- sablog模板设计教程[1]

———————————————————–                        |
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

Related Posts

• Jan 5, 2007 -- sablog模板设计教程[1]
• Oct 22, 2011 -- 深入理解Magento－第十章－数据操作&数据收集器
• Oct 22, 2011 -- 深入理解Magento－第九章－修改、扩展、重写Magento代码
• Oct 22, 2011 -- Magento安装教程
• Oct 20, 2011 -- Magento学习资源
• Feb 13, 2007 -- sablog系列下载.
• Jan 25, 2007 -- [sablog-x 1.2 模板]White for Sablog-X 1.2
• Jan 4, 2007 -- sablog-X 1.1模板一套 黑白的华丽
• Jan 4, 2007 -- sablog-X 1.2模板一套 黑白的华丽

当然sablog也不例外,作为一款优秀的博客程序也一定要有很多漂亮的模板.

现在开始进入正题,sablog和很多程序一样,模板文件是放在程序根目录的templates文件夹下的.sablog的templates目录下只有前台的模板文件夹,而sablog-x的后台模板也放到了templates目录下,后台模板默认为admin,sablog和sablog-x的默认前台模板都是default,而模板的内容也都在templates/default路径下,所以修改模板一般就是修改templates/default目录下的文件.当然最好不要修改默认模板,在templates目录下另建一个目录,然后将default中的文件全部拷贝到新建立的文件夹内,我们在新建立的文件夹内进行修改,以防止修改时发生不必要的麻烦.

未完待续

Related Posts

• Jan 5, 2007 -- sablog模板设计教程[3] – default/style.css文件分析
• Oct 22, 2011 -- 深入理解Magento－第十章－数据操作&数据收集器
• Oct 22, 2011 -- 深入理解Magento－第九章－修改、扩展、重写Magento代码
• Oct 22, 2011 -- Magento安装教程
• Oct 20, 2011 -- Magento学习资源
• Feb 13, 2007 -- sablog系列下载.
• Jan 25, 2007 -- [sablog-x 1.2 模板]White for Sablog-X 1.2
• Jan 4, 2007 -- sablog-X 1.1模板一套 黑白的华丽
• Jan 4, 2007 -- sablog-X 1.2模板一套 黑白的华丽

图片附件:

附件:white_black1.1.rar(103504 Byte)

Related Posts

• Jan 25, 2007 -- [sablog-x 1.2 模板]White for Sablog-X 1.2
• Jan 4, 2007 -- sablog-X 1.2模板一套 黑白的华丽
• Apr 24, 2008 -- Sablog-X 1.6 => Wordpress 2.2.3 转换程序 – 080422 测试版
• Nov 18, 2007 -- SaBlog-X1.6 -> WordPress 2.2.3 数据完美转移.
• Jan 5, 2007 -- sablog模板设计教程[3] – default/style.css文件分析
• Jan 5, 2007 -- sablog模板设计教程[1]

图片附件:

附件:black_white1.2.rar(95757 Byte)

Related Posts

• Jan 25, 2007 -- [sablog-x 1.2 模板]White for Sablog-X 1.2
• Jan 4, 2007 -- sablog-X 1.1模板一套 黑白的华丽
• Apr 24, 2008 -- Sablog-X 1.6 => Wordpress 2.2.3 转换程序 – 080422 测试版
• Nov 18, 2007 -- SaBlog-X1.6 -> WordPress 2.2.3 数据完美转移.
• Jan 5, 2007 -- sablog模板设计教程[3] – default/style.css文件分析
• Jan 5, 2007 -- sablog模板设计教程[1]