博客模板修改备忘 - 达人(水南)

2005/12/01 | 博客模板修改备忘

类别(网络技巧) | 评论(93) | 阅读(3151) | 发表于 09:11

1.我对HTML是比较熟一点，可是我不知道怎样在Blog中使用，至于CSS完全就是菜鸟一只吗！要说有什么心得，那大概要得益于这篇文章：白皮书（2）：5DBlog CSS 框架参考。使用新的模板时（几乎每个模板我都试过），我发现主要有两个问题，其一是框架的大小问题，另一个问题是一些间距问题（尤其在日志分类导航是横着显示的时候，要么显不全，要么显得很乱）。参照上面的那篇文章，我在下面几个地方一改就可以正常使用了（我用的是5度模板）。

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;}

做完之后，最大的感触是，5D似乎完全可以通过预先调整好这些参数，它对谁都一样。那样也就不用我们这些菜鸟麻烦啦～

2.去掉分类目录的RSS标志图片：在“编辑当前样式”顶部加入：.rss,.rss_c{display:none;}如下面这样：

@import url("/fbui/share/global_1.css");

@import url("/fbui/share/comment_1.css");
@import url("/fbui/share/search_1.css");
@import url("/fbui/share/calendar_1.css");
.rss,.rss_c{display:none;}

3.如何减小自定义侧边栏中行距
如果直接编辑的话，通过按回车分段，其行距会很大，不美观（特别当内容为链接时），这时我们只要点击编辑上面的“代码”一项，进入代码一项，在其中输入 <pre> 内容</pre>///这里内容可以正常编辑，按回车分段时产生的行距就不会很大。

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框架参考*/

17.尚未找到解决的问题～：8

一个是网页特效代码的使用，现在好像不行，另外一个是浏览器滚动条颜色的修改～当然还有其它……

以上仅是个人经验，备份而已。^_^%

PS：Ls的关于框架的说明：默认框架配置对照目录树 5D CSS框架参考

其它参考：CSS入门 5D新界面制作攻略--希儿白话版（这个不错^_^%）

更新于2006年元月3日

评论Comments(93条)

裘文其

2007/5/1 17:53:04

#93

我用原模板改的，边栏标题的颜色改了，
我截图给你，有qq在线吧？396598711

裘文其

2007/5/1 17:36:00

#92

还是不行，情况如开始一样，边栏标题的颜色改了，正文的链接文字还是没变啊。

作者:

你把代码放在什么地方了？？我用你的主页的CSS测试是可以的。
－－－－－－－－－－－－
@import url(/fbui/share/global_1.css);
@import url(/fbui/share/comment_1.css);

a:link {text-decoration : none;color:#FF7F1C;font-weight: bold;}
a:hover {border-bottom:1px color:#FF5028;cursor: crosshair;}
a:visited {text-decoration : none;color:#984C00;font-weight: bold;}

－－－－－－－－－－下略

裘文其

2007/5/1 16:43:40

#91

a:link {text-decoration : none;color:#FF7F1C;font-weight: bold;}
a:hover {border-bottom:1px color:#FF5028;cursor: crosshair;}
a:visited {text-decoration : none;color:#984C00;font-weight: bold;}
我都设置好了，可是不知道放在什么位置啊？
我放在原本有一个a:hover 下面，结果是边栏和标题的文字颜色改变了，而正文仍旧没有改变。

作者:

找一个空位置，如顶部或底部；把代码粘贴进去就可以了。
还有：
a:hover {border-bottom:1px;color:#FF5028;cursor: crosshair;} /*少个分号*/

裘文其

2007/5/1 3:43:18

#90

这个帖子非常厚道啊，自从老闻告诉我以后我经常来看，真不赖啊。
我现在碰到一个关于CSS的问题加有链接的文字颜色和其他文本的颜色一样。我想做到鼠标没放上去、鼠标移动上、点击后的颜色都不同，但是我不知该如何设置。
看，今天晚上我几乎把所有的带有#的颜色代码换了个遍，再预览，都找不到这个代码设置是哪里，现在都三点多了。
我请教过54ZQ，这家伙没搭理我，所以我想到你这支一招好去根他显摆，哈哈。
多谢多谢。。。
忘记说了，五一快乐。

作者:

找到并修改下列语句（如果没有添加吧）
a:link {text-decoration : none;color:#0099FF;} /*链接样式*/
a:visited {text-decoration : none;color:#0099FF;} /*访问后的样式*/
a:hover {text-decoration:none;color:#FF6600;background:#FFF68F;} /*鼠标停靠时的样式*/
a:active {text-decoration : none;color:#0099FF;} /*单击时的样式*/

[AFEEL]

2006/8/25 21:46:58

#89

CSS样式只能改内部的滚动条，不知道你要的是不是这个
scrollbar-face-color:#ff0000;
scrollbar-track-color:#000000;
scrollbar-base-color:#ff0000;
scrollbar-arrow-color:#ff0000;
scrollbar-highlight-color:#ff0000;
scrollbar-shadow-color:#ff0000;
scrollbar-3dlight-color:#ff0000;
scrollbar-darkshadow-color:#ff0000;
添加在body里就行，浏览器的似乎改不了，opera无视此代码。

[Val]

2006/6/17 23:57:47

#88

请教一个问题,关于3只小鸡下面那条黑线应该哪里改啊?

作者:

参看备忘第12条的说明，里面有关于回复部分的设置：）

[新手]

2006/5/11 20:15:59

#87

水南兄：
请教一下几个问题：1，给我留言的人较多，且写在不同的日志上，我想一下全部看很费时费力，能否在侧栏上加个“所有留言”的按钮，点击后可出现所有留言的页面，这样回复起来比较方便；
2，如何改回复的作者名字，不要出现“作者回复auther”，而像你一样，出现有个性的签名？

作者:

第一个问题应该比较难办（可能涉及5D系统的设置），不过在后台评论管理不是可以看到所有的留言么？而且可以统一回复～建议：根据你的博客的性质，个人认为，你可以申请个留言本板，因为有些回复可能并不是针对某篇文章，而只是建议或是反映问题。当然也可以在博客中开个专帖，然后置顶，这样所有与文章主题无关的回复也可以放到一起，便于管理：）第二个问题：在你的模板样式底部添加： .acomment div .authorcomment{background:url(图片地址) no-repeat left top;} 注意图片不能太大，尽量和原先的保持相近。

[鹏鹏]

2006/5/7 0:30:33

#86

谢谢水南兄回复，恢复默认后再生成页面
，果然好了
我在5D论坛问了一星期了，都没人。。
还是水南兄好。
不介意的话能交换链接吗？
我的链接地址是：http://www.5dblog.com/user6/lypnjtu/ 我的logo

是：http://blog.5d.cn/user6/lypnjtu/upload/2006-04/1_462.gif

作者:

OK～^^*你做的主题很漂亮～

[老闻]

2006/5/4 20:16:38

#85

过来看看，你还好吧？
不会忘记你的，热心又耐心的水南兄弟~~
PS：最近5D在7周年庆，估计会很忙吧

[鹏鹏]

2006/5/3 11:23:51

#84

不好意思啊，水南兄，又得麻烦你了。。
我的blog里的每个日志的留言回复出问题了。。显示不出回复的内容。。只能显示出留言回复的时间。。
就像这样http://blog.5d.cn/user6/lypnjtu/200604/246734.html

作者:

很奇怪，我在本地调试你的代码，没什么问题～～

你试试将顶部的代码：

@import url("/fbui/share/comment_1.css");

替代成

@import url("http://blog.5d.cn/fbui/share/comment_1.css");

如果这个能行的话，估计是5D系统的问题啦～或者可能你修改了：高级模板自定义里的模板自定义部分（这个你可以重新生成所有的页面，如果还有问题，恢复到默认后，再重新生成页面）：或者你使用了JS代码（这个我不是很清楚，所以不能给出什么建议，你可以删掉试试试）

PS：最近5D不知怎么搞的，博客这一块像没人管似的，论坛上的问题也没有管～哎～

<< 12 3 4 5...9 10 >>

立即注册5D通行证Join 5D!
发表留言post

游客Guest
用　户Name:		密　码Password:
内　容Comment:
主　页Homepage:
验　证Verify:	换一个change the code

http://skyline-moon.5d.cn/

评论Comments(93条)

作者:

作者:

作者:

作者:

作者:

作者:

作者:

立即注册5D通行证Join 5D!发表留言post

立即注册5D通行证Join 5D!
发表留言post