热门专栏: WordPress 专栏

我很高兴,我的又一个主题诞生了,她叫ENCORE。
虽然她在不同的济览器眼里还存在着美的差异,但没关系,我对她进行了剖腹产。

WORDPERSS主题:ENCORE

因为之前的使用的LOSING MY RELIGION,使用了肥胖的JS脚本,很多朋友说博客的载入速度太慢了。怎么能这样呢?不行!本来我用的BH主机就已经够慢了,老帕不能再用一个残忍的WORDPRESS主题来虐待到老帕博客一游的同志们!

所以,现在这个WORDPRESS主题–ENCORE,放弃了花哨的滑动门效果,使用了同样花哨的悬停效果和DIV层的隐藏,虽然也使用了JS文件,但总的JS文件加起来不超过3KB!

先来看一下这个主题的外貌,当然,你现在进我的博客,我已经使用着这个WORDPRESS主题了,但还是截图展示一下,说不定过不了两天,我又换WORDPRESS主题了呢。

悬浮效果——csshover.htc

悬浮效果——csshover.htc

在中间栏的部分有一个订阅选项,把鼠标放在上面,就会悬浮出订阅按钮列表,这个效果其实在IE和Firefox下是很容易实现的,用*.hover和display配合就可以了,但是IE6是不支持除了a以外的其它:hover形式的。

所以,就要使用我之前介绍过的csshover:htc这个文件,这个文件的作用就是让IE6支持*.hover的形式,这个*代表所有的DIV元素。不止是:hover,这个文件的最新版本还支持:active和:focus,只要你愿意去试验,可以利用这些属性制作出很多特别的效果来!

比如说,如果你够细心,你会发现这个主题header部分的”PARANDROID+”和”帕兰卓一得“,正常状态下分别是白色和蓝色,如果鼠标放在上面的话,又分别变成蓝色和白色。当然,这只是个小小的效果,但要知道,如果没有csshover.htc这个文件的话,要在IE6下实现这个效果尽管也可以,但是很麻烦,且布局势必要相当的不规范。

滤镜透明效果——opacity

这种效果我上一个主题就使用了,就是用opacity这个属性把图片变的透明,而鼠标浮在上面的时候又变面原来清晰的图,这个效果看上去挺美,不是吗?

其实opacity是filter这个属性的一个选项,下面是一个简单的代码示例:

.entry a img{filter:alpha(opacity:25);-moz-opacity:0.25;}
.entry a img:hover{{filter:alpha(opacity:100);-moz-opacity:1;}

这串CSS代码的作用就是给日志的entry层里所有的带链接的图片设置一个25%的不透明度,而当鼠标悬浮在上面的时候,不透明值为100%,就 变成了原图。当然,这个效果还有延伸的运作,比如设置渐变,透明的起始方位和结束方位等,有兴趣的朋友可以去搜一下更详细的介绍。

另外,你可能注意到了里面的-moz-opacity代码,这串代码是Firefox的专用代码,因为前面的代码并不适用于Firefox。幸哉!我们的Firefox给了一些专用代码,且这些代码都很简单易用。

WORDPERSS主题:ENCORE

DIV滑动效果

这是利用一串简单的JS代码配合DIV层的隐藏/显示达到的滑动效果。嗯,我承认,这其实不算标准的滑动效果,只是悬停效果的一种投机取巧罢了。

JS文件实现的点击隐藏/关闭效果

WORDPERSS主题:ENCORE

默认情奖品下,这个留言的commentslist是隐藏的。当你点”RESPOND TO THIS POST”的时候,commentslist就滑出来了。这同样是个很简单的JS文件实现的。

下面是JS文件


function toggleDiv(divid){
if(document.getElementById(divid).style.display == 'none'){
document.getElementById(divid).style.display = 'block';
}else{
document.getElementById(divid).style.display = 'none';
}
}

复制到记事本,给它取个名字,我叫它toggle.js
然后在你的里面加入下面这句话:

<script src=”http://parandroid.com/wp-admin/%3C?php%20bloginfo%28%5C%27template_directory%5C%27%29;%20?%3E/js/toggle.js” type=”text/javascript”></script>

再然后:

<a href=”javascript:;” onmousedown=”toggleDiv(’cccbox’);” style=”color: #ffffff”></a></code>
<p id=”cccbox” style=”display: none”> </p>

看懂了吗?toggleDiv(’ccc’)和div id=”cccbox”这两个地方的名字要一样,那上面的a属性里面的内容就控制着div层的隐藏和显示。

Eminem-《ENOCORE》

我之所以发起神经设计这个主题,是因为昨天下午在翻我那堆打口的时候把阿姆的《ENCORE》又翻了出来,看着封面,设计WORDPRESS主题的冲动就亢亢的冒了起来。

下面两张图分别是这张 《ENCORE》大碟的封面和歌词底部的背面。讽刺吧!
有兴趣的朋友还可以去看看同名曲”ENCORE”的MV,在歌曲的最后,有疯狂的歌迷在大叫着”Encore!Encore!”,阿姆拿起枪对着一个歌迷就是一枪,然后离场。哈哈!

下面的这两张图片我本来是用来放在comments部分的,正常时显示的是封面的这张图片,当鼠标浮在上面时,显示的是背后藏枪的这张图片,且效果 我个人觉得非常酷,可这两张图片的容量太大了,尽管我试着用压缩软件把这两张图片压缩了一下,但最终还是有30KB,在页面上下滑动的时候非常之卡(我试 过压成10KB,但图片被压的过于的印象派了)。所以,只有放弃了。哎!

Eminem-《ENOCORE》

Eminem-《ENOCORE》

最后,说明一下,这个主题的POST标题部分参照了IAMWW的W2_DND,包括上面介绍的toggle.js文件,也是从这个主题里面学来的。

留言列表

Comments List
  1. 2007年09月30日 前博客 说:

    太强了!!!! 不过在我这侧边栏错位了 不知为什么

  2. 2007年09月30日 Jack Park 说:

    那我第一个给你留言?

  3. 2007年09月30日 老帕 说:

    @前博客
    谢谢老兄你的提醒。你用的应该是IE6吧。俺迅速修复了这个错误。谢谢!

  4. 2007年09月30日 sofish 说:

    而事实上,相对于之前的主题,我更喜欢这个…色调和版面…至少不会像之前一样杂乱…

  5. 2007年09月30日 Brezeck 说:

    果然是emi的fans

    不错哈~!

  6. 2007年09月30日 fisio 说:

    老帕真是。。。厉害。
    顺便提下,把广告图片这么折腾。。。会不会有风险?

  7. 2007年09月30日 fisio 说:

    竟然欺骗我是沙发…咳咳

  8. 2007年09月30日 silenteer 说:

    技术含量很高啊 而且也是我比较欣赏的三栏式! 不过我还是比较喜欢简洁一点的!

  9. 2007年09月30日 geuro 说:

    很棒的博客,很棒的模板,呵呵

  10. 2007年09月30日 akuii 说:

    呵呵。发现内容太多。先占个座儿。

  11. 2007年09月30日 akuii 说:

    555.。偶也被骗了,还以为是沙发呢。老帕你狡猾狡猾滴干活。

    老帕,什么时候可否帮我也折腾一下模板呢?。。

    ps:这是写第二次,刚才居然没发成功,RP问题?

  12. 2007年09月30日 ppdan 说:

    【JS文件实现的点击隐藏/关闭效果】
    没看到这我还以为我是沙发呢,呵呵!:)
    这个theme不错,好像帕兰比较对制作theme比较热衷哦?呵呵。

  13. 2007年09月30日 苍岚火焰 说:

    老帕是主题狂,做的很不错,Eminem这mv有意思,找来看看

  14. 2007年09月30日 soulhuman 说:

    国庆快乐 老帕!

  15. 2007年09月30日 子夜 说:

    这个主题比上一个好看 不算强奸眼睛

    但是这个速度啊 是在强奸我的耐心 BTW 我是”她”,不是“他”
    o(∩_∩)o…哈哈

  16. 2007年09月30日 ddkk3000 说:

    这个蓝色的theme显的老帕更加诡异了

  17. 2007年09月30日 mp6 说:

    不错,受教了,你是第一个给我博客留言的,已经加你的友链,以后会多来讨教,关于博客主题,建议不要大花哨哈,一来加载的太慢,访客等不及啊,二来花里胡哨不知道该点哪儿。我是一个崇尚简单的人哈,当然多换换主题用来学学编程技术还是不错的哈。

  18. 2007年09月30日 mp6 说:

    另外,问下怎么添加邮件订阅最新评论啊,还有我怎么加你yo2好友啊,我的用户名是 mp6

  19. 2007年09月30日 老帕 说:

    @FISIO
    广告图片没什么影响,都是推介广告。
    @DDKK3000
    你潜意识里面已经觉得我是诡异的了。我不争辩,我喜欢这个形容词

  20. 2007年09月30日 akuii 说:

    老帕,么关系,尽情去战斗吧。
    偶滴事随时都可以滴,不急。。

  21. 2007年09月30日 mp6 说:

    我打开你的博客,CPU一直占用100%。。。。。最后纠正一个错别字哈,第一段里面那个是浏览器:)

  22. 2007年09月30日 老帕 说:

    @MP6
    YO2好友?不知道。我用的不是YO2啊。订阅评论是使用的这个插件。。。http://txfx.net/code/wordpress/subscribe-to-comments/

  23. 2007年09月30日 Akay 说:

    怎么感觉留言丢了不少,还是我没看见? 我挺喜欢这样的配色,就像以前用blogger时,喜欢哪个blue my way的主题一样。

  24. 2007年09月30日 舍予之间 说:

    牛人,又整出一主题来了。

  25. 2007年09月30日 舍予之间 说:

    看来我又是一个被欺骗的,还以为偶能坐次沙发了那~

  26. 2007年09月30日 Sparanoid 说:

    这个就不错了,继续努力!

  27. 2007年09月30日 ljhui 说:

    这个模板相当好了,原来主题可以做成这样强大。

  28. 2007年10月1日 曾英杰 说:

    我更喜欢这个模板,上次那个配色我感觉太杂,呵呵。
    我还是喜欢简单点的模板,没办法:)

  29. 2007年10月1日 大猫 说:

    恩,这个配色舒服~

  30. 2007年10月1日 iVane Hwang 说:

    你出模板的效率还真的是出奇地快啊~

  31. 2007年10月1日 痞子新 说:

    老帕最近超生明显啊,不过算是服务大众,我们决定不进行罚款了:)

  32. 2007年10月2日 zEUS. 说:

    老帕同学辛苦了,像老帕同学学习!

  33. 2007年10月3日 西岸 说:

    这个模板不错,只是我更喜欢黑色系的

  34. 2007年10月5日 greanty 说:

    oh~还是很有个性的一个主题~~只是····我个人认为,原本就是条条框框的了··所以要从字体上下手···否则会显得很僵硬··我是说字体变得有点艺术感就不错了··不过··中文字体比较难设定···的确是一个缺陷··谁教电脑默认的就是那么几款呢?!

  35. 2007年10月5日 老帕 说:

    @greanty
    字体确实是一个问题。但是不可能用一种没有多少人安装使用的字体啊,不管那个字体有多美。

  36. 2007年10月6日 greanty 说:

    hehe这个我知道·我的主要意思是··你可以从默认的英文字体中找个比较漂亮的字体··你的日志标题总会有些英文的吧···而且太大号的中文字体不适合做日志标题···用在杂志或者广告还比较合适···

  37. 2007年10月6日 老帕 说:

    @GREANTY
    最好的选择应该是微软雅黑。但是用的人还是不多。
    你有什么好的推荐啊!
    我对字体基本上就没仔细研究过!!!!

  38. 2008年04月16日 Yangtx 说:

    老兄,希望看到CMS风格的,关注中,呵呵!

添加回复

Respond This Post

Entries (RSS) and Comments (RSS)
Powered by Wordpress Designed by 5android Vaild W3C CSS & XHTML