换用True Blue style

很早就知道True BlueTrue Blue这个K2 style了,设计得的确非常好看。5月份初识,推荐给了几个朋友,自己却一直没用。现在,K2 0.9已经发布了,True Blue也随之更新到1.3.3,也变得越来越漂亮了。所以,今天开始换用True Blue style,并把我自己的CSS文件整合进去。

K2模版本身有个style.css文件,里面放着K2自己的CSS。用户是挑剔的,谁不想自己的K2看起来更与众不同呢?所以,很多人会修改K2的style.css文件。为了免去用户升级K2时重新修改style.css文件之苦,K2设置了style功能,允许用户把自己的CSS代码写入一个CSS文件放入K2的style目录里,并在后台提供了选项,可以很方便的选择当前使用哪个CSS文件,此为"style"。 我以前就是自己写一个style自己用的,不过有很多人做了很漂亮的style放在网上供大家使用,比如这个True Blue。但是,我们也不想受限于这个style,还想在它的基础上再加上自己的CSS代码,该怎么办呢?True Blue本身提供了一个可定制的办法,就是在主文件里import一个custom.css文件。只要把自己的CSS写到这个custom.css文件里,访问者在访问Blog时在读取K2的CSS和True Blue的CSS之后,也会读取custom.css文件里我们定制的CSS代码。当升级True Blue的时候,只要不覆盖网站上的custom.css文件就可以了。不过import是在文件开头import的,所以只能添加CSS,要是想覆盖就必须加important。我想修改一下,让custom.css在主CSS之后载入。
Update:查了一下,@import语句载入的CSS文件是在原CSS之后处理的。True Blue里也是在core.css之后import custom.css的。具体的问题是CSS的匹配问题,True Blue的CSS里用了#page #primary .entry-content,而我的CSS里学着K2用了#primary .hentry .entry-content。虽然我的CSS后解析,但是前者的匹配度更高,所以前者生效,覆盖了后者。

True Blue还提供了对IE的支持,不仅修正了在IE下的显示效果,还把所有图片文件都备了两份,一份给Firefox和Opera等非IE浏览器用的有透明背景的PNG文件,一份给IE用的jpeg和gif文件,这样就不会象原版K2那样,在IE下小图标的透明部分显示成灰色了。另外,作者steveo还提供了各个图片文件的psd原文件,使用者可以自行用PhotoShop修改。psd文件做的非常好,在PS里直接把相应地方的文字修改成自己的,颜色和特效都不会变,真的是很方便。看看页面上方的标题图片,只用了半分钟就改好了哦。修改完保存成PNG文件,覆盖原来的文件就可以了,有些则是对应IE下显示效果的,存成jpeg文件覆盖即可。

具体的效果看我的Blog就知道了,也可以去看看True Blue Screenshots。如果你想用它的话,记得True Blue只是一个style,它要在K2模版下才能工作哦。steveo这个人好像很厉害耶,《true blue updated for k2 0.9》一文中第一个评论者是matt,这个名字好熟啊,难道是WordPress的开发者之一Matt Mullenweg?还有K2在页面下面显示当前style的那段代码也是steveo提供的,以前在K2的设置页面还有"(code by steveo)"这样的字样,不过最近给去掉了。

Update:照着花儿开了的CSS,加了这么一段:

::-moz-selection{
	background: #c8c8c8;
}

::selection {
	background: #c8c8c8;
}

这样就可以用background和color定义选中后文字的效果了。前一个应该是Mozilla和Firefox特有的,后面的应该是CSS标准里的,Opera应该支持。不过我的IE6 SP1不支持这个效果,不知道IE7行不行。(Update:::-moz-selection时Mozilla和Firefox浏览器特有的CSS属性,::selection是CSS3里定义的,目前Firefox、Opera和IE都不支持,只有Safari和Konqueror浏览器提供了支持。[via])如果想要背景色透明还可以用transparent。

Update2:transparent的效果就好像选中和没选一样,我想到一个好用处就是用来防止copy,某些笨一点的,看到复制不上,应该就不会再动copy的主意。另外今天还发现这儿还可以填background-color:Highlight;color:HighlightText,效果可以参考这个页面

本文共有 19 条评论换用True Blue style


  1. 1 shura

    呼~你终于改了,其实long long ago就想告诉你:你的原模版样式视觉效果实在是~不敢说~^_^

  2. 2 yskin

    ...K2默认的样式还是不错的,而且现在K2添加了Header的设置项,可以很方便的修改页首的样式。我是学计算机的,不喜欢那些花哨的东西,你看keso的Blog就不花哨。换这个style的主要原因是,左边文章部分的宽度从500px增加到了545px,空间更大些,便于容纳我的那些长篇大论,嘻嘻。

  3. 3 匿名

    那为什么不在扩大点那,就是主体部分全页显示.没有两边的黑条.这样不是更宽敞.还是我用IE所以显示这样?
    我就喜欢用全宽的,不想旁边空出来那么多浪费了.不然写长文宽窄窄的.然后往下翻个N屏幕.个人感觉看着不舒服.

  4. 4 yskin

    太宽也不好的,没有人弄成一栏 全页显示的。一般是三栏配全页显示,两栏配全页,比如keso在donews的Blog,或者两边留空,比如我的。一栏的一般都是两边留空的,不然太难看了。

    你看sina和sohu的新闻也不会太宽,sina的新闻字体大,宽度也只有560px。keso的字体是13.3px,文章宽度也只有600px。没有人弄宽度为1024的文章的。现在的屏幕大都是17寸或者19寸,看点东西要把眼睛从左边一直移到右边,很累的。把文章集中于某一部分,对于阅读者是很方便的,尤其是我这种字体只有12px的。

  5. 5 Robot5

    呵呵!这次的好看多了!

  6. 6 Robot5

    顺便问一下我的K2侧边栏模块为什么添加后无法删除?是不是哪里没有设对?

  7. 7 yskin

    不知道呀,我的K2添加了侧边栏模块都不显示,不过移除倒是没问题。

    这个侧边栏模块到底该怎么用呀?

  8. 8 阿福

    像询问个问题,如何修改k2风格文件使评论页中的评论 feed Trackback 地址 2006-08-18 5:40 pm 以及Yskin's Blog is powered by WordPress 2.0.4 and K2 Beta Two svn
    Current style is True Blue 1.3.3 by Steve Lam
    Host by百优科技

    等文字不至于太小啊?

  9. 9 Robot5

    我现在是加是加上了,但是删不掉!一删就会出错!现在我的页面上还有错误呢!
    添加是填入名称后选择module最点击添加按钮!我是这样加的!
    我已经用SVN更新到最新版了!还是老问题!

  10. 10 Robot5

    今天K2那边又修改了两个文件!注释如下!和侧边栏无关!
    /*Fixed tiny font issue with comment form. Issue #97*/
    /trunk/style.css

    /*Adding wp_get_archives that was previously removed. */
    /trunk/header.php

  11. 11 yskin

    改CSS咯,把几个地方的字体调大些。

  12. 12 匿名

    评论右上角的头像我这里显示不出来 /http://www.gravatar.com/?

  13. 13 dragongod

    呵呵,yskin大哥,借用你的css学习一下,……我自己实在是写不出好看的页面了……我把你的custom.css下来了,正在学习中,也许以后会借鉴一部分,不介意吧……

  14. 14 yskin

    被好多人用过custom.css了,尽管用好了,copyleft的,我还加了好多注释方便理解呢。 :)

  15. 15 v2

    yskin...true blue的custom.css能给我一份吗,我主要想修改一下字体大小,摸不到门路。

  16. 16 hseom ysijhmzkr

    seob rxbhyi ygpdnihc ymjirtz rtgywqx zgicrebn uqdtgmkp

  17. 17 aycevj yeqvi

    shjbcr ueozd ozncr dutlw khjfpxrbz jdoxt jgkvtuos

  18. 18 pnusrfb apifh

    prfg tvpyk wkqzlo byetzxv rchweky qgfejobt hzrpi

  1. 1 Solo Estoy
    Trackback2007-4-2 4:39 下午

请留下您的评论: