教你如何自定义门户DIY格局的比例，如添加3：2比例

本人菜鸟，根据搜索本站的资料结合自己的修改，终于找出修改的方法，签于官方并没有一个正确完善的教程帖子，本人愿意与大家分享一下方法步骤，其实不难：

只修改/template/default/common目录下的三个文件：common.css、css_diy.css、header_diy.htm

以下以3：2为例，朋友们可根据自己的需要，稍微修改以下数字的比例便可添加任意比便的框架，本方法本人仅在2.0版本下试验无错，其它版本未知。

一、打开common.css,找到以下代码：

1. .frame-3-1-l, .frame-1-3-l

复制代码

用下面的代码来替换：

1. .frame-3-1-l, .frame-1-3-l, .frame-3-2-l, .frame-2-3-l

复制代码

找到：

1. .frame-3-1-r, .frame-1-3-r

复制代码

用下面的代码来替换：

1. .frame-3-1-r, .frame-1-3-r, .frame-3-2-r, .frame-2-3-r

复制代码

再找到：

1. .frame-3-1 .mn, .frame-3-1 .col-l, .frame .frame-3-1 .mn, .frame .frame-3-1 .col-l { float: left; width: 74.9%;}
   
2. 
   
3.         .frame-3-1 .sd, .frame-3-1 .col-r, .frame .frame-3-1 .sd, .frame .frame-3-1 .col-r { float: right; width: 24.9%}

复制代码

在代码下面插入：

1. .frame-2-3 .mn, .frame-2-3 .col-r, .frame .frame-2-3 .mn, .frame .frame-2-3 .col-r { float: right; width: 59.9%;}
   
2. 
   
3.         .frame-2-3 .sd, .frame-2-3 .col-l, .frame .frame-2-3 .sd, .frame .frame-2-3 .col-l { float: left; width: 39.9%;}
   
4. 
   
5. 
   
6. 
   
7.         .frame-3-2 .mn, .frame-3-2 .col-l, .frame .frame-3-2 .mn, .frame .frame-3-2 .col-l { float: left; width: 59.9%;}
   
8. 
   
9.         .frame-3-2 .sd, .frame-3-2 .col-r, .frame .frame-3-2 .sd, .frame .frame-3-2 .col-r { float: right; width: 39.9%}

复制代码

二、打开css_diy.css，

找到

1. .frame-1-3, .frame-3-1

复制代码

用下面代码替换之

1. .frame-1-3, .frame-3-1, .frame-2-3, .frame-3-2

复制代码

再找到：

1. .frame-1-3 { background-position: 24.9% 0; }
   
2. 
   
3.         .frame-3-1 { background-position: 74.9% 0; }

复制代码

在其下面插入：

1. .frame-2-3 { background-position: 39.9% 0; }
   
2. 
   
3.         .frame-3-2 { background-position: 59.9% 0; }

复制代码

三、打开header_diy.htm文件，

找到：

1. <li><a href="javascript:;" id="frame_3_1" onmousedown="drag.createObj(event,'frame','3-1');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-3-1.png" />3:1</a></li>

复制代码

在下面插入：

1. <li><a href="javascript:;" id="frame_2_3" onmousedown="drag.createObj(event,'frame','2-3');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-2-3.png" />2:3</a></li>
   
2. 
   
3.                         <li><a href="javascript:;" id="frame_3_2" onmousedown="drag.createObj(event,'frame','3-2');" onfocus="this.blur();"><img src="{STATICURL}image/diy/layout-3-2.png" />3:2</a></li>

复制代码

至此代码部分的修改已完成，只要上传附件的比便图片到空间目录里/static/image/diy即可，（那个图片我也是用别人的，是4：1的好像，由于我不会作图，就将就着用，自己明白就好）

继电器,中间继电器,热继电器,延时继电器,电磁继电器 www.jidianqi.cc  前来支持 友情换链接请加QQ408369233
继电器原理  http://www.jidianqi.cc/news/show-6.html
继电器接线图 http://www.jidianqi.cc/news/show-7.html

楼主很牛，不过建议教下大家如何对门户里的栏目边框大小的调整

支持了!!!

支持

我也支持一下

谢谢分享

最后一段话没看懂啊，只要上传附件的什么图片到空间目录里/static/image/diy即可？

我先收藏你的了 好帖子哈

LZ真好！