在DIY中自定义框架比例教程，适合3.2版本，其它版本未测试，可以尝试！

今天看DIY的时候碰到了点问题，就是IDY里面提供的框架太少，而我又没有太多时间完全手写模板，所以想看看能不能自己增加一些自己想要的框架，通过修改几个文件得以实现，只需增加少许几行代码，就可以添加任何比例的你想要的框架。

切记先备份文件，好习惯不能忘！

1. 主要修改文件：根目录下：

    /template/default/common/common.css，

    /template/default/common/css_diy.css，

    /template/default/common/header_diy.htm

2. 分别打开着三个文件，搜索“-3-1” 内容，根据“-3-1”所在行的规则，添加“-1-4”内容

    具体如下：

在common.css 文件中修改

.frame-1-1-l, .frame-1-1-1-l, .frame-1-1-1-c, .frame-2-1-l, .frame-1-2-l, .frame-3-1-l, .frame-1-3-l, .frame-4-1-l, .frame-1-4-l { float: left; }

.frame-1-1-r, .frame-1-1-1-r, .frame-2-1-r, .frame-1-2-r, .frame-3-1-r, .frame-1-3-r, .frame-4-1-r, .frame-1-4-r { float: right; }

.frame-1-1-l, .frame-1-1-r { width: 49.9% }

.frame-1-1-1-l, .frame-1-1-1-c, .frame-1-1-1-r, .frame-2-1-r, .frame-1-2-l { width: 33.3%; }

.frame-2-1-l, .frame-1-2-r { width: 66.6%; }

.frame-3-1-l, .frame-1-3-r { width: 74.9%; }

.frame-3-1-r, .frame-1-3-l { width: 24.9%; }

.frame-4-1-l, .frame-1-4-r { width: 79.9%; }

.frame-4-1-r, .frame-1-4-l { width: 19.9%; }

再搜索：

.frame-1-3 .mn, .frame-1-3 .col-r, .frame .frame-1-3 .mn, .frame .frame-1-3 .col-r { float: right; width: 74.9%;}

.frame-1-3 .sd, .frame-1-3 .col-l, .frame .frame-1-3 .sd, .frame .frame-1-3 .col-l { float: left; width: 24.9%;}

.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%;}

.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%}

.frame-1-4 .mn, .frame-1-4 .col-r, .frame .frame-1-4 .mn, .frame .frame-1-4 .col-r { float: right; width: 79.9%;}

.frame-1-4 .sd, .frame-1-4 .col-l, .frame .frame-1-4 .sd, .frame .frame-1-4 .col-l { float: left; width: 19.9%;}

.frame-4-1 .mn, .frame-4-1 .col-l, .frame .frame-4-1 .mn, .frame .frame-4-1 .col-l { float: left; width: 79.9%;}

.frame-4-1 .sd, .frame-4-1 .col-r, .frame .frame-4-1 .sd, .frame .frame-4-1 .col-r { float: right; width: 19.9%}

再搜索：

.frame-1-2 .sd .block, .col-l .block, .frame-2-1 .mn .block, .frame-1-1-1 .col-c .block, .frame-1-3 .sd .block, .frame-3-1 .mn .block,.frame-1-4 .sd .block, .frame-4-1 .mn .block { margin-right: 10px; }

.frame-1-2 .mn .block, .col-r .block, .frame-2-1 .sd .block, .frame-1-1-1 .col-c .block, .frame-1-3 .mn .block, .frame-3-1 .sd .block, .frame-1-4 .mn .block, .frame-4-1 .sd .block { margin-left: 10px; }

再搜索：

.xfs_nbd .col-l .block, .xfs_nbd .frame-1-1-l .block, .xfs_nbd .frame-2-1-l .block, .xfs_nbd .frame-1-2-l .block, .xfs_nbd .frame-3-1-l .block, .xfs_nbd .frame-1-3-l .block,.xfs_nbd .frame-4-1-l .block, .xfs_nbd .frame-1-4-l .block, .xfs_nbd .frame-1-1-1-l .block { margin-left: 0; }

.xfs_nbd .sd .block, .xfs_nbd .col-r .block, .xfs_nbd .frame-1-1-r .block, .xfs_nbd .frame-2-1-r .block, .xfs_nbd .frame-1-2-r .block, .xfs_nbd .frame-3-1-r .block, .xfs_nbd .frame-1-3-r .block,.xfs_nbd .frame-4-1-r .block, .xfs_nbd .frame-1-4-r .block, .xfs_nbd .frame-1-1-1-r .block { margin-right: 0; }

在css_diy.css 文件中修改：

.frame-1-1, .frame-1-1-1, .frame-1-2, .frame-2-1, .frame-1-3, .frame-3-1,.frame-1-4, .frame-4-1 { background-image: url({STATICURL}image/diy/vline.png); background-repeat: repeat-y; }

.frame-1-1, .frame-1-1-1 { background-position: 50% 0; }

.frame-1-1-1 { background-image: url({STATICURL}image/diy/vline2.png); }

.frame-1-2 { background-position: 33.3% 0; }

.frame-2-1 { background-position: 66.6% 0; }

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

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

.frame-1-4 { background-position: 19.9% 0; }

.frame-4-1 { background-position: 79.9% 0; }

在header_diy.htm文件中修改：

<img src="{STATICURL}image/diy/layout-1-3.png" />1:3</a></li>
<li><a href="javascript:;" id="frame_3_1"><img src="{STATICURL}image/diy/layout-3-1.png" />3:1</a></li>
<li><a href="javascript:;" id="frame_1_4"><img src="{STATICURL}image/diy/layout-1-4.png" />1:4</a></li>
<li><a href="javascript:;" id="frame_4_1"><img src="{STATICURL}image/diy/layout-4-1.png" />4:1</a></li>

3.改完以上三个文件后，制作2个模板的预览图片，分别命名为layout-1-4.png,layout-4-1.png

  将文件放到/static/image/diy/  文件夹下（其中static和template 是同级文件

  附上2个预览图片

          

4.更新下缓存，刷新下，在门户页的DIY中就能看到刚刚制作的新模板了~

可以可以，学到了这些~!~
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     
                                                     

手游公益服jjj99ssf999jjj

谢谢！收藏了。