36 123
发新话题
打印

Sablog1.6模板文件说明及CSS样式简单修改[菜鸟通用]

Sablog1.6模板文件说明及CSS样式简单修改[菜鸟通用]

  这几天时间比较闲,做了几套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 编辑 ]

TOP

非常钦佩楼主的人格,奉献风格已经让人刮目相看,更把新手最需要的知识奉献总结出来,可谓凡人之英才啊!

TOP

另外,楼主的BLOG是故意那么写的,还是错别字,非菜?不是韭菜?

TOP

引用:
原帖由 lcd 于 2007-7-2 16:21 发表
另外,楼主的BLOG是故意那么写的,还是错别字,非菜?不是韭菜?
我们这里都叫非菜。故意地。像现在很多人叫别野一样。

TOP

呵呵,支持阿萨,哈哈

TOP

问下楼主,做风格的时候 css文件都是修改的,还是自己一个一个写的啊,那么多。
还有index.php等风格中的文件,是不是在上面修改,还是自己重新写,在加上sa的控制语句啊。:

TOP

引用:
原帖由 ajiao 于 2007-7-4 10:08 发表
问下楼主,做风格的时候 css文件都是修改的,还是自己一个一个写的啊,那么多。
还有index.php等风格中的文件,是不是在上面修改,还是自己重新写,在加上sa的控制语句啊。:
看你自己的一丝喽,如果在原模板的基础上修改,那么可以直接修改,如果做一个新的模板当然也可以在原基础上修改,也可以自己写

TOP

引用:
原帖由 ajiao 于 2007-7-4 10:08 发表
问下楼主,做风格的时候 css文件都是修改的,还是自己一个一个写的啊,那么多。
还有index.php等风格中的文件,是不是在上面修改,还是自己重新写,在加上sa的控制语句啊。:
一般情况下,都是直接修改的。省事啊。要不很多都要自定义,太麻烦了。

TOP

回复 #1 sunland 的帖子

楼主值得佩服啊,,一句话,辛苦了,,

TOP

回复 #1 sunland 的帖子

多谢楼主的奉献 人民会记得你的

TOP

十分好啊...继续写些东西吧

TOP

I like it ,  Thank LZ .

TOP

支持楼主,

TOP

谢谢楼主.

字数啦.
Small!z

TOP

支持asa~~~

TOP

 36 123
发新话题