如何把居中的页面改为全版面显示,去掉左右空白部分

在这里讨论和发布PHPBB3.0.X风格和主题
User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-01 17:48

http://www.yangpeiyi.net/bbsen


此图是原来的风格
Attachments
-32.jpg
01
Last edited by pccard on 2008-10-01 17:59, edited 1 time in total.

User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-01 17:49

我想去掉左右蓝色的地方,让主体列表占满左右1024px,如下图
-33.jpg
02

也就是左右拉宽至全屏(浏览帖子内容的部分一样需拉宽)
请懂的高人指点

User avatar
IOsetting
论坛管理员
论坛管理员
Posts: 3645
Joined: 2006-10-17 1:48

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by IOsetting » 2008-10-01 17:54

给出页面的链接, 能看到页面的话才好知道要改哪. 你也可以自己拿firebug试试


hellojinjie
学有小成
学有小成
Posts: 199
Joined: 2007-12-05 22:18

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by hellojinjie » 2008-10-01 19:13

去掉左右部分的就不好看了

这个风格很可爱,好像在哪见过

User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-01 19:29

这个是官方认证的模板阿,kitty, 我担心这样缩小的版面可视的帖子里的图片大小就要相应减小了

hellojinjie
学有小成
学有小成
Posts: 199
Joined: 2007-12-05 22:18

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by hellojinjie » 2008-10-01 20:02

还是要忍不住的赞一下 阿,这个风格太可爱了

图片缩小,,完全不用担心这个,,,,,图片大了,反而影响版面的阅读和整洁

如果出于图片的原因,你可以考虑下 highsilde 这个图片显示特效,(在论坛里搜下,以前有讨论的)

这个效果在 forum.ubuntu.org.cn 中有实现 http://forum.ubuntu.org.cn/viewtopic.php?f=33&t=152642
不过ubuntucn中的黑色的边框有点难看

User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-01 20:32

谢谢楼上的热心解答!!! Image

User avatar
IOsetting
论坛管理员
论坛管理员
Posts: 3645
Joined: 2006-10-17 1:48

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by IOsetting » 2008-10-02 1:20

宽度可以改, 但是这个风格用的背景图片是定宽的, /styles/K_Kitty/theme/images/fond.gif - 这个图片的宽度只有800, 如果将其他内容宽度拉大, 就会覆盖这个图片的两边, 会很难看. 除非你去掉这个图片, 但是那样一来这个风格就不那么好看了.

如果只是为图片考虑, 用 缩略图 + highslide 来处理是一个好办法.

User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-04 13:57

谢谢管理员的回答,fond.gif 我也可以处理的变宽。只想知道拉伸的办法
Image 不光图片大小,还有阅读习惯的考虑。

User avatar
IOsetting
论坛管理员
论坛管理员
Posts: 3645
Joined: 2006-10-17 1:48

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by IOsetting » 2008-10-04 15:45

你在风格的theme目录下 common.css里面找
#wrap
里面的
padding:0 0; 改成 padding:0 20px; 这样框内内容距边框左右调整为20px
把 width:800px; 删掉, 这个是限制最大宽度为800px


#wrap-bg
把width:750px; 删掉

然后刷新风格主题看看

User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-04 20:33

果然是管理员,技术尖深!!! 我按照你教的逐步改,每一步改完看结果。前两步没有任何变化,到第三步突然变到我想要的风格。欢呼雀跃!!! 管理员果然有经验,在这个风格中作为背景"蕾丝边"效果的fond.gif的宽度不够长,改完后会很难看的结果被你预料到了。花了点时间PS好,把适合改后宽度的GIF放上去,就完成了。theme目录下 common.css里面#wrap width:800px,你让我去掉的,后来我又试了下把width 改为960 px,这样更加符合我这个风格的具体情况,各在左右留下一条竖直的粉色背景色细边,增加了美观度。管理员,非常感谢你的指导!!

效果图:
haole.jpg
我的显示器最高分辨率1024,现在很多人换了大显示器,分辨率有1280X1024了,为了看效果,我勉强调了自己的显示器到1280,看到这个风格在1280下左右会有很多,变成没改前一样的可爱。但是我已经满足了,至少在1024下是profile width+postbody width 达到了全屏。这全都是你,管理员IOsetting的功劳。

谁的分辨率用1280X1024的? 帮我看看是不是变成1楼的那个样子。。。
http://www.yangpeiyi.net/bbsen

User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-05 1:57

一个星期前就看不到acp的general,刚才重装了下,头像终于能激活了,最后
#wrap {
width: 1000px;
margin: 0 auto;
padding: 0 0px;
}

#wrap-bg {

background: transparent;
min-height: 100%;
width: 940px;
margin: 0 auto;
margin-top: 0px;
}

当然, logo尺寸也改为940宽
Last edited by pccard on 2008-10-05 15:18, edited 3 times in total.

User avatar
pccard
初来乍到
初来乍到
Posts: 11
Joined: 2008-09-10 0:07

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by pccard » 2008-10-05 15:14

这个风格在Firefox下很漂亮,但在IE6下面效果出不来,残念~ Image

newerby
论坛管理员
论坛管理员
Posts: 1293
Joined: 2006-11-10 2:20

Re: 如何把居中的页面改为全版面显示,去掉左右空白部分

Post by newerby » 2008-10-06 17:54

赞一下,楼主论坛的风格粉漂亮,本主题也顺便转到风格板块了。

Post Reply