很有感觉的PJBlog皮肤『Stop Beating』 - 威言威语
很有感觉的PJBlog皮肤『Stop Beating』
WilliamWilliam2009-09-16 17:27设计12,127次浏览
威言威语PJBlog主题,情侣类博客主题,同时也适合那些有感情故事的朋友,这主题看着很有感觉。
==============================
皮肤名称: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上面能否定义,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"> </td>
<td id="weisaycenter">
打开footer.asp,找到
在其前面加上
</td>
<td id="weisayright"> </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"> </td>
<td id="weisaycenter">
找到 在其前面加上
</td>
<td id="weisayright"> </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修改版,半静态。我的小日历也是按照上面修改来了,你可以试试。
当然了,想用这套皮肤话,有些人不希望修改那么多,第一步,第三步必须修改。第二步和第四步可以改可以不改。
下载:
打赏支持
支付宝打赏
微信打赏
扫描二维码,打赏一下作者吧~
用了那个搜索栏的改动,不过我把他改到头部去了,还是用你的这个代码,3Q了
@song不客气~好久没看见人怎么折腾PJ了~哈哈
原作者博客提到你了,去看看
喜欢这套皮肤,可惜wp没有!
@小五呵呵,是的。其实WordPress版也是有的,不过不是我做的。看这里http://www.y2sky.com/blog/
已经使用,谢谢了!
喜欢这个风格修改下看看。
我也是用你这个,怎么没有你那样图的效果啊,没有大图标的日期,右边的整合 菜单也没有啊。是不是还要什么插件啊?
谢谢大大,问题解决了,是自己复制代码的时候太粗心没复制完全
大大我安装这张皮以后用普通浏览模式内容错位了,不知道怎么修改,可以帮我看看么
威哥。。帮看下当为什么我用了两边的显示黑的。。背景层黑的 。就显示中间。。请教下怎么修改
3.2.7.301 版本你是怎么更新的啊。
威兄 可我还是感觉有点问题啊 打开的速度真是慢啊 你打开快吗?
威兄 在帮我看看有没问题 基本都改过了
威兄,麻烦你再帮我看看这个,需要怎么处理,再哪个文件下更改
网页错误详细信息
用户代理: 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
威兄 全静态下 文章 页面 是不是还要改啊
背景依旧有问题啊 两旁都是黑的 望解决下
http://www.taokeclub.cn
继续关注中
第一步修改影响其他皮肤使用吗?
收藏了 好东西
看上去不错,感觉整体有点小。中间正文跟侧边栏是不是可以再大点~
这个皮肤不错 不过要是再宽一点 可能会更好
其实蛮好看的。。但是总觉得内容太窄了。。