body {font-size:12px;font-family:"Verdana",
"Arial","Tahoma";background:url(http://photo7.yupoo.com); color:#8c9092;}

这段代码设置底色图片，background:url是使用连接的图片，红色是可以自定义图片的地址，如果只需要使用单一的颜色而不是图片，可以直接使用background:#ffffff,蓝色是自定义颜色代码, 绿色是自定义整体版面字体的颜色。颜色代码可参考:Web网页安全色谱

设置主体字体：

a:link {text-decoration:none;color:#86d1d1;}                    这个是分类栏普通状态下显示的颜色
a:visited {text-decoration:none;color:#86d1d1;}                这个是分类栏普通状态下显示的颜色
a:hover {background-color:none;color: #ffffff;}                 这个是鼠标移动到字体上时显示的颜色
a:active {text-decoration:none;color:#ffcc99;}                   这个是鼠标点击下去时显示的颜色

设置主体头部：

#head {background:url(http://photo7.yupoo.com) no-repeat;height:330px;width:800px;}

红色是可以自定义图片的地址，其实只要有background:url都是可以自定义图片的（当然有些没有的也可以自己添加上去）。绿色是设置图片的高度，蓝色是设置图片的宽度，px代表的是象素，数字可以自己调试。

blog名称和作者名，如果想要不显示，只要添加这段代码:#head h1, #head p {display:none;}

红色代表不显示这个2个部分，其实任何不想显示的地方只要在后面加上display:none；就可以了。

设置主体中间部分：

#wrapper {background:url(http://photo7.yupoo.com);width:800px;margin-left:auto; margin-right:auto;}

红色是自定义图片部分，绿色是自定义宽度，这里使用希儿的方法很不错，将图片裁减成1px，会使显示快多了，蓝色代表的是自动居中。

#main {margin:0px 8px 0px 8px;}
#inner {float:left;width:100%;}
#shead {display:none;}
#content {margin:0 0 0 220px;}

这几个部分通常是不会怎么改动的，所以我也不阐述了。具体请教高手吧~~~（是不是有点不负责任- -）

设置主体底部：

#footer {clear:both;background:url(http://photo7.yupoo.com);no-repeat top;height:56px;padding:10px 0 0 0;}

红色是自定义图片地址，绿色是自定义高度。如果你不打算有底部的话，请无视这段...

设置分类栏：

#menu {position:absolute;width:734px;top:310px;background:none;}

红色是绝对定位，绿色是宽度，蓝色是从顶部开始设置到距离它310px的位置，具体数字可以自己调试。

#menu a:link {text-decoration:none;color:#86d1d1;}               这个是分类栏普通状态下显示的颜色
#menu a:visited {text-decoration:none;color:#86d1d1;}           这个是分类栏普通状态下显示的颜色
#menu a:hover {background-color:none;color: #ffffff;}            这个是鼠标移动到字体上时显示的颜色
#menu a:active {text-decoration:none;color:#ffcc99;}               这个是鼠标点击下去时显示的颜色

#menu h3,  #menu li span{display:none;}
#menu ul {padding:0;margin:5px;}
#menu li {list-style:none;float:left;margin:0 18px 0 18px;}        这个是调整分类栏之间的距离，前面2个不太清楚，通常我不改动的。（再次不负责任...- -）

设置边栏：

说到边栏，我是真的很晕很晕，因为实在到现在还是搞不清楚很多设置问题，我的第一个模版就是被边栏搞的头昏眼花。因为边栏的组成问题不是像我们这种低手能搞定的...如果是新手的话，学我一样，能简化就简化吧-______-

#sidebar {float:left;width:188px;margin:13px 0 0 7px;background:none;}

红色是边栏位置，现在是靠左。绿色是边栏的宽度，蓝色是边栏与页面边之间的距离。

#sidebar h3 {margin:0;cursor:pointer;no-repeat right;font-size:12px;height:23px;background:#86d1d1;padding:0 0 0 13px;color:#ffffff;}

这个是设置边栏的头部，红色是设置边栏头部的颜色代码，也可以自定义图片，紫色是设置边栏头部字体的颜色，绿色是设置高度，蓝色是设置边栏头部字体到边部的距离。

设置日志：

.normallog h4 {background:#e7e6e6;no-repeat;padding:5px 5px 5px 5px;margin:13px 5px 18px 0px;font-size:11px;font-weight:normal;color:#cccc33} 

红色是设置日志标题的背景的颜色，可以自定义图片。绿色是设置日志标题背景色块的大小，具体设置可以自己调试^-^。蓝色是设置日志标题后面时间的颜色。

.normallog h6 {padding:0px 10px 0px 0px;font-size:10px;font-weight:normal;text-align:right;}

红色是定义回复、引用、评论的字体大小。这个通常我都定义是10px，也可以自己定义。

还有这个部分的计数显示是斜体的，只要添加如下代码

.em {font-style:normal;}

设置回复评论：

#commentshead {background:url(http://photo7.yupoo.com) no-repeat;}

红色设置3只小鸡的图片。  

.acomment h4 {background:url(http://photo7.yupoo.com) no-repeat;}

红色是设置评论1只小鸡的图片。（关于这个，我发现评论刷新的时候还是会出现的，比较喜欢完整性的朋友还是可以修改的，像我的还是一朵黑色的玫瑰^0^）      

还有部分自定义设置：

如果想页面全部显示英文，可添加如下代码.cn {display:none;}       

 如果想显示中文，添加代码.en {display:none;}

如果不想显示rss图标，可添加.rss,.rss_c{display:none;}

在特定的地方加上Flash:

在模版下面点击JS代码添加如下语句

window.onload=function(){
var n=document.getElementById('head');
var tt="<EMBED src=Flash地址 width=800 height=310 type=application/x-shockwave-flash wmode=\"transparent\">"
n.innerHTML=tt}

红色是要添加Flash的位置，其实通常比较多都是加在头部,所以我也直接写上head了...绿色是Flash的地址，蓝色是设定Flash的宽度和高度。

在Blog插入音乐：

用棉花糖的代码生成器生成代码，生成播放代码。选取一个已经激活的边栏，点击代码一项，按Ctrl+V粘贴代码进去，再点击代码，之后确定。如果想隐藏播放器，只要把宽度和高度全部改为0就可以了。

这次的模板教程并不是完全的介绍整个模板的制作，主要是针对5D这次升级之后部分代码的变更，例如评论列表和评论框部分。这次的评论列表部分的代码是希儿挖出来的，至于评论框部分就是子寒给我代码地址，虽然最后还是自己费了好久时间才找出正确的，不过还是很感谢他们的奉献^0^......要不我也不能正式的完成这次的新模板Black Gothic，其实只是把上次的模板替换成了深的颜色（有人说太黑了...），不过自己对这个模板还是很满意。

如需要完整的修改方法，请看--->5D模板制作傻瓜版

设置评论列表：

.a_comment {border-bottom:#BBB solid 1px;padding:10px 0 10px 0;clear:both;height:100%;text-align:left;}

这段代码是设置评论列表的，红色的是自定义分割线，绿色的是自定义大小，蓝色的是定义书写方向

.a_comment .info {height:40px;}
.a_comment .logolink {float:left;margin-right:5px;}

红色定义评论头像置左或者置右
.a_comment .logolink img {width:40px;height:40px;}

红色定义评论头像图片的大小（可自行添加其它属性，例如边框）
.a_comment .info .authorname {font-size:12px;font-weight:bold;padding:1px 0 0px 0;}

红色定义评论用户名称的字体大小，绿色是定义字体的粗细（bold代表粗体）
.a_comment .info span {display:block;color:#999;font-size:11px;font-family:Arial;}

这段是设置评论发表时间，红色定义颜色，绿色定义字体大小，蓝色定义字体样式

.a_comment .info .homepage {text-align:right;margin-top:-24px;font-size:11px;font-family:Verdana;}
.a_comment .info .homepage b {margin:0 0 0 5px;color:#666;}
.a_comment .content {margin:-10px 0 0 45px;line-height:20px;}

这三段是设置评论用户的主页等，这里通常不怎么修改，所以这里容许我不详细说了^-^

.a_comment .recontent {color:#2F6003;border-left:#DDD solid 2px;margin:10px 10px 10px 45px;padding:0 0 0 10px;}

这段定义的是作者回复的样式，默认的是一条绿色的竖线，说实话真的很难看- _____-......红色定义的是回复的字体颜色，绿色定义的就是那条绿色的竖线，可自行更改左右，颜色或者实线虚线和px等...另外，如果想设置回复的底色，只要添加background属性即可

.a_comment .recontent h6 {display:none;}

最后这段其实就是那作者二字，我想很多人都会不喜欢吧，所以我已经直接放出定义好的代码了

设置评论框：

这里的代码真是自己慢慢挖出来的-_____-费了我好大心血，因为CSS等我是啥都不懂，最后完成的时候真的大大感叹了下......

.cf {border:#999 solid 1px;background:#F3F3F3;margin:5px auto;width:95%;text-align:left;}

红色是定义评论框的边框颜色，实线或者虚线和px等...绿色是定义评论框的底色

.cf h4 {margin:0;padding:10px;font-size:14px;font-weight:normal;color:#666;}

这是设置发表留言那4个字，红色是字体大小，绿色是字体粗细，蓝色是字体颜色

.cf .cf_submit {background:#E8E8E8;padding:10px;text-align:right;}

这段是设置评论框下面那块色块的颜色等，红色是定义颜色

.cf .cf_submit input {margin:0 5px;}

这段是设置发表，清空，历史内容那3个按钮的的样式，如要设置，可自行添加background等。以上的我只针对了会比较经常改动的代码，因为很多我也不知道干嘛用的^0^（请别丢食物上来......）

另外还有小部分设置（这个纯属个人爱好了，不喜欢的朋友可以不要修改），新的框架增加了许多的按钮还有Tags，因为我比较喜欢干净点的页面，所以把自己平时不用的全部隐藏了...下面这段代码把主页上的-+PA还有每篇日志的分类，Tags，开启关闭页面，Reall all等全部隐藏了，需要的朋友直接复制添加进去就好

.category,.z_close,.z_list,.z_normal,.link_c,.z_post,.z_admin {display:none;}