1.body {margin:2;background:#fff;font-family:"Verdana",宋体,sans-serif;font-size:12px;}
#wrapper {width:771px;margin-left:auto;margin-right:auto;background:#fff;} ///根据自己顶部横图的宽度
#main {margin:0 0px 0px 0px;}
2#menu {position:absolute;width:771px;top:166px;margin:8;padding:0px;border-bottom:#BBB solid 1px;border-top:#BBB solid 0px;height:18px;overflow:hidden;}////把日志分类导航条的位置调整到合适的地方(适用于横排的时候)
#menu h3, #menu li span{display:none;}
#menu ul {float:left;padding:0;margin:0px;}///刚开始是right,显然不助于显示效果,后面好像就是调分类的间距的??我忘了~
#menu li {list-style:none;float:left;padding:0 1px 0 10px;margin:0;}
4.选好了一个模板,想把其中的一个图片背景换成自己的,可是代码一大串,找不到位置,咋办?
有一个很简单的办法,在你的博客主页找到相应的图片,下载下来,看它叫什么名,然后进入“编辑当前样式”,按Ctrl+F,或IE上面的菜当编辑|查找当前页,把刚才的图片的文件名输入查找,哈哈,是不是可以替换啦,不过要注意你的图片的大小是否合适(最后和原先一致,当然也可改成相应的参数——一般就在那个代码附近,如width,height之类的)
5.修改页面底色?!
body {margin:0;font-size:12px;background:#E9F3F2/*在此修改整个页面的颜色,如果要用图片,格式为background:url("图片位置")*/;font-family:"Verdana",宋体,sans-serif;font-size:12px;}
#wrapper {width:778px;margin-left:auto;margin-right:auto;background:#fff/*在此修改日志主体部分的底色*/;border:#fff solid 1px;}
#menu {border:0;position:absolute;width:734px;top:200px;margin:0;background:#268a8a/*日志导航条的底色*/;padding:8px;}
其它的类似,找到background,即是改背景的颜色(或图片)。至于修改的是哪一部分的颜色,可参看5d主页上面的框架说明,看不懂也没关系,试试就知道是哪里的。别忘了备份模板!!
颜色代码可参见:http://www.ezhy.com/zhiyong/color.htm 或到网上搜一个~
6.去掉页面顶部的博客名及博客说明
#head h1 {display:none} #head p {display:none;}
h1是博客名,p是控制内容简介的。添加上面的语句到样式表中,或在相应有语句中添加:display:none就可以了。
7.个性化IE地址栏的IE图标?
制作一张16*16的图形,存成ico格式的图标(也可以用ACDSee转换),然后在5D中选择边栏->高级边栏设置,在其中随便选择一个已经激活的可以编辑文字的边栏,选择上面的“代码”一项,然后把下列代码插入:<link rel='Shortcut Icon' href='http://……/*.ico'>,再次点击“代码”,完成编辑。现在打开你的博客是不是可以看到效果啦? 下图是Yahoo的一个示例,也可以看本站的效果。……可能还有更快的办法,像旧版的博客只要在模板中插入即可,新版的好像不行~?!
PS:注意有些IE浏览器可能不行(Opera肯定可以) 参考:http://www.favicon.com/
8.修改CSS,把朋友回复的那几只小鸡去掉!!换成你喜欢的小图片~
步骤如下:默认的comment_1.css为(下载地址为blog.5d.cn/fbui/share/comment_1.css):
#comments {margin:10px 0 0 0;}
#commentshead {background:url(/images/ccc.gif)/*这个是三只小鸡的图片地址*/ no-repeat;border-bottom:#000 solid 1px;font-size:12px;margin:0;padding:0 0 0 50px;cursor:pointer;}
#blog_CommentList{width:95%;margin:auto;padding:10px 0 0 0;}
.acomment{margin:10px 0 10px 0;}
.acomment h4 {background:url(/images/c.gif) /*这个是一只小鸡的图片位置*/no-repeat;font-size:12px;padding:0 6px 3px 20px;margin:0;border-bottom:#000 dashed 1px;font-weight:normal;cursor:pointer;}
.acomment h4 b {font-size:10px;padding:0 5px;}
……………………下略
把上述的图片地址换成你自己的(图片高度最好为15px),然后在“编辑当前样式”的头部去掉: @import url("/fbui/share/comment_1.css")一行,然后把上述修改后的CSS代码粘贴到源代码的底部(最好隔一行,这样看的比较清楚)。保存当前的样式。打开你的主页,呵呵,小鸡是不是不见啦?~相应的,那个“作者回复(author)也可改掉”。其文件名在上述代码的下面可以找到。从这个例子可以看出“当前样式”头部的几个默认加载的样式(即以@import url开头的)可能还大有文章可作?!会使我们的页子更加个性化~
简化处理:可保留样式头部的@import url("/fbui/share/comment_1.css");而只在样式(可以加在样式代码的底部)中直接加入下列代码。这个可能有问题,大家三思吧,呵呵:
#commentshead {background:url(图片地址) no-repeat;}/*这个是三只小鸡的图片地址*/
.acomment h4 {background:url(图片地址) no-repeat;} /*这个是一只小鸡的图片位置*/
.acomment div .authorcomment{background: url(图片地址) no-repeat left top;} /*作者回复图片的更改,left top 是控制其位置在左上,你也可以定义在其它位置,如右下,right bottom*/
申明:以上是摸出来的,没有理论依据,大家用时还是先备份吧~如有不测,别来打我~哈哈~
9.定义回复栏的外框
在样式代码中添加下列语句:#commentsform fieldset{border:?px solid 颜色代码;width:?%;background:?}/*红色的表示可以自己定义的地方,如本页中为单线(solid,如果是双线则为double),蓝色边框,不过原先边框的圆角会没有掉,如果只调整边框的位置,圆角还在*/
10.关于统计信息的显示问题?
如不想显示某特定的统计信息,可在类似下面的语句
head {background:url("*.gif") no-repeat center;height:160px;padding:0;margin:0 0px 0 0px;}
#head h1 {display:none;}
#head p {display:none;} 的下添加相应的语句:
#GlobalCounter{display:none} /*总访问*/
#WeeklyCounter{display:none} /*周访问*/
#OnlineUsers{display:none} /*在线人数*/
#OnlineGuests{display:none} /*潜水员*/
#MaxOnlineUsers{display:none} /*历史最多在线*/
#MaxOnlineTime{display:none} /*发生在*/
#LogCount{display:none} /*日志总数*/
#CommentCount{display:none} /*回复总数*/
11.有一天我们发现自己的模板已经被自己改得无可抚回,那么可以使用日志模板恢复★★★
·个人管理中心-高级模板自定义-模板自定义-恢复默认
·我的博客-选择模板 或恢复样式备份
·日志备份-重新生成页面-生成生所有页面
12.定义回复部分的文字显示:
/*回复部分自定义*/
#commentshead {background:url(images/ccc.gif) no-repeat;border-bottom:#000 solid 1px;font-size:12px;color:pink;margin:0;padding:0 0 0 50px;cursor:pointer;} /*定义回复头上的回复两个字的颜色*/
#commentsform span {color:pink;} /*定义回复框中的说明文字颜色*/
.acomment h4 {background:url(images/c.gif) no-repeat;font-size:12px;padding:0 6px 3px 20px;margin:0;border-bottom:#fff dashed 1px;font-weight:normal;cursor:pointer;color:pink;} /*留言作者名颜色*/
.acomment div {text-indent:24px;padding:3px 10px;font-weight:normal;margin:0;text- align:left;font-size:12px;color:pink;} /*留言内容默认文字颜色*/
.acomment div .authorcomment{background: url(images/authorcomment.gif) no-repeat left top;border:1px dashed #fff;padding:20px 10px 10px 10px;width:90%;margin:10px auto;color:pink;} /*作者回复默认文字颜色*/
PS:如果你修改过相应的样式,如留言区的图片显示,则只要在原先的语句中修改即可,如果没有,则在样式底部添加上述代码~
13.把“回复,引用,阅读”改成图标显示!
在.normallog h5 span span{padding: 0 0 0 5px}
.normallog h6 span span{padding: 0 0 0 5px} 语句下添加:
.normallog h6 .cn {display:none;} /*去掉日志统计文字显示*/
.comment_c{padding:5px 0 5px 30px;background:url("图片地址") no-repeat;height:27px;}
.read_c{padding:5px 0 5px 30px;background:url("图片地址") no-repeat;height:27px;}
.track_c{padding:5px 0 5px 30px;background:url("图片地址") no-repeat;height:27px;} /*图片定义,其中padding后面的数据为定位图片位置,可根据不同的样式做适当的调整,顺序为上 右 下 左*/
14.给边栏的日历添加一个背景吧?!
在样式代码下面添加以下语句:
#calendar {background:url("图片地址") no-repeat left bottom;} /*有些模板可能已经有这个句子,此时只要在相应的地方修改即可*/
15.边栏条目前面的图标代码~
格式如下
#边栏项目(如lastestpost最新回复 highlight最新推荐……) li { ……}
下面是本页上的设置~
#lastestpost li{list-style:none;margin:3px 0;padding:0 0 0px 14px;background:url("http://blog.5d.cn/user2/skyline-moon/upload/2005-12/26_933.gif") no-repeat left top;}
#highlight li{list-style:none;margin:0;padding:0 0 0px 14px;background:url("http://blog.5d.cn/user2/skyline-moon/upload/2005-12/26_933.gif") no-repeat left top;}
16.改变日志内容或相关内容的文字行距?!
在你要改变行距的内容的相应的部分添加:line-height:?%,后面?%越在,行距越大~!一般150%是比较好的选择~
比如我修改日志正文内容的行距是在下面语句中实现的:
.normallog .text {padding:0px 10px 0px 10px;font-size:12px;color:#000;line-height:150%;} /*日志内容行距定义*/
17.在页面中加入透明Flash的Js代码
在模板样式代码的下面点击:Js代码,贴入下列代码:
window.onload=function(){
var n=document.getElementById('logo');
var tt="<EMBED src=Flash文件地址 width=600 height=120 type=application/x-shockwave-flash wmode=\"transparent\">"
n.innerHTML=tt
} /*logo是指Flash 文件要放入和位置,这里是假设放在顶部,Id可参看5d CSS框架参考*/