2005/12/01 | 博客模板修改备忘
类别(网络技巧) | 评论(93) | 阅读(3144) | 发表于 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日

0

评论Comments

日志分类
首页[227]
+随笔[68]
学习札记[67]
科研工具[44]
文献摘译[2]
程序语言[20]
网络技巧[26]
--[0]