有人要求写写keso的K,我的白,是怎么弄上去的,今天就完成这个功课。

在Blog标题上插入一个图片,直接在后台配置里使用HTML是不行的,它要利用CSS完成,因此,焦点在自定义CSS中。

在看具体代码之前,再次声明,不同皮肤的具体做法是不同的。

通俗的讲,Donews Blog头顶上那块区域都是标题区,但程序内部,他们有不同的名字和处理方式。

举例来说,keso的皮肤,标题没有定义层(DIV),而是直接用HTML标记(H1)实现的,为了方便定制和控制,给HTML标记起了名字,也就是ID。

而在缺省的Cogitation皮肤中,整个头部根据显示的内容,分成很多层。


每个皮肤系统是如何处理版面布局的,都可以通过查看页面源代码获得。

  • 准备工作

不管用哪一种皮肤,首先要做的一件事,制作你的徽记图片,上传到相册中,为了避免混乱,可以设置为不可见。

这时,你就为这个图片在网上安了家,获得了图片的网络地址,记住这个地址,后面我们会用到它。

  • keso皮肤下插入徽记的例子

下面,我们先看看keso皮肤下的图片插入实现。

首先,发现在keso皮肤里,blog主标题是通过id为header的H1控制显示的,因此,我们要定义这个H1的样式。

代码如下:

#header {
       background: #d1c8b9 url("http://bolgimg.b0.upaiyun.com/images/blog_donews_com/laobai/63312/o_bai.gif") no-repeat;
       color: #000000;
       padding-left: 66px;
       height: 20px;
       border-bottom: 1px solid #d1c8b9;
       margin : 0px;
       padding-bottom: 25px;
       font-family: "Courier New", Verdana, monospace;
}

其中第一行,就是为这个元素设置了背景颜色和图片地址。因此,如果要替换自己的图片,只要替换上面URL括号中的地址就可以了。

如果需要更改背景颜色,修改#后面的六位数字就可以了。这个6位数字,代表16进制的RGB颜色,每两位表示一种颜色。大家可以在Photoshop的调色板里,选取一种喜欢的颜色,在颜色对话框中,可以看到该颜色的RGB6位数值。

第三行的Padding-left也比较重要,如果不设置这个被称为左内缩进的参数,那么图片和文字将会重迭。这个数字的取值,略微大于你的图片宽度就可以了。

  • Cogitation皮肤下插入徽记的例子

接下来,看看Cogitation皮肤的CSS代码:

.HeaderTitles {

    background: url("http://bolgimg.b0.upaiyun.com/images/blog_donews_com/laobai/63312/o_bai.gif") no-repeat;
    padding-left: 66px
   
}

你会发现,具有关键意义的语句很类似,都是利用CSS设置背景的特性,也都考虑了左内缩进。

不同的,是定义在HeaderTitles上,而且前面是.,不是#。

这里介绍一下,如果前面是#,那么表示这个CSS是针对HTML标记的ID定义。即<h1 id=header>,如果是.,则是针对HTML标记的class定义的,即<td class="HeaderTitles">。

要详细说明这个问题,我们需要仔细看看Cogitation皮肤的这部分代码:

<div>
        <table>
                <tr>
               <td class="HeaderTitles">
               <h1><a id="Header1_HeaderTitle" class="headermaintitle" href="http://blog.donews.com/laikankan/">laikan</a></h1>
              <p id="tagline">laikan</p>
              </td>
              </tr>
    </table>
</div>

最外面的,定义了这是一个层,然后使用了一个表格。其实,这个表格只有一行一列。

在这个页面中,虽然主标题的字体也是用<h1>控制字体大小的,但并没有为h1命名id,所以,我们要寻找其他地方,最后,发现td最合适,而且td虽然没有ID,但通过Class指定了CSS显示风格,于是,我们就修改一下这个Class标记。

多说一句,理论上,也可以为H1定义背景,但那样,因为既没有ID,也没有Class,将导致所有的H1标记都会被添加背景图片,这不是我们希望的结果。

  • 更高级的插入图片技巧

对这个区域更高级的控制,可以参见dodo的代码。

http://blog.donews.com/dodo/archive/2005/08/05/495230.aspx

这是Dodo提供的“一起放风筝”模板的(基于keso皮肤)全部代码,我们只关心图片是怎么插入的。

dodo直接利用了h1的背景图片功能。

h1 {
    margin:0px;
    background:url("http://bolgimg.b0.upaiyun.com/images/blog_donews_com/dodo/54776/o_blogheader.gif") no-repeat;
    height:175px;
    padding-right:35px;
    font-family: ms shell dlg;
    font-size:16px;
    font-weight:bold;
    border-bottom:6px solid #ADBB88;
}

之所以能这么做,可能是因为他比较清楚,这个Blog中,其他地方,都不再使用<h1>这个HTML标记。注意,直接为HTML标记设置CSS,在HTML标记前,既没有#,也没有.。

这还不算完,这只是插入了下面这样的一张大图片,如果你的显示器屏幕比较宽,效果会很难看。

因此,在dodo的代码中,还有这样一句:

body {
    margin:0px;
    background: #f8f8f8 url("http://bolgimg.b0.upaiyun.com/images/blog_donews_com/dodo/54776/o_blogbg.gif") repeat-x;
    font-family:ms shell dlg;
}

这里,值得注意的是repeat-x属性,它强制把背景图片横向重复显示。如果你像我一样,看到了这个背景图片的模样,你就知道了它和h1的背景图是如何一起工作。

其实,说白了,就是先显示放风筝的大图,如果屏幕右边还有空白区,就不断利用那个小图覆盖。(当然,程序执行的顺序,恰好是反过来的,先在背景中平铺了小图,然后加上了大图,而那个小图,正确的做法是从大图最右边裁出来一小块,这样,就天衣无缝了)

  • 最后的总结

最后总结一下,要想充分实现自定义CSS,你要知道:

你想修改的前台显示部分,是用什么标记控制的,这通过查看源代码实现;

然后,你要寻找合适的标记和位置,自定义CSS,例如,插入徽记的例子中,不同皮肤选择的标记不同;

第三,知道修改ID、Class、HTML TAG的代码格式和区别。

至于CSS的语法和参数,我建议买一本书,或者多看看别人的代码,这个不是我们要讨论的内容。

 

此主题的的相关链接:

《Donews Blog的非官方使用指北》标准操作系列

《Donews Blog的小花招》系列


20条评论

  1. 靠!俺又是沙发!

    是否可以设立一个什么奖?

  2. 总会有些地方控制不好不尽人意,真得去买本书好好看看

  3. 留言时间怎么显示的,奇怪,我这条是凌晨1:50

  4. 连续第四天是老白的东西,我开始怀疑了,我是个阴谋论者,而且目标直指DONEWS

    一快奔四,或者已经四张的男人,在网站混际的时间要排来,估计到全国的TOP 千分之一的人,在BLOG上一边和各种名人过不去,而且还能耐下心写这样一系列的科普性文章,着实让我觉得有个性,也是所谓性情中人。

    风格基本为站在人民大众队伍中,替人民大众呐喊与解忧!

    这句不错,“韩国的赛我网,据说盈利模式就靠提供个性化的网页装饰品,不得不说,触到了人民心里的痒痒肉”,这句也是极对的,营销中的一个方式:形式的时尚与体帖,加深用户感受。

    但如果DONEWS在这方面进行工作,不如QQ在这方在进行工作作用大。

    最近刘韧干的事,比这个更有意思,见我对今天KESO昨日新闻的另外一篇呆眼拙评。

  5. 来来来,玩游戏:)http://blog.donews.com/shaoleiwang/archive/2005/08/21/518990.aspx

  6. 这个在你首页怎么没弄成显示全文?

  7. 注:“有人要求写写keso的K,我的白,是怎么弄上去的,今天就完成这个功课。”中的“有人”,是指我,烧海。

    特:感谢laobai!

    又开始一个系列了

    我还是要当好laobai的学生:)

  8. to 烧海:

    看来你的显示器也够大

    本来是首页显示的,但有几个链接太长了,在1024*768下面,把首页的样式撑得不好看了,我就把他隐藏起来了

    这样,也就是1页效果差一点

    我已经对800*600的用户不友好了,不能连1024也搞得没法看吧

  9. to laobai:

    呵呵

    原来如此

  10. 《Donews Blog的小花招》作者:laobai (http://blog.donews.com/laobai)

  11. 你行

  12. 推荐先阅读《Donews Blog的非官方使用指北》,然后再阅读这个系列。

  13. 《Donews Blog的小花招》

  14. 想请问下老白,怎么样才能让我的徽记图片的背景颜色变透明?或是说怎么改徽记的背景颜色使之和大背景的颜色一样?还有专栏标题的起始坐标可以改么?

    谢谢了

  15. 这个在你首页怎么没弄成显示全文? http://www.akux.cn

  16. 好深奥

发表评论

评论也有版权!

click to change验证码