专注于前端开发, 追求更好的用户体验, 更好的开发体验 [长沙前端QQ群:234746733]

html5、css3模版 K Blue for typecho、sablog-x、wordpress

sablog转换成typecho了。sablog仍然保留,感觉sablog的速度那是相当的快,舍不得啊,就是加独立页面麻烦些。typecho虽然慢了点,但是制定比较方便。两个都是优秀的程序,两个都用。

新制作的模版用html5、css3,使用了css3的很多效果: Border Radius、Box Shadow、Text Shadow、RGBA、Transitions、Gradients,还有目前只有webkeit内核支持的text-stroke。

基于蓝色调的,所以命名:K Blue
特点:
1、基于html5、css3,使用了很多css3的特性。在实现css3效果的同时尽可能的让其他浏览器保持效果一致。
2、此风格没有使用一张图片,一个小图标是base64存在css里面,令一个是头部的高亮,cr、ff可以直接渲染,op需要svg,但是还是不能打到满意的效果,所以为ie9/8、op准备了一个base64的图。由于ie6/ie7不支持data uri,MHTML在这里也显得没必要,就设置ie6/ie7使用默认样式了,效果差距不太大。所以这个模版,无论那种浏览器,加载页面的样式只有一个css的连接数。
3、由于各浏览器对css3的支持不同,按显示效果由好到差:chrome/safari>firefox3+>oprea>ie9>ie8>ie6/ie7
G1、G2这样的比较绚的效果只做了chrome/safari下的,原因:ff也可以实现这个效果,但是渲染不流畅。其他浏览器只能尽可能实现类似的感觉了。
4、html用的html5,但ff2不支持html5标签,所以ff2下会变形,解决方法也是有的,只是比较麻烦,用ff的人应该也不会像IE6那么根深蒂固,该升级的应该都升级了吧。再者这个是个人博客,不是大众网站,所以不考虑ff2了。
5、经过检测的浏览器:chrome10、safari5、firefox3.6、ff4、k-meleon、ie9、ie8、ie7、ie6
6、很多细节都做了,不全部阐述了,用chrome/safari浏览你会发现那是相当滴帅气。

注意:
首页调用了指定分类的内容,如果没有该分类肯定就有问题,index.php
<h2 class="tit"><?php _e('开发'); ?></h2>
<h2 class="tit"><?php _e('工具'); ?></h2>
这两行下面的<ul>...</ul>里面的php语句。我这里调用的是mid= 6、7分类下面的文章(Widget_Archive@7、"mid= 7")。你的应该和我的不同,需要自己修改自己的分类id。令需要安装随机日志插件

K Blue、K Blue G1、K Blue G2的区别:
K Blue :基础简洁版,背景色是灰色的过度,背景无彩色圆。
K Blue G1 : 跟"K Blue"类似,背景色加上了26个彩色的圆。
K Blue G2 : 暗色调,背景色是黑色加上了26个彩色的圆。

演示:
K blue 基本版演示
K blue G1演示
K blue G2演示
G1、G2还有几种显示方式,演示页面有说明(请用chrome、safari体验)。所以这次相当于发布了几个模版了。。

下载:

K blue 基本版for Typecho 0.8 (2011-01-06更新)
地址2 mega
K blue 基本版for Sablog-x 2.0 Beta(20100802) (2011-02-17更新)
K blue 基本版for WordPress 3.0.5 (2011-02-20更新)
Change: 链接文字、底部列表动画;数字分页动画;增加sablog、wordpress版。
Note: te、sa、wp的sidebar请自己diy。

非常感叹css3的强大,用chrome/safari看下面的K blue G2演示链接,就明白了,背景里的那些渐变的圆都是css3的效果,而且按照百分比排列。以前做到这样的效果需要做一张很大的图去实现,这张图要足够大,否则宽屏下面就有问题,但是这里无论你的显示器多宽,它们还是按照比例排列。可惜目前只有webkeit支持的比较好,firefox虽然也可以,但是滚动页面时很不流畅。另外,头部的高亮也是css3的效果。

G1、G2的背景那里我做了很久,一共添加了26个渐变的圆形,而且尽量做出随机的感觉。其实是一个一个排出来的。喜欢前端开发的同学可以看看。

另外我下的svn最新打包版0.8 | 10.8.15,附件不能上传。看了下是js报错,解决办法:编辑admin/file-upload-js.php,编辑:142行,post_params: {"cid" : <?php $fileParentContent->cid(); ?>}, 注意后面的","号。

/ 分类: 开发,实践 / TrackBackhttps://xhl.me/archives/694/trackback标签: sablog, works, typecho, 模版, wordpress

已有 56 条评论 »

  1. hechi hechi

    博主的模板好棒,求分享,可以分享一份给我么?我的邮箱是:[email protected]

  2. kairyou kairyou

    发给你了 :)

    1. hechi hechi

      模版已经收到,很漂亮,灰常感谢,吼吼!

    2. hechi hechi

      请问您是不是改过博客程序的某些东西呀?我发现我用了之后,直接打不开博客了!

      1. kairyou kairyou

        是改动了一些,你可以调试下:
        1、header.php
        <?php $this->widget('Widget_metas_Category_List')->to($category); ?>
        ...
        <?php endwhile; ?>
        这四行,删除看看
        2、还不行的话,index.php
        <h2 class="tit"><?php _e('开发'); ?></h2>
        <h2 class="tit"><?php _e('工具'); ?></h2>
        这两行下面的<ul>...</ul>里面的php语句删除试试。我这里调用的是mid= 6、7分类下面的文章。你的应该和我的不同。

        1. hechi hechi

          难怪,收到啦,谢谢您!

  3. test test

    底部的文字倒影太爽了。G2风格背景画的圆是用css做的,css3太强大了。

  4. 晴天 晴天

    请问一下如果在日志里加入分享按钮的话,最好在什么位置添加,用不用修改css?多谢。

    1. kairyou kairyou

      编辑post.php
      <?php $this->tags(', ', true, 'none'); ?>可以在这里加</p>

  5. 巍峨标题 巍峨标题

    新程序安装后,上传你这个模板直接打不开前台,大哥检查下程序啊

  6. 晴天 晴天

    有两个问题请教一下,有朋友说我的导航栏被搜索框挡住了。是不是因为我的分类太多的原因。
    第二个问题是首页日志数量能否多显示一些?

    1. kairyou kairyou

      1.导航栏是因为分类太多了。你可以减少分类,或者把分类的名字减少。
      2.编辑functions.php,找到$archive->is('index'),下面的pageSize = 2,把2改成你想显示的个数。

  7. hdt511 hdt511

    在本机测试皮肤,打开后浏览器死掉了,发现导航栏里面的分类好像是死循环了,导致页面打开不。
    后来把导航那部分代码删除了,打开页面后“呃...你想访问的页面不存在,去 首页 瞧瞧?” 还是出现错误! 皮肤真的很不错。

    1. kairyou kairyou

      浏览器死掉,可能是你加上首页循环分类内容了,widget('Widget_metas_Category_List')导航调用了1次,下面如果在循环调用TE就会这样。
      你想访问的页面不存在,这个提示是404错误页。导航那部分删除与否,应该不会导致出现这个404的。你可以切换默认模版调试下。

添加新评论 »