Alan's World » DarkLight http://www.alanoy.com Do what you want to do Mon, 06 Sep 2010 03:41:53 +0000 en hourly 1 http://wordpress.org/?v=3.0.1 WordPress主题：DarkLight 3.0 http://www.alanoy.com/wordpress-theme-darklight-3/ http://www.alanoy.com/wordpress-theme-darklight-3/#comments Sat, 28 Aug 2010 11:04:12 +0000 Alan http://www.alanoy.com/?p=230 当有了计划，马上就想去完成它，但我也没想到这么快，大概主题结构的折腾少了的缘故吧。Twenty Ten 真是一个强大的主题，DarkLight 3.0 主题的功能基本与其保持一致。外观上基本保持 DarkLight 原有风格，换了些小图标，用了 Sprites 集成图片，技术一般，有点乱，不过不影响主题使用就是了。下面来个图文并茂的介绍。

首先 Header 部分：

相对之前的主题，导航栏这次用 jQuery 实现多级菜单，样式相对改进了，增加 box-show 效果（IE 不会有这个效果），包括侧边栏，如果有多级菜单的话，也加了这个效果，当然，你不要的话可以自己去掉；主题支持 WordPress 3.0 的菜单功能，Twenty Ten 自带有了。

Header Nav Menu

其次是内容部分：

把之前使用内嵌的 wp-pagenavi 插件函数换成 willin 的 Mini Pagenavi，更加小巧，样式有轻微改动。

Mini Pagenavi

单篇文章中显示上一篇文章和下一篇文章的链接，在顶部和底部都有，这是 Twenty Ten 原来有的，我也保留了，不需要删除掉也比较简单。

Posts Navigation

相关文章本来想内嵌使用 willin 的方法，但还是放弃，不过样式还是保留在 style.css 文件里面，而且用 jQuery 实现类斑马纹样式，同样保留 js 代码，无论你用什么方法实现相关文章，只要给标题添加类 class="related_post_title"，给列表 ul 或者 ol 添加类 class="related_post"，那效果就类似下图：

Related Posts

作者信息栏，这个也是 Twenty Ten 自带，只要文章发布者有关于自己的描述说明，那么就会在文章底部显示作者信息，并可以点击链接查看该作者的全部文章。对于单人博客来说没啥用，如果多人参与的话，那相当有必要：

About the Author

第三是评论部分：

首先是评论样式，重新设计了评论样式，奇数评论层跟偶数层样式不同，然后内嵌回复部分使用左右对话框样式，依然只支持嵌套 3 层，复杂的样式设计多层，挺累人的，代码也会复杂；同时还有评论楼层，只显示主评论楼层，具体看图：

评论样式

然后是 Ajax comment，使用的是 willin 的版本，然后 jQuery 增加 @reply，即点击回复会自动添加 @somebody: ，还有 Ctrl+Enter 回复评论，隐藏回访用户资料框等常用功能。

最后是 sidebar 和 footer 部分：

这里似乎没什么好说的，因为用的 Twenty Ten 的结构，所以你完全可以使用主题的小工具来设置侧边栏，样式上不会存在问题，如果有那应该是我没有测试到吧。不仅侧边栏可以使用小工具，底部 footer 也可以：

页脚

至于返回顶部的 Go Top，像之前说的，我并没有打算给它加上 js 滚动效果，不过样式上做了下改动而已。

其他：

主题支持 Opera 10，Firefox 3.0，Chrome，IE8，IE7，IE6，手头没 Safari，没测试；Doctype 由 HTML5 改成 XHTML 1.0 Traditional；主题不能通过 CCS 3 验证，因为圆角和阴影效果的缘故，也不能通过 HTML 验证，因为 Twenty Ten 用了 HTML5 的 role 属性，我也懒得去全部改掉了；关于 CSS Sprites，把很多图片弄成一张，省去加载多张图片的时间；然后我又去掉了 Twenty Ten 原有支持的单栏样式；测试时间并不长，所以可能还有一些细节上或者其他问题，请 DarkLight 3.0 使用者帮忙汇报 Bug，谢谢！

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

  1. 2010-9-4：增加回复邮件通知功能，使用 willin 的代码。
  2. 2010-9-3：修正在搜索不到内容时，正文中显示两个搜索框的问题。
  3. 2010-9-2：给正文增加 overflow: hidden 属性，避免溢出情况；修正“您的评论正在等待审核”评论的位置。
  4. 2010-08-29 早上更新：居然忘记测试 404 页面，稍微修改了下，并且增加一个说明文件。
  5. 2010-08-29 下午更新：修改 IE6、IE7 下鼠标滑过文章标题时，文章背景线显示不全的问题；修改 IE6 下，鼠标滑过文章内链接时，文章分割线下滑问题，IE 实在太囧了；修改在回复评论时，第二层回复者名字的显示位置；修改成功提交评论后，增加提示评论成功的句子的左边距，保持美感，汗。

演示：Live Demo
下载 WordPress 主题：DarkLight 3.0

Related Posts

© Alan for Alan's World, 2010. | Permalink | 62 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/wordpress-theme-darklight-3/feed/ 62 DarkLight和G-White主题的图片透明效果和超链接背景 http://www.alanoy.com/opacity-and-links-background-of-images-of-darklight-and-g-white-theme/ http://www.alanoy.com/opacity-and-links-background-of-images-of-darklight-and-g-white-theme/#comments Thu, 19 Aug 2010 09:26:55 +0000 Alan http://www.alanoy.com/?p=199 DarkLight 和 G-White 主题中我都加了图片透明效果，现在看来有点蛋疼，许多童鞋问我如何去掉该效果，个人喜好不能加于公布的主题中，以后要注意，去掉的方法就是，在 style.css 中找到 .entrybody img，删除里面的

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

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

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

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

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

Related Posts

© Alan for Alan's World, 2010. | Permalink | 13 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/opacity-and-links-background-of-images-of-darklight-and-g-white-theme/feed/ 13 关于DarkLight主题新版本的开发 http://www.alanoy.com/about-new-darklight-theme/ http://www.alanoy.com/about-new-darklight-theme/#comments Sun, 15 Aug 2010 02:18:23 +0000 Alan http://www.alanoy.com/%e5%85%b3%e4%ba%8edarklight%e4%b8%bb%e9%a2%98%e6%96%b0%e7%89%88%e6%9c%ac%e7%9a%84%e5%bc%80%e5%8f%91/ 在 G-White 更新到 v2.4 后，其实前阵子还是在对 G-White 进行修改，因为主题的结构和 CSS 代码还有一些不合理和冗余的地方，结构方面已改好，正在重新写 CSS 代码。但受到 Jinwen 这篇文章的影响，我也有意尝试用 WordPress 官方主题进行开发，毕竟我的那些代码是从 WordPress 2.5 用到现在的，需要全面更新一下了，所以有了把 DarkLight 和 G-White 3.0 化的想法，即在 Twenty Ten 主题结构基础上的更新开发。

回到正题，首先是对 DarkLight 的更新，版本直接跳到 3.0 且不在对之前版本进行维护改进。说说几点特性，喜欢 DarkLight 主题的可以提提意见：

  1. Ajax Comment，这次会使用 Willin 最新的改进版。
  2. 嵌套评论，样式会有所改变，敬请关注
  3. 内嵌文章分页，这次不用 wp-pagenavi，而使用还是来自 Willin 的 Mini Pagenavi，很小巧。
  4. 一些 JavaScript 效果：如点击 Reply 自动添加 @somebody，下拉菜单，Ctrl+Enter 回复评论，在考虑要不要加页面滚动效果，个人觉得没什么必要。

进度不会很快，现在失业中，正在学习，杯具。

Related Posts

© Alan for Alan's World, 2010. | Permalink | 18 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/about-new-darklight-theme/feed/ 18 关于DarkLight的相关文章和Bread Crumb样式 http://www.alanoy.com/styles-of-related-posts-and-bread-crumb/ http://www.alanoy.com/styles-of-related-posts-and-bread-crumb/#comments Sun, 08 Nov 2009 06:38:21 +0000 Alan http://www.alanoy.com/?p=53 首先提个与本文章内容无关的，发现太多朋友喜欢去掉版权信息了，想不明白，版权信息就那么碍眼？？！像 Jinwen 说的朋友加油，加个版权链接磊落点吧，囧rz。

好了，进入正题，关于我自用的 DarkLight 主题中相关文章和文章顶部导航的样式问题，由于每个 WordPress 用户的使用习惯不同，而且这两个效果都需要插件支持，所以没有在 DarkLight 发布版中放入代码和使用方法，不过最近挺多人询问关于这两个样式如何实现，于是在此把这两个样式的实现和相关的插件作下说明。PS，昨天有位朋友问了顶部 Breadcrumb 的实现问题，忘了把 CSS 代码给你了，你再看看这篇文章添加进去吧。

  • 相关文章，需要 Simple Tags 插件支持。
    在 single.php 文件中找到 ，在其后面加入以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    <div class="related_post">
        <div class="related_post_mid">
            <?php if (function_exists('st_get_related_posts')){;?>
            <?php st_related_posts('number=5&title=<h4>Related Posts</h4>&nopoststext=<strong><em>No Related Posts</em></strong>&include_page=false&order=random&xformat=%title% (%post_comment%)<p>%post_excerpt%</p>&except_wrap=5');?>
            <?php } ;?>
        </div>
        <div class="related_post_bottom"></div>
    </div>

    CSS 已经在发布版的主题中了（并没有去掉，哈哈），这样就跟我自用的样式一致了。

  • Bread Crumb 导航，需要 Breadcrumb NavXT 插件支持。
    首先在 single.php 中找到 <?php if (have_posts()) : while (have_posts()) : the_post(); ?>，在其前面加入以下代码：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    <div class="breadcrumb">
        <?php
           if(function_exists('bcn_display'))
        {
            bcn_display();
        }
       ?>
    </div>
    <div class="clear"></div>

    其次，在 style.css 文件中加入以下样式：

    1
    2
    3
    4
    5
    6
    7
    8
    9
    10
    11
    12
    13
    14
    15
    16
    17
    18
    19
    20
    21
    22
    23
    24
    25
    26
    27
    28
    29
    30
    31
    32
    33
    34
    35
    36
    37
    38
    .breadcrumb {
        margin-bottom: 15px;
        padding-bottom: 10px;
        font-size: 13px;
        line-height: 27px;
        background: url(images/entrybottom.png) repeat-x 0 bottom;
        color: #CCCCCC;
        font-style: italic;
        overflow: hidden;
    }
    * html .breadcrumb {
        height: 27px;
    }/*ie6*/
    .breadcrumb span {
        float: left;
        margin-right: 8px;
    }
    .breadcrumb a, .breadcrumb a:visited {
        color: #CCCCCC;
    }
    .breadcrumb a:hover {
        text-decoration: underline;
    }
    .bread_home {
        text-indent: -99999em;
    }
    .bread_home {
        margin-right: 6px !important;
    }
    .bread_home a, .bread_home a:visited {
        display: block;
        background: url(images/bread_home.png) no-repeat;
        height: 24px;
        width: 24px;
    }
    .bread_current {
        color: #EEEEEE;
    }

    最后，在 WordPress 后台的 Breadcrumb NavXT 设置 General 下的：
    - Breadcrumb Separator: <span class="bread_sep"><em>&gt; </em></span>
    - Home Prefix: <span class="bread_home">
    - Home Suffix: </span>
    当然你可以在其他页面添加类似导航，代码的放置类似，后台设置简单明了，自己摸索了。

Related Posts

© Alan for Alan's World, 2009. | Permalink | 71 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/styles-of-related-posts-and-bread-crumb/feed/ 71 DarkLight 2.3 http://www.alanoy.com/darklight-2-3/ http://www.alanoy.com/darklight-2-3/#comments Sun, 25 Oct 2009 19:32:52 +0000 Alan http://www.alanoy.com/?p=30 这两天开始动手修改 G-White 主题，很多东西修改，还是比较麻烦的，费了不少时间，然后在各浏览器下调试的时候，发现 IE7 下有挺多细节问题要修正的，于是有了这篇 DarkLight 更新的文章，其实部分 DarkLight 2.0 的部分 Bug (根据用户的反馈)，已于 10/18 修正并更新，今天主要就是处理了 IE7 下的问题，当然应该还有一些其他的细节问题我没发现，还是需要大家继续反馈。Change Log 如下：

- 9/20 更新：修改在无评论时 sidebar 和 footer 字体变大的 Bug。
- 10/18 更新：修改侧边栏样式，修正使用 Widget 工具时“标签云”样式，当添加工具时，侧边栏各个工具样式保持一致；修改嵌套评论“链接”的颜色；增加下拉菜单导航样式，当主页面包含子页面时，鼠标经过会出现下拉菜单(IE6 无视)。
- 10/26 更新：修正 IE7 下 Comment Author 居左问题；修正 IE7 下嵌套评论间距过大和嵌套评论内容高度过高问题；修正导航栏下拉菜单在 IE7 下异位问题。修正留言后 Leave a comment 这个链接变成 <a href=”#commentform”>Leave a comment</a> 的 Bug，我把这个链接转移位置了。
- 12/14 更新：把文章标题显示 Article-link(Permalink) 换成显示原标题

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

下载 DarkLight 2.3

Related Posts

© Alan for Alan's World, 2009. | Permalink | 107 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/darklight-2-3/feed/ 107 DarkLight 2.0 http://www.alanoy.com/darklight-2/ http://www.alanoy.com/darklight-2/#comments Sun, 20 Sep 2009 03:22:55 +0000 Alan http://www.alanoy.com/?p=11 DarkLight 2.0 终于如期发布，上个版本 1.04 直接跳到 2.0，改了挺多东西的，优化了代码，外观上变化不大。DarkLight 2.0 只支持 WordPress 2.8+，这次没有必装的插件也可以正常运行了，支持嵌套回复，支持 Ajax 评论，支持评论分页，显示楼层序号，内嵌 WP-Pagenavi，支持 Widget……在 Firefox 3.5，Opera 10，Chrome 3 及 IE6 下测试正常，IE6 下的嵌套评论模式跟其他浏览器有点不一样，在此建议大家去弄个 IE6 必死吧，哈哈。

PS，发布出来的 DarkLight 2.0 会有部分样式跟我自己使用的主题不一样的，比如 Header 导航和 Sidebar 上的标题字体，因为每个人的使用习惯和博客内容跟我的一样，所以我这种太过自定义的样式不会放在发布版本里面。不多说，看具体说明（For English Usage, please read the “Read Before Use” file in the darklight_2 folder）：

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

- 9/20 更新：修改在无评论时 sidebar 和 footer 字体变大的 Bug。
- 10/18 更新：修改侧边栏样式，修正使用 Widget 工具时“标签云”样式；修改嵌套评论“链接”的颜色；增加下拉菜单导航样式，当主页面包含子页面时，鼠标经过会出现下拉菜单(IE6 无视)。

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

下载 DarkLight 2.0

Related Posts

© Alan for Alan's World, 2009. | Permalink | 128 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , ,

]]> http://www.alanoy.com/darklight-2/feed/ 128 New Born http://www.alanoy.com/new-born/ http://www.alanoy.com/new-born/#comments Fri, 18 Sep 2009 14:41:29 +0000 Alan http://www.alanoy.com/?p=3 A new start for Alan’s World，以前的文章全部删了，这在从 PJ Blog 转到 WordPress 的时候也发生过，这个诞生三年多的 Blog 如今又像新生的一样，Orz。或许是一时兴起做了这个有点”变态”的决定，不过想想 Blog 里的大部分文章都是分享系统美化的，真正自己写的相对来说，太少了，虽然收集分享也花了功夫，但在现在看来已无多大意义，这样的 Post 方式自己都觉得很讨厌了，所以才有了这样的想法，而且有了挺久了，只是一直没时间去做这一步，最近抽空把 DarkLight 做了改进，同时把 Blog 给 Wipe 了。之后呢？还是要多点原创，多点亲手写的东西。希望对得起订阅的朋友，哈哈。

说到 DarkLight 主题，以前的版本问题多多（这里还是要感谢使用 DarkLight 主题并做出反馈的朋友，才能发现这么多问题），尤其是 php 文件的问题，新版本已经做出许多改进，主题样式上也有部分改变，DarkLight 2.0 不久后应该能发布，我现在这个样式基本上就是 2.0 的样子了，不过还会有点改变的。

PS. 新开始的第一篇文竟是用 WordPress App for Blackberry 写的，这个软件很不错，希望功能能越来越强大。

Related Posts

© Alan for Alan's World, 2009. | Permalink | 26 comments
Add to del.icio.us | Google Bookmark | Digg | Live Bookmark | Facebook
Post tags: , , ,

]]> http://www.alanoy.com/new-born/feed/ 26