Page Ballon主题小修改

因为我的ThinkPad T22现在还是在用IE6,所以发现了一点点小问题。

本文仅适用于Page的主题Page Ballon,详情请点此跳转,
请同时参照你下载的Page Ballon主题压缩包进行你需要的修改。

源于那篇要加密的『他』,
大家都知道常规来说,POST加密后会以

This post is password protected. To view it please enter your password below:

来表示,但是我这么做后,Sidebar就被挤下去了,我以为是文字没有断行引起的,
于是用

word-wrap & word-break

来处理,但是还是不行,我以为IE6不支持这两个,就去Page那里提问

不过Page似乎被『PHP』和『加密』吸引了,
同时他认为IE6的不兼容是导致该主题不在国内发布的原因(已被WP.org收录),
可能是认为国内普遍还是在用IE6的原因吧?

其实,
我同时安装有FF 3.0.4, 7, Opera 9.62, Chrome, 还有一个IE 6的绿色版,
没办法,想偷懒得到Page的帮助看来是没可能,只好自己动手了。

.
1. Sidebar被挤到下面去

这个问题其实也是我太懒了,一开始就认为是断行或者其它问题,
等我往下拉的时候,发现是我几张超级大的图片把sidebar干掉了,
当然,对于图片要注意大小,可是也不能总挂心这种事情吧,OK,打开CSS,

找到 #maincontent 在后面的 {} 里添加 overflow-x:hidden;

作用是把元素的溢出部分隐藏起来,所以不会导致div maincontent被撑开。

.
2. 主文字区域(maincontent)的背景似乎不对

这个其实还没下手就先头疼了,我的CSS也是半桶水啊~
后面又重新把主题从FTP上抓下来(用完就删源文件的好习惯 :mrgreen:),
分析了一下css文件和img目录,

从img来看,
上面(.topcorner)和下面(.bottomcorner)的圆角,
是通过对一个图片(backtb.jpg)的padding↓↑15px来实现的(这招我玩过),
而主字域(.contentpadding)的边框,用图片(backm.jpg)实现背景和边线(repeat-y),

从CSS来看,
其实前面在折腾撑开的时候就发现了,因为试过overflow:auto;
因为边框都贴到日期的侧身了,而本来是缩进的地方是一个奇怪的图片,
发现似乎主文字域(.contentpadding)的左右有padding 20px,但是注释掉还是不行,
OK,恢复,放弃这个padding。

后来突然看到Page对

.topcorner .bottomcorner .contentpadding

的背景定义都是

background: url(img/XXX.jpg) XXX XXX center;

噢~ 明了~ 因为IE6会有莫名其妙的padding(暂时没精神去研究怎么来的),
因为Page把背景做了居中,于是 …… 就奇怪了,像这样,

image

.
解决很简单,去CSS,

找到 .topcorner .bottomcorner .contentpadding 三段
将后面 {} 内的语句中的 center 修改为 left 就行

小结:
关于第一个问题,我在CSS里面看到Page对.entry已经做过overflow:hidden;了,
理论上来说,那几个IMG应该归.entry管的,为什么在IE6无效呢,怪哉~
至于第二个问题,等测试过多种分辨率我再发表言论 ……

啰嗦了这么多,暂时在我的 绿色IE6/7/FF3于1027×768分辨率 试验成功,
等回宿舍用T22测试~

PS. 因为喜欢才做修改到尽量少问题,如果有问题请留言。

Update: after 10 mins
T22的1400×1050分辨率,FF3/Opera 9.63/原装IE6,测试没有任何问题。

还好不用接受Page的建议换掉这么喜欢的主题了,
同时透露一下,如果你的POST加过密码,
是由includes/post-template.php来判断输出的,相关提示可以改它。

Update: Dec 4th,
刚才在IE6下访问Page的博客,同时观察了一下他的CCS,是 center 的,
终于搞明白IE6为什么多出来那么点padding了,原来不是padding,
只不过我给 #maincontent 加过 overflow,导致溢出的部分被隐藏了,
但是背景又是居中(center)的,整个DIV向两边撑开,所以才会出现上图的情况。
不过,按照我的2修改是属于比较保险的行为,至少撑开的时候保证背景不畸形,
建议修改。

Update: 12:30, Dec 4th,
发现这个模板评论的text-area当文字过多的时候, 会不显示需要拖动才行,
在CSS里面找到了定义

.message textarea {overflow:hidden;}

如果不想更改或者担心破坏原布局,可以选择在CSS任意空白行插入

#comment {overflow-:auto;}

Update: 08:29, Dec 5th,
发现4日中午修改评论文字区的自动溢出之后,FF3/7/IE6测试没有问题,
不过Opera会默认就把滚动条显示出来了,虽然是灰色的无效状态,
看来Page是兼顾到这个才没有使用自动溢出的,
不过,如果不使用Opera的话,还是可以做4日的修改的,毕竟方便点。

15 thoughts on “Page Ballon主题小修改

  1. Pingback: Dianso’s Blog » Blog Archive » WP升级了 主题也换了

  2. Pingback: WP升级了 主题也换了 « 测试

Leave a Reply

Your email address will not be published.

This site uses Akismet to reduce spam. Learn how your comment data is processed.