This box will be fixed on your screen using Firefox, Opera9 or IE7.

在Blog(WP)中实现漂亮的NiceTitle

也许你注意到了,在我的Blog上用鼠标悬停提示时有非常好的NiceTitle提示效果(如图):Nicetitle效果图这是如何实现的呢?其实这是靠一段JS来实现的,原文请参见这里.

他给出的操作如下:

  • 下载nicetitle.jsnicetitle.css置于根目录下
  • 需要一个背景图片ntbg.png,注意图片路径在nicetitle.css中设置
  • 在页面中加入代码:

[code lang=”xml”]

[/code]

结合WP,实现步骤如下:

nicetitle.js上传至根目录,修改/wp-includes/function.php的这一段函数

[code lang=”php”]function wp_head() {
do_action(’wp_head’, ‘’);
}[/code]

替换为:

[code lang=”php”]function wp_head() {
echo \”\”;
do_action(’wp_head’, ‘’);
}[/code]

作用在于加载于页面的head部,在wp1.2以前,theme结构中并未分离,不然你得去改每个页面。

可以把nicetitle.css中的内容加在WP的CSS中,也可以单独从外部引入。这是我修改的Blog现在的的效果,不需要再加ntbg.png,直接在CSS中定义背景既可。你也可以弄一套cool配色方案。

[code lang=”css”]
div.nicetitle {
position: absolute;
padding: 4px;
top: 0;
left: 0;
font: 12px Tahoma, Arial, sans-serif;
width: 25em;
background: #D8CEC6;
color: black;
border: 1px dashed black;
-moz-border-radius: 5px;
-moz-opacity: 0.9;
/*这2个是mozilla的私有属性用于处理边框圆角弧线*/ }
div.nicetitle p {
margin: 0; padding: 0 3px; }
div.nicetitle p.destination {
font-size: 10px;
text-align: left;
padding-top: 3px;
}[/code]

24 Comments

  1. 《痛并快乐着》----SuperCN & Apple Trackbacks @ 19:51:53 on 2004-09-17

    升级到915又出问题了
    升级到915又出问题了

  2. Dark Comments @ 20:24:51 on 2004-09-17

    CSS中可以看到,用Mozilla的浏览器浏览出来的效果会更好

  3. -- Comments @ 14:31:05 on 2004-09-20

    漂亮,但多此一举

    通过它来查看重复的信息有什么用?

    鼠标划过还一跳一跳的,破坏整体界面的美观

    个人意见^^

  4. Dark Comments @ 15:12:24 on 2004-09-20

    呵呵…玩玩花样嘛…这个功能放在CALENDAR上面还是挺好看的,可以看清哪些天发表了哪些文章的标题

  5. deadline Comments @ 19:32:55 on 2004-09-20

    能求你帮帮忙吗?
    我也用wordpress1.2做了一个博客,并且也用了Michael Heilemann 1.25的模版.但是我想让它显示日历.却不知道应该怎么办.我想安装插件,但是一点启动就只显示空白页…

    如果你实在没有时间,可不可以把你的index.php的源文件给我.我自己研究一下.拜托了!!!

    先谢谢你了…

  6. Dark Comments @ 21:11:57 on 2004-09-20

    1.日历在这个模板中默认是被关闭的,找到index.php的304行把< – –和后面的––>删除就打开了

    2.你是什么插件?有的插件互相是有冲突的

    最后问个问题,你是怎么找到我的呀?做好了有兴趣的话我们可以互换链接呀…有什么问题我们一直讨论吧…

  7. deadline Comments @ 21:29:37 on 2004-09-20

    非常感谢,我对这方面很不熟悉呵,多谢指点,我看到了那一条…

    好的我做好了会第一个通知你的.上面的网址是我现在用的,我做这个只是感觉wordpress真的很不错.

    再次感谢!!!

  8. Dark Comments @ 21:43:09 on 2004-09-20

    你是怎么找到我的还没说呀…我很好奇….

  9. deadline Comments @ 21:54:48 on 2004-09-20

    我也不知道,就是在网上瞎看的呵呵…

    (在google上连到你这的)因为我想看看另人的blog所以我在网上找by worpress然后就看,看到了许多用worpress做的blog随后就看到你了…

    吼吼,不过下回在让我找回去我可就找不到了,忘记在第几页了^0^

  10. deadline Comments @ 19:01:11 on 2004-09-21

    我想把右边的 字体变大一点,在css里面
    应该怎么设置.
    例如
    Admin
    下面的

    登录
    注册

    字体太小了…

  11. Dark Comments @ 19:18:39 on 2004-09-21

    呵呵…我看看…我没有用IE,用的Firefox,感觉是正常的。有可能IE下会有问题。

  12. deadline Comments @ 19:24:01 on 2004-09-21

    我知道,我的意思是可不可以在IE中也显示正常一点!

  13. Dark Comments @ 19:41:11 on 2004-09-21

    那应该在CSS中改了…自己看看吧…我去吃饭啦….

  14. deadline Comments @ 19:54:26 on 2004-09-21

    不好意思还要求你帮帮忙.看我看一下我的页面为什么在Firefox里面显示成这个样子.
    http://deadline.clanshosting.com/i
    这是我的网址,麻烦你了…不好意思.再次谢谢….

  15. deadline Comments @ 19:55:45 on 2004-09-21

    网址输错了是这样.http://deadline.clanshosting.com

  16. Dark Comments @ 20:02:27 on 2004-09-21

    一切正常
    http://www.sjlongtai.com/up/2004-9-21-719868.gif

  17. Dark Comments @ 21:47:30 on 2004-09-21

    deadline你的站点到底叫什么,我好加链接

  18. deadline Comments @ 07:22:09 on 2004-09-22

    B.s

  19. deadline Comments @ 07:24:38 on 2004-09-22

    为什么字体在你那里显示正常,在我这里显示却非常小呢,并且只在右边显示较小.
    PS:浏览器的字体大小为 中等.

  20. kelet Comments @ 09:27:39 on 2005-02-06

    我怎么打不开那个站点呢。。。试了好多次都不行。。。
    ps:你这里很漂亮!!

  21. Dark Comments @ 15:50:30 on 2005-02-06

    kelet,可以打开的,我才试了。上面写的是针对1.2时代,现在没有那么复杂了,一个JS和几句CSS定义就行了。

  22. Eimo’s Blog » Blog Archive » WORDPRESS的几个设置 Pingbacks @ 16:51:37 on 2005-05-02

    […]

    WORDPRESS的几个设置

    在Blog(WP)中实现漂亮的NiceTitle WordPress中的彩蛋

    发表于
    […]

  23. Samuel Comments @ 19:40:49 on 2005-05-03

    我以前没用过wp,我也问你个关于日历的问题 我用的是1.5 为什么也没有日历 在哪里打开日历? 日历的代码文件在哪里?
    谢谢了

  24. Dark Comments @ 20:08:32 on 2005-05-03

    Samuel,在Theme文件中的Sidebar.php中,是否打开日历取决于你的Theme的布局,很多Theme默认都没有打开日历(有的是将日历这一段代码注释掉了)。你可以手工开启或者添加就行了。