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

veisin

＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝
皮肤名称：Stop Beating
适用版本：PJBlog3_v3.0.6.170（要修改源码），PJBlog2&3
适用模式：全静态，半静态，全动态（完成修改后请 初始化数据）
发布时间：2009-09-16
原皮肤地址：http://www.whenyourheartstopsbeating.com/
移植作者：威言威语
截图预览：见下↓
预览地址：http://www.weisay.com/blog/article.asp?id=285
使用说明：1、适应的分辨率：最佳：1024×768
               2、适应的浏览器：IE6、IE7、FireFox、Opera、Maxthon、Safari 等
＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝＝

这个是界面是我很早之前看到的，从看到他就有一种冲动，想仿到PJBlog上面来。
第一次看到的时候有点没有想明白它是怎么样布局的，因为开始我保存图片的发现背景有2个部分组成，左边的橙色背景和右边的深绿色背景，我就想如何在一个层上面定义2个背景，而且是从中间向两边repeat展开。
然后就一直想PJBlog上面能否定义，Google也没有我想的定义2个背景的，没有研究起来，心里很不舒服。
开始也想过用一个很大的背景来类似的表现，但是现在的分辨率都很大，如果在做个超大的背景的话，加载就会很慢，影响博客的速度。
某一天再次打开http://www.whenyourheartstopsbeating.com/，查看源代码，突然发现了什么，原来如此。
一直以来已经习惯了DIV+CSS，而忽略的表格的威力，而恰恰这里他用到了表格，将背景分为3个部分，左中右，然后分别定义。然后开始对PJ动手术了，也将PJ分为3个部分，然后CSS定义，成功了，我很是开心。
接下来就相当的迅捷了，这套皮肤意境还是很不错了，适合一些写心情的博主使用。为了达到高仿的目的，修改的小日历，搜索样式，保持与原来的类似，底部的黑色板块我用来放置了版权信息。
下面讲解使用方法：
第一、修改header.asp和footer.asp。
打开header.asp，找到

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

复制代码

在其后面添加

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

复制代码

打开footer.asp，找到  </body>  在其前面加上

1. </td>
   
2. <td id="weisayright">&nbsp;</td>
   
3. </tr>
   
4. </table>

复制代码

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

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

复制代码

在其后面添加

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

复制代码

找到  </body>  在其前面加上

1. </td>
   
2. <td id="weisayright">&nbsp;</td>
   
3. </tr>
   
4. </table>

复制代码

第二、搜索框的修改，并将其设置到侧边第一个。
侧栏新建一模块（不要设置模块名称，只填标识），编辑模块插入一下代码

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

复制代码

第三、目录的设置，由于这套皮肤没有设置顶部导航栏，所以必须将侧边栏的目录导航往上面调整，设置到侧边栏的第二个（如果第一个不修改的话，设置到第一个），并取消首页独享。
第四、小日历的修改，我的小日历是在v300上修改的，当然了，PJBlog3_v3.0.6.170也是可以修改的。实现了全动态，半静态，全静态。下面是在PJBlog3_v3.0.6.170修改的，其他版本自己调整。
1、修改common/funciton.asp。找到

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

复制代码

在下面加上

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

复制代码

2、使用全动态模式下，修改class/cls_default.asp和class/cls_article.asp。
在class/cls_default.asp里找到

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

复制代码

替换成

1. <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里找到

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

复制代码

替换成

1. <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找到

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

复制代码

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

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

复制代码

找到

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

复制代码

在下面加上

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

复制代码

在Template/ArticleList.asp找到

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

复制代码

注意，有两处，都替换成

1. <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找到

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

复制代码

替换成

1. <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找到

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

复制代码

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

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

复制代码

找到

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

复制代码

在下面加上

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

复制代码

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

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

复制代码

替换成

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

复制代码

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

当然了，想用这套皮肤话，有些人不希望修改那么多，第一步，第三步必须修改。第二步和第四步可以改可以不改。
下载：[hide][/hide]

[ 本帖最后由 veisin 于 2009-9-29 18:45 编辑 ]

luchun0112

沙发支持。。顺便黄金广告位出租

shixiao

站位

shixiao

代码多的我看的都疯了 楼主真强呃

veisin

其实主要就是修改小日历，其实也没有什么，不修改小日历同样可以用的~

shixiao

原帖由 veisin 于 2009-9-16 20:19 发表
其实主要就是修改小日历，其实也没有什么，不修改小日历同样可以用的~

呵呵。这倒也是。不过你真有耐心》。。我们班里估计不会有人有耐心加这么多代码

哎哟

....好看

hacbd

本帖隐藏的内容需要回复才可以浏览

dingxia

某曦

威哥又出皮了 很好

veisin

哈哈，最近会陆续整理，将暑假在家搞的皮肤一个一个的发布出来。。。