威言威语
我愿像茶,苦涩留心,清香予人。
威言威语
当前位置: 首页 > 设计 > 正文

很有感觉的PJBlog皮肤『Stop Beating』

威言威语PJBlog主题,情侣类博客主题,同时也适合那些有感情故事的朋友,这主题看着很有感觉。
很有感觉的PJBlog皮肤『Stop Beating』

==============================

皮肤名称:Stop Beating

适用版本:PJBlog3_v3.0.6.170(要修改源码),PJBlog2&3

适用模式:全静态,半静态,全动态(完成修改后请 初始化数据

发布时间:2009-09-16

原皮肤地址:http://www.whenyourheartstopsbeating.com

移植作者:威言威语

截图预览:见下↓

使用说明:1、适应的分辨率:最佳:1024×768

2、适应的浏览器:IE6、IE7、FireFox、Opera、Maxthon、Safari 等

==============================

这个是界面是我很早之前看到的,从看到他就有一种冲动,想仿到PJBlog上面来。

第一次看到的时候有点没有想明白它是怎么样布局的,因为开始我保存图片的发现背景有2个部分组成,左边的橙色背景和右边的深绿色背景,我就想如何在一个层上面定义2个背景,而且是从中间向两边repeat展开。

PJBlog皮肤『Stop Beating』

然后就一直想PJBlog上面能否定义,Google也没有我想的定义2个背景的,没有研究起来,心里很不舒服。

开始也想过用一个很大的背景来类似的表现,但是现在的分辨率都很大,如果在做个超大的背景的话,加载就会很慢,影响博客的速度。

某一天再次打开http://www.whenyourheartstopsbeating.com,查看源代码,突然发现了什么,原来如此。

一直以来已经习惯了DIV+CSS,而忽略的表格的威力,而恰恰这里他用到了表格,将背景分为3个部分,左中右,然后分别定义。然后开始对PJ动手术了,也将PJ分为3个部分,然后CSS定义,成功了,我很是开心。

接下来就相当的迅捷了,这套皮肤意境还是很不错了,适合一些写心情的博主使用。为了达到高仿的目的,修改的小日历,搜索样式,保持与原来的类似,底部的黑色板块我用来放置了版权信息。

下面讲解使用方法:

第一、修改header.asp和footer.asp。

打开header.asp,找到

<a href="javascript:history.go(-1)" accesskey="z"></a>

在其后面添加


<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="weisayleft">&nbsp;</td>
<td id="weisaycenter">

打开footer.asp,找到 在其前面加上


</td>
<td id="weisayright">&nbsp;</td>
</tr>
</table>

如果你用的全静态,下面还需要做一步(全动态和半静态不用做),就是打开Template文件夹下的static.htm。

找到

<a href="javascript:history.go(-1)" accesskey="z"></a>

在其后面添加


<table border="0" width="100%" cellpadding="0" cellspacing="0">
<tr>
<td id="weisayleft">&nbsp;</td>
<td id="weisaycenter">

找到 在其前面加上


</td>
<td id="weisayright">&nbsp;</td>
</tr>
</table>

第二、搜索框的修改,并将其设置到侧边第一个。

侧栏新建一模块(不要设置模块名称,只填标识),编辑模块插入一下代码


<div id="search">
            <form  id="searchform"  action="search.asp">
                <input type="text" value="威言威语..." name="SearchContent" id="s" onfocus="if(this.value=='威言威语...')this.value=''" onblur="if(this.value=='')this.value='威言威语...'" />
                <input type="submit" id="searchsubmit" value="" />
            </form>
        </div>

第三、目录的设置,由于这套皮肤没有设置顶部导航栏,所以必须将侧边栏的目录导航往上面调整,设置到侧边栏的第二个(如果第一个不修改的话,设置到第一个),并取消首页独享。

第四、小日历的修改,修改好了要重新生成数据库,我的小日历是在v300上修改的,当然了,PJBlog3_v3.0.6.170也是可以修改的。实现了全动态,半静态,全静态。

1、修改common/funciton.asp。找到


    Case "ym"
    DateToStr=Right(Year(DateTime),2)&DateMonth

在下面加上


    Case "m"
    DateToStr=Shortmonth(DateMonth-1)

2、使用全动态模式下,修改class/cls_default.asp和class/cls_article.asp。

在class/cls_default.asp里找到

<div class="ContentLeft"></div>

替换成


<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><%=DateToStr(webLogArr(4,PageCount),"m")%></p><p class="dateA"><%=DateToStr(webLogArr(4,PageCount),"d")%></p>  </div></div>

在class/cls_article.asp里找到

<div class="ContentLeft"></div>

替换成


<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><%=DateToStr(log_ViewArr(9,0),"m")%></p><p class="dateA"><%=DateToStr(log_ViewArr(9,0),"d")%></p> </div></div>

3、使用半静态模式,修改class/cls_logAction.asp、Template/ArticleList.asp和Template/Article.asp。

在class/cls_logAction.asp找到

Temp1 = Replace(Temp1, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

注意,有两处,改第一处,在下面加上


    Temp1 = Replace(Temp1, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp1 = Replace(Temp1, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

找到

Temp2 = Replace(Temp2, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

在下面加上


    Temp2 = Replace(Temp2, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp2 = Replace(Temp2, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

在Template/ArticleList.asp找到

<div class="ContentLeft"></div>

注意,有两处,都替换成

<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><$log_PostTime_1$></p><p class="dateA"><$log_PostTime_2$></p> </div></div>

在Template/Article.asp找到

<div class="ContentLeft"></div>

替换成


<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><$log_PostTime_1$></p><p class="dateA"><$log_PostTime_2$></p> </div></div>

4、全静态模式下修改跟半静态模式相似,修改class/cls_logAction.asp、Template/ArticleList.asp和Template/static.htm。

在class/cls_logAction.asp找到

Temp1 = Replace(Temp1, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

注意,有两处,改第二处,在下面加上


    Temp1 = Replace(Temp1, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp1 = Replace(Temp1, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

找到


    Temp2 = Replace(Temp2, "<$log_PostTime$>", DateToStr(log_View("log_PostTime"), "Y-m-d"))

在下面加上


    Temp2 = Replace(Temp2, "<$log_PostTime_1$>", DateToStr(log_View("log_PostTime"), "m"))
    Temp2 = Replace(Temp2, "<$log_PostTime_2$>", DateToStr(log_View("log_PostTime"), "d"))

分别在Template/ArticleList.asp和Template/static.htm中找到

<div class="ContentLeft"></div>

替换成

<DIV class=indexdata><div class="ContentLeft"><p class="monthB"><$log_PostTime_1$></p><p class="dateA"><$log_PostTime_2$></p> </div></div>

我现在用的v300修改版,半静态。我的小日历也是按照上面修改来了,你可以试试。

当然了,想用这套皮肤话,有些人不希望修改那么多,第一步,第三步必须修改。第二步和第四步可以改可以不改。

下载:

您可能还会对这些文章感兴趣!

很有感觉的PJBlog皮肤『Stop Beating』:目前有 20 条评论

  1. song
    18楼
    song:Google Chrome 7.0.517.44 Windows XP

    用了那个搜索栏的改动,不过我把他改到头部去了,还是用你的这个代码,3Q了

    2010-12-26 23:51 回复
  2. 小五
    17楼
    小五:Google Chrome 21.0.1180.89 Windows 7

    原作者博客提到你了,去看看

    喜欢这套皮肤,可惜wp没有!

    2010-11-21 00:09 回复
    • William
      WilliamFirefox 3.6.12 Windows 7

      @小五呵呵,是的。其实WordPress版也是有的,不过不是我做的。看这里http://www.y2sky.com/blog/

      2010-11-21 00:25 回复
  3. 最美-凯说
    16楼
    最美-凯说:Firefox 6.0.2 Windows 7

    已经使用,谢谢了!

    2010-03-15 17:33 回复
  4. 3mr
    15楼
    3mr:Firefox 25.0 Windows XP

    喜欢这个风格修改下看看。

    2010-03-11 10:21 回复
  5. 仙人
    14楼
    仙人:360安全浏览器 Windows XP

    我也是用你这个,怎么没有你那样图的效果啊,没有大图标的日期,右边的整合 菜单也没有啊。是不是还要什么插件啊?

    William 于 2010-02-05 08:51 回复

    想要实现小日历,必须按照上面第四步的要求修改好源文件,(完成修改后还要 初始化数据)
    右边整合的修改请看这个 https://www.weisay.com/blog/article.asp?id=251

    2010-02-05 20:08 回复
  6. lostisland
    13楼
    lostisland:Google Chrome 9.0.576.0 Windows 7

    谢谢大大,问题解决了,是自己复制代码的时候太粗心没复制完全

    William 于 2009-12-07 04:58 PM 回复

    解决问题就好~

    2009-12-07 14:12 回复
  7. lostisland
    12楼
    lostisland:Google Chrome 17.0.963.56 Windows 7

    大大我安装这张皮以后用普通浏览模式内容错位了,不知道怎么修改,可以帮我看看么

    William 于 2009-12-07 01:46 PM 回复

    应该是你修改小日历的时候出现了错误,把文章看仔细了修改,修改的时候不要用编辑器修改,用记事本修改~

    2009-12-07 13:14 回复
  8. angellost
    11楼
    angellost:Google Chrome 30.0.1599.101 Windows 7

    威哥。。帮看下当为什么我用了两边的显示黑的。。背景层黑的 。就显示中间。。请教下怎么修改

    William 于 2009-10-19 12:14 AM 回复

    好好看下文章,因为你第一步没有修改,那是用这套皮肤必须修改的,不修改如何能显示出来呢?

    2009-10-19 12:07 回复
  9. mrdodo
    10楼
    mrdodo:世界之窗浏览器 Windows 7

    3.2.7.301 版本你是怎么更新的啊。

    William 于 2009-10-10 11:59 AM 回复

    这个我是在戒聊提供的v300上修改的~

    2009-10-09 23:56 回复
  10. uoyyou
    9楼
    uoyyou:Google Chrome 5.0.195.0 Windows XP

    威兄 可我还是感觉有点问题啊 打开的速度真是慢啊 你打开快吗?

    William 于 2009-10-01 07:28 PM 回复

    我这边蛮快的啊。除了第一次加载略微慢一点,之后就一打就开了~

    2009-10-01 07:15 回复
  11. uoyyou
    8楼
    uoyyou:Internet Explorer 9.0 Windows 7

    威兄 在帮我看看有没问题 基本都改过了

    William 于 2009-09-30 10:18 PM 回复

    这回好了,文章页也没有问题了~

    2009-09-30 13:45 回复
  12. uoyyou
    7楼
    uoyyou:Google Chrome 17.0.963.66 Windows XP

    威兄,麻烦你再帮我看看这个,需要怎么处理,再哪个文件下更改
    网页错误详细信息
    用户代理: Mozilla/4.0 (compatible; MSIE 8.0; Windows NT 5.1; Trident/4.0; GTB6; Mozilla/4.0 (compatible; MSIE 6.0; Windows NT 5.1; SV1) )
    时间戳: Tue, 29 Sep 2009 22:57:32 UTC
    消息: 缺少 ';'
    行: 732
    字符: 32
    代码: 0

    William 于 2009-09-30 10:45 AM 回复 脚本错误,应该是你修改了什么导致的吧。不怎么好说,也有可能是脚本延迟~

    2009-09-30 07:01 回复
  13. uoyyou
    6楼
    uoyyou:Google Chrome 21.0.1180.89 Windows XP

    威兄 全静态下 文章 页面 是不是还要改啊
    背景依旧有问题啊 两旁都是黑的 望解决下
    http://www.taokeclub.cn
    继续关注中

    William 于 2009-09-29 07:14 PM 回复

    已经修改好了,文章上面。。。

    2009-09-29 17:11 回复
  14. kaisay
    5楼
    kaisay:Google Chrome 28.0.1500.95 Mac OS X  10.8.4

    第一步修改影响其他皮肤使用吗?

    William 于 2009-09-20 11:53 AM 回复

    影响的。

    2009-09-20 10:53 回复
  15. 翔子
    4楼
    翔子:360安全浏览器 Windows XP

    收藏了 好东西

    William 于 2009-09-20 11:53 AM 回复

    2009-09-19 23:37 回复
  16. 笔头
    地板
    笔头:Google Chrome 25.0.1364.152 Windows 7

    看上去不错,感觉整体有点小。中间正文跟侧边栏是不是可以再大点~

    William 于 2009-09-20 11:53 AM 回复

    宽屏下的确有点~

    2009-09-19 23:00 回复
  17. 海天无影
    板凳
    海天无影:Firefox 3.6.13 Windows XP

    这个皮肤不错 不过要是再宽一点 可能会更好

    William 于 2009-09-19 00:24 AM 回复

    嗯,主要是这皮是仿的,为了就是保持与原来的基本一致~

    2009-09-18 09:17 回复
  18. luchun0112
    沙发
    luchun0112:Internet Explorer 9.0 Windows 7

    其实蛮好看的。。但是总觉得内容太窄了。。

    William 于 2009-09-16 08:28 PM 回复

    恩,宽屏的话的确有点窄,不过仿的怎么说也得保持一致啊,呵呵~

    2009-09-16 18:03 回复

发表评论

电子邮件地址不会被公开。 必填项已用 * 标注

gravatar

question razz sad smile redface biggrin eek shock confused cool lol mad rolleyes wink cry