这几天时间比较闲,做了几套Sa1.6的风格。对于Sa的风格有了一点点的了解,所以写此文档来给新接触的朋友们分享,并写在后面我会简单写一下关于网页布局的CSS相对应的div以及简单的css修改办法。
备注:此说明是以Sa1.6的
默认风格为基础编写,以面向广大菜鸟为基准。所以讲解的会尽量详尽一下,对于sa模板有过研究的高手们可以直接略过。
一、关于模板风格的说明
模板文件都存放在
templates目录下,以文件夹的形式存放。当然,并不是说有一个文件夹,就有一个模板。例如在default目录下面,有
info.txt文件(即模板信息文件)、
screenshot.png文件(即模板缩略图文件)、
style.css(样式表文件)、
img目录(图片存放目录)、一些
.php文件(模板主文件)。
像前几天,在论坛有人问,为什么模板上传完后台没有显示。您查看一下,模板的文件是否存放在templates的次级目录中,如果info.txt等文件存放在templates/asa/asa下就不会显示。
二、关于模板.php文件的构成说明
index.php 通用页面的顶部以及侧边栏
footer.php 通用底部
archivers.php 归档archivers页面
comments.php 日志回复页面
links.php 友情链接页面
list.php 首页为列表显示时主体部分页面
login.php 登陆页面
message.php 操作提示消息页
none.php 自定义操作(基本上不需要进行更改)
normal.php 首页为标准显示时主体部分页面
profile.php 资料修改页面
reg.php 注册页面
search.php 搜索页面
show.php 日志全文显示页面
tag.php 标签全部显示页面
trackbacks.php 引用页面
以上文件中
飘红显示的为个人认为在制作风格时经常修改的文件。以上文件仅是针对sa的默认default模板说明,并不包括全部的sa模板,不过大部分未进行特殊修改或源码及修改的模板风格均符合这种模式。
三、关于模板.php文件的简单修改说明
1.此处为网友提出问题的一些说明。有疑问的请在后面跟贴,我会就一些我可以解答的问题,写在这里。如:
请问我如何把菜单中的home ac....等换成中文显示?
答:您打开index.php文件,找到代码:<ul class="menu">修改下面的<li>里面显示的项目即可。
四、关于样式表style.css文件的简单修改说明
1.此处为网友提问的一些回答,另外,我做了一份style.css样式表带有注解的。里面写明了全部的样式表标签的说明。
下载:我正在写,还没有写完,放在下面了。
2.您也可以提出一些问题,我会在下面给您做出解答。
请问我如何修改日志分页的数字Records的边框颜色。
答:.p_info(373行)处,修改border:1px solid #86B9D6;的颜色即可。
五、以上说明仅为个人意见,不代表sa官方立场。
我做个广告,小站新转到sa上,友链空缺,有做友情链接的,点我签名啊。
复制内容到剪贴板
代码:
/* CSS Optimization by Hoofei on May 31th, 2007 ,阿萨修改于2007年7月2日 http://www.sablog.net.cn */
* {
margin:0;
padding:0;
}
/*以下网页的总体样式 */
body {
font:12px Verdana, Tahoma, sans-serif;
color:#000;
line-height:140%;
background:#cdd6dd;
}
/*总体超链接*/
a {
color:#339;
text-decoration:underline;
}
a:hover {
color:#C00;
text-decoration:none;
}
/*网页的一些其它标准*/
textarea,input,select {
font:12px Verdana, Tahoma, sans-serif;
}
textarea {
line-height:150%;
overflow:auto;
padding:4px;
}
td {
font:12px Verdana, Tahoma, sans-serif;
color:#000;
line-height:160%;
}
input {
color:#000;
background:#fff;
padding:3px;
}
fieldset {
line-height:25px;
padding:10px;
}
hr {
height:1px;
border:1px solid #B3CBE1;
margin:5px 0;
}
ul, ol {
list-style:none;
}
div {
word-wrap:break-word;
}
/*整体布局*/
#outmain {
width:900px;
border-right:1px solid #386792;
border-left:1px solid #386792;
margin:auto;
padding:1px;
background:#fff;
}
/*顶部*/
#header {
height:80px;
border-top:6px solid #386792;
border-bottom:1px solid #386792;
background:#d6e3ef;
}
/*顶部大文字*/
h1 {
font:bold 28px Georgia, Verdana;
padding:10px;
}
/*分类菜单栏全局*/
ul.menu {
font:bold 14px Tahoma, sans-serif;
float:right;
}
/*分类菜单栏列表文字定义*/
ul.menu li {
font-size:14px;
line-height:26px;
display:inline;
padding:0 3px 0 8px;
}
/*激活状态分类菜单文字*/
ul.menu li.current_page_item a {
color:#C00;
}
/*快捷菜单及博客描述部分全局*/
#topmenu {
font:12px Verdana;
color:#036;
width:888px;
border-bottom:1px dashed #386792;
padding:6px;
background:#edf2f8;
float:left;
}
/*博客描述*/
#description {
text-indent:4px;
float:left;
}
/*头部部分结束*/
/*主体部分*/
#page {
width:100%;
border-bottom:1px dashed #386792;
margin-bottom:1px;
background:#fff url(./img/sidebar_border.gif) repeat-y;
float:left;
}
/*内容栏总体布局*/
#wrap {
width:655px;
padding:15px 15px 15px 0;
float:right;
}
/*侧边栏部分开始*/
/*侧边栏总体布局*/
#sidebar {
width:180px;
margin:0;
padding:15px;
float:left;
}
/*侧边栏分块部分*/
#sidebar p {
padding-bottom:10px;
text-align:center;
}
#sidebar p a {
margin:10px;
}
#sidebar p.more {
text-align:right;
padding:6px 0 0;
}
/*侧边栏日期部分*/
#sidebar table {
width:180px;
}
/*侧边栏分类标题*/
#sidebar h2 {
font-size:14px;
color:#999;
border-top:1px solid #B3CBE1;
margin:15px 0 0;
padding:15px 0;
}
/*侧边栏列表显示仙鹤*/
#sidebar li {
width:178px;
padding:3px 0;
}
#sidebar li span {
color:#666;
}
/*侧边栏日志信息部分数字*/
#sidebar li span.num {
color:#339;
}
/*侧边栏日历*/
.week {
background:#eee;
border-bottom:2px solid #aaa;
text-align:center;
padding:3px;
}
.cal_day1 {
text-align:center;
}
.cal_day2 {
text-align:center;
border:1px solid #999;
font-weight:700;
}
/*侧边栏定义结束*/
/*日志主体部分开始*/
/*内容栏全局定义*/
.content {
font-size:14px;
line-height:22px;
margin:15px 0;
}
.content p {
margin:15px 0;
}
.content ul {
margin:15px 22px;
list-style:disc;
}
.content ol {
margin:15px 30px;
list-style:decimal;
}
.needpwd {
border-bottom:1px solid #B3CBE1;
padding-bottom:20px;
margin:20px 0;
background:#fff;
}
/*首页日志标题栏*/
.posttitle {
font:bold 16px verdana;
line-height:28px;
margin:8px 0 0;
clear:both;
}
/*标准栏日期及其它信息*/
.postdate {
color:#777;
}
/*日志下部分类引用等信息栏*/
.postmetadata {
text-align:right;
padding-bottom:15px;
border-bottom:1px solid #B3CBE1;
margin:10px 0 15px;
}
/*日志主体定义结束*/
/*全局底部内容*/
#footer {
border-top:6px solid #386792;
padding:10px;
background:#d6e3ef;
clear:both;
}
/*首页内容栏头部信息,标准、列表部分。*/
#top {
width:655px;
padding-bottom:12px;
margin-bottom:10px;
border-bottom:1px solid #B3CBE1;
float:left;
}
#top strong {
float:left;
}
/*其它的一些相关定义*/
.formbox p {
margin:0;
padding:0 0 12px;
}
.codeimg {
cursor:pointer;
vertical-align:bottom;
padding-bottom:1px;
}
/*日志内容页标题栏*/
.title {
font:bold 14px verdana;
position:relative;
height:18px;
text-indent:5px;
border-left:6px solid #d6e3ef;
border-bottom:1px solid #d6e3ef;
margin-bottom:10px;
clear:both;
padding:2px;
}
/*评论输入栏定义*/
.formfield {
color:#000;
border:1px solid #bbb;
background:#edf2f8;
}
/*评论提交表单定义*/
.formbutton {
font-size:12px;
color:#000;
width:50px;
height:22px;
border:1px solid #bbb;
line-height:22px;
border-left:4px solid #bbb;
background:#edf2f8;
}
/*日历当前月分定义(不晓得为啥弄这儿来了)*/
.curdate {
font-weight:700;
text-align:center;
padding-bottom:10px;
}
.attach {
padding:10px 0;
}
.attach-desc {
background:#edf2f8;
border:1px solid #386792;
padding:5px;
}
.tags {
line-height:26px;
}
.art-title {
font-weight:700;
margin-bottom:10px;
}
/*日志内容页,上一篇下一篇处*/
#article-other {
text-align:center;
margin:15px 0;
font-weight:bold;
}
#tburl {
margin:5px 0 15px;
}
.lesscontent {
display:block;
width:650px;
clear:both;
line-height:20px;
margin:5px 0 15px;
}
.lessdate {
color:#777;
font-size:11px;
padding-top:2px;
text-align:right;
margin-bottom:12px;
padding-bottom:12px;
border-bottom:1px solid #B3CBE1;
}
#message {
margin-top:100px;
background:#fff;
text-align:center;
width:500px;
border:1px dotted #386792;
margin-right:auto;
margin-left:auto;
padding:20px;
}
#message h2 {
color:#339;
font-size:14px;
margin:20px auto;
}
.list li {
line-height:35px;
border-bottom:1px dashed #ddd;
clear:both;
}
code {
font-family:"Courier New", Courier;
width:620px;
border:1px solid #b3cbe1;
border-left:3px solid #b3cbe1;
background:#f8f8f8;
word-break:break-all;
display:block;
white-space:normal;
margin:5px;
padding:10px;
overflow:auto;
}
.quote {
border:1px solid #000;
background:#edf2f8;
margin:5px 0;
padding:5px;
}
.avatar {
border:1px solid #d6e3ef;
background:#EBF3FB;
}
.ajaxmsg {
right:0;
background:red;
color:#fff;
line-height:20px;
position:fixed;
top:0;
padding:0 20px;
}
.ajaxdiv {
border:1px solid #386792;
background:#edf2f8;
position:absolute;
padding:8px;
}
.ajaxdiv H2 {
font-size:12px;
line-height:24px;
margin:0;
}
.ajaxdiv H2 a {
font-weight:400;
float:right;
}
.p_bar {
clear:both;
margin:15px 0;
}
.p_bar a {
font-size:12px;
text-decoration:none;
padding:2px 5px;
}
.p_bar a:hover {
background:#F5FBFF;
border:1px solid #86B9D6;
text-decoration:none;
}
.p_info {
background:#F5FBFF;
border:1px solid #86B9D6;
margin-right:1px;
padding:2px 5px;
}
.p_num {
background:#FFF;
border:1px solid #DEDEB8;
margin-right:1px;
}
.p_redirect {
background:#FFF;
border:1px solid #DEDEB8;
margin-right:1px;
font-weight:700;
font-size:12px;
}
.p_curpage {
margin-right:1px;
border:1px solid #DEDEB8;
background:#FFFFD9;
color:#92A05A;
font-weight:700;
padding:2px 5px;
}
.linkover {
margin:0 0 20px 0;
padding:10px 0;
clear:both;
}
.linkover li {
color:#666;
width:100px;
line-height:20px;
margin:0 10px;
float:left;
}
.linkover li.onelink {
width:300px;
margin:0 10px 8px;
}
.linkover li a {
font-weight:700;
}
.linkgroup {
font-weight:700;
font-size:14px;
margin:10px 0 5px;
}
h1 a,.cal_day1 a:hover,.cal_day2 a:hover,.posttitle a,.curdate a,.listtd a {
text-decoration:none;
}
.navlink li.current_page_item a:hover,.cal_day1 a,.cal_day2 a,.curdate a:hover,.listtd a:hover {
text-decoration:underline;
}
#guestlink,#top span {
float:right;
}
#sidebar ul li img,.p_bar * {
vertical-align:middle;
}[
本帖最后由 sunland 于 2007-7-2 16:54 编辑 ]