博客模板修改备忘

      文章推荐 2005-12-12 18:40

        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.去掉页面顶部的博客名及博客说明(参见下面的回复)

  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.尚未找到解决的问题~:8

  一个是网页特效代码的使用,现在好像不行,另外一个是浏览器滚动条颜色的修改~当然还有其它……这一次可真是折腾啊:.|

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

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

    其它参考:CSS入门

                                                    更新于2005年12月8日晚

标签集:TAGS:
回复Comments() 点击Count()

回复Comments

{commenttime}{commentauthor}

{CommentUrl}
{commentcontent}