Alan's World » G-White

WordPress Theme G-White 3.0

Alan — Thu, 21 Oct 2010 18:10:57 +0000

G-White 3.0 相对于 DarkLight 3.0 迟了许多，不过也终于弄好了，有 DarkLight 3.0 做基础，修改起来就相对没那么累人了，不过怕会有些 DarkLight 的残留元素，偷懒没办法，目前测试没看到，希望没有，嘿。

其实我做的主题，功能上从来都是差不多，加上这次是基于 Twenty Ten 的，那就更是了，主要还是对于外观、细节上的处理，这次外观还是做了部分改动，细节更加完善些了，也有一些无视 IE 的部分，但不影响其基本使用。下面是对于这次主要更新的地方的详述：

首先是 Header 部分

博客标题保持不变，导航栏改变了样式，增加背景框，变更字体颜色、增加 jQuery 下拉菜单，基本上导航栏就是重新设计及了！

其次是文章顶部样式及图标

文章发布时间的样式改为普通样式，并没有使用之前的独立出来的样式，之前有人反映说该样式看不出文章发布的年份，所以改掉，当偷懒也行吧。再者是图标更新了，不过依然是用 Gnome 的图标，对 Tango，Gnome 这类图片没有抵抗力。

第三是 Pagenavi 的样式

更改了内嵌的方式，跟 DarkLight 一样的，这里不重复。主要是样式重新设计了，之前是用了图片做背景的，这次直接 CSS 做了，更简洁！

第四是侧边栏 Widget 部分

旧版使用的是图片背景，这次全部删除，只用 CSS 实现，也是重新设计的样式，使用了 CSS3 的圆角和阴影效果，所以 IE6、7、8 不会有，不过并不影响其使用，看上去同样简洁；搜索框也是重新设计，方法同前面。

第五相关文章

相关文章应该很多人都有使用，不过我没有内嵌到主题里去，我自己用的是 WordPress Related Posts 插件，如果你也用该插件，那显示的样式如图所示，同样用了 jQuery 添加斑马纹效果；如果你使用的不是上面提到的插件，那也没关系，在调用相关文章函数的时候把标题的类设置为 class="related_post_title"，把列表 ul 或者 ol 的类设置为 class="related_post" 即可达到同样效果。

最后是评论部分

评论的样式总是很受重视的！旧版的样式被我完全抛弃了，新版 G-White 3.0 的评论样式跟 DarkLight 3.0 的如出一辙，又偷懒了，哈哈。这个样式本人真的很喜欢，不过依然只支持三层嵌套，以前说过了，搞太多很累人，代码也会很累赘。相比 DarkLight 3.0，这里多了个隐藏和展开评论内容的锚点，如图所示！

其他说明

404 页面保持跟旧版的一直；一些没列出来的功能，都是跟 DarkLight 3.0 一样的。主题支持 Opera 10，Firefox 3.0，Chrome，IE8，IE7，IE6，手头没 Safari，没测试；主题不能通过 CCS3 验证，因为圆角和阴影效果的缘故，也懒得用 js 输出了，不能通过 HTML 验证，因为用了 HTML5 的 role 属性，我也懒得去全部改掉，囧rz；测试时间并不长，所以可能还有一些细节上或者其他问题，请 G-white 3.0 使用者帮忙汇报 Bug，谢谢！

G-White 3.0 是在 WordPress 3.01 下开发的，所以只支持 WordPress 3.01+。

最后的最后，再次声明，G-White 3.0 主题是基于 Twenty Ten 主题，请遵循署名-非商业性使用-相同方式共享 3.0.0 共享协议，去掉 footer 版权信息的朋友请自重~~，不要连 WordPress 的也搞掉吧~~。

更新列表：

2010-11-11: 更新至 Verson 3.1.2，修正 IE6 下侧边栏评论内表情显示异常问题。非常感谢 Cmile 的几个反馈！
2010-11-07：更新至 Verson 3.1.1，修正底部 Widget 搜索框的样式；修改底部 Widget 日历的样式；去掉插入表情的背景和边框。
2010-10-25：更新置顶文章样式。
2010-10-22：下午自己 Demo 的时候发现了一些问题，做了挺多更新，直接升级版本为 3.1；修正 Widget 项的样式，添加 padding 属性，让内容文字不至于顶到右边框上去；修改 footer 的信息，把 DarkLight 改成 G-White，囧了；修改 sprite 图片，删除内容顶部和 footer 部分的背景图片，让他们独立出来了，保证在 Chrome 下的显示完好；更新 Trackback 的样式。

演示：Live Demo // Image Preview

点击下载 G-White 3.1

DarkLight 和 G-White 主题的图片透明效果和超链接背景

Alan — Thu, 19 Aug 2010 09:26:55 +0000

DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如何去掉该效果，个人喜好不能加于公布的主题中，以后要注意，去掉的方法就是，在 style.css 中找到 .entrybody img，删除里面的

filter: alpha(opacity=80);
opacity: 0.8;
-moz-opacity: 0.8;

这三行，顺便把 .entrybody img:hover 整个删掉。

还有个问题是，这俩主题中，超链接图片在鼠标滑过时，图片底部会留下的红色背景，是我给超链接在鼠标滑过 a:hover 时设置了 padding 和 background 属性导致的，要去掉的话修改超链接的样式，去掉其内边距和背景属性。如果想保留超链接原来的样式，我写了个 jQuery，去掉超链接图片的背景和样式：

$(document).ready(function() {
$(".entrybody a img").parent("a").css({"background": "none", "padding": "0"});
});

代码放到 js 文件夹下的 all.js 里面。这两个主题已经调用了 jQuery 库，如果你已经删掉了，那不会有效果。

G-White 主题显示文章摘要

Alan — Mon, 19 Jul 2010 04:27:52 +0000

WordPress 显示文章摘要，其实在文章编辑器有个 more 标签，很多人都知道啦，昨天有位同学提到要像我那样的摘要，然后把 Read More 在文章右下角显示。

首先修改 index.php 让文章显示摘要，把 index.php 中的：

the_content('Read the rest of this entry »'); ?>

替换成如下（其中 600 为摘要文字符数）：

echo mb_strimwidth(strip_tags(apply_filters('the_content', $post->post_content)), 0, 600,"......"); ?>

这样就可以不用在写文章的时候手动添加 more 标签了，不过这样的方法，图片会被直接无视，链接也只会显示成不能点击的文字。

接下来增加在文章右下角增加 Read More 链接。
找到：

在其下面加入：

接下来修改样式表，打开 style.css，在下面增加：

.read_more {
background: url(images/read_more.png) no-repeat 0 3px;
float: right;
padding: 0 0 0 20px;
}

这里提供个 read_more.png，当然你可以自己找个图片代替（请放到 G-White 下的 images 文件夹）。

PS. 看会之前的一些评论才知道（感谢 shuxin 同学），一直有两个错误没修改过来，comments.php 这个文件有两个错误：
1、行 77，Webseite (Optional)，其中，webseite 应该改成 website。
2、行 101

里面的 value 的值要加一个空格即改成 value=" "，否则在 IE 中，显示“提交查询”，就与按钮背景图有冲突了。

Wordpress Theme G-White 3.0 (156)
DarkLight 和 G-White 主题的图片透明效果和超链接背景 (23)
WordPress 主题 G-White 更新到 Ver 2.4 (105)
WordPress Theme: G-White 2.0 (123)
Wordpress Theme: Optimus+ (53)
Wordpress 主题 aSide 出售 (140)

WordPress 主题 G-White 更新到 Ver 2.4

Alan — Sat, 03 Jul 2010 03:59:28 +0000

G-White 和 DarkLight 都许久没更新，这次先对 G-White 动手。修改的时候发现这个主题最后一次更新是在 09 年 9 月份，原来已经过了这么久了，之前说过要更新的东西似乎有些忘掉了，(-_-); 这次修改的东西也不多：

Categories 增加子菜单样式，如果分类含有子分类的话，现在可以正常显示，鼠标滑过显示。
Header 的页面 Navigation 稍作修改，原来当 Navigation 有点多的时候，会下滑，样式改变了，稍作修正，下滑后不影响外观。
有童鞋反应需要显示文章的年份，于是在单篇文章中加入年份显示
上篇文章提到的随机文章问题，当然也修改了
其他一些样式小修小改，不提也罢

修改不多，也混了一个 Verson，呵呵。

演示：Demo

下载 G-White 2.4

Wordpress Theme G-White 3.0 (156)
DarkLight 和 G-White 主题的图片透明效果和超链接背景 (23)
G-White 主题显示文章摘要 (25)
WordPress Theme: G-White 2.0 (123)
Wordpress Theme: Optimus+ (53)
Wordpress 主题 aSide 出售 (140)

WordPress Theme: G-White 2.0

Alan — Sun, 01 Nov 2009 15:41:26 +0000

G-White 是自己做的一个比较久远的主题了，跟 DarkLight 一样，这次也直接跳到 Verson 2.0，两者的代码也是大同小异，主要就是外观上和部分细节的不同而已，自己感觉是还有可以继续美化完善的地方，在 JS 技术方面在下不懂，所以不会有太多这方面的效果，这是我的主题没什么特别了亮点的地方吧。

这次页面导航加入下拉菜单样式了（简陋的）；继续忽略子分类在侧边栏的样式问题；如果说还有什么特别需要说明的地方的话，就是嵌套评论在 IE6 下的继续与众不同和不那么完美了（老生常谈，非常厌恶）；然后是跟 DarkLight 基本一样的说明了（For English Usage, please read the “Read Before Use” file in the g-white_2 folder）：

只支持 WordPress 2.8 以上版本，相比 G-White 1.0，仅仅自带了一个 Links 模板，删去了 Guestbook 和 Archives 模板；G-White 2.0 已在 Firefox 3.5，Opera 10，Chrome 3，IE6，IE7，IE8 下测试，可正常使用（IE6 下评论样式与其他浏览器样式有些不一样，老生常谈了，如果您喜欢用 IE，建议用 IE8）
支持嵌套回复和评论分页，这两个都需要在后台的评论设置开启，嵌套回复目前只支持 3 层，目前未考虑增加更多层次的样式。
评论楼层显示楼层序号，支持 Ajax 评论，自动隐藏老用户资料框，支持 Ctrl+Enter 发表留言
本主题不使用任何插件也可以正常显示，并且已经内嵌 WP-Pagenavi 插件，所以如果您启用了该插件，请在后台将改插件禁用。
主题支持 Widget，但还是那句话，强烈建议使用 Sidebar.php，自定义性更强。
增加导航页面下拉菜单样式
主题可能存在本人未发现的 Bug，如果您使用了本主题并发现 Bug，欢迎联系我，谢谢！

更新列表：

2010/11/7 更新 G-White 2.2：修正 Search.php 的一个小错误；修正提交第一个回复评论后的样式错误。
2010/11/30 更新 G-White 2.3：修正搜索结果页面和分类页面下 Pagenavi 不能显示的问题。
2010/12/14 更新：把文章标题显示 Article-link(Permalink) 换成显示原标题

预览：Preview 1 // Preview 2
演示：Live Demo

下载 G-White 2.4