简单修改达成自适应页面（最新更新20101101）

原来x1的时候，看过有修改的，升级到1.5后，在本本上看站点页面觉得太窄了，默认提供的宽屏只是广场可用。
参考原来的文章，再查看了css文件，就简单的修改了一下。

打开template\default\common\common.css文件，找到：

1. 
   
2. /* 通用容器，定义页面宽度 */ .wp { margin: 0 auto; width: 960px; } #wp .wp { width: auto; }
   

复制代码

修改为：

1. 
   
2. /* 通用容器，定义页面宽度 */ .wp { margin: 0 auto; width: 90%; min-width:960px } #wp .wp { width: auto; }
   

复制代码

如果设置为超过90%就与官方提供的宽屏差不多了，这个值，各位可以自己试试。

找到：

1. 
   
2.    .ct2 .mn { float: left; width: 730px; margin-bottom: 1em; }
   
3.   .ct2 .sd { float: right; width: 220px; overflow: hidden; _overflow-y: visible; }
   
4.   .appl { float: left; overflow: hidden; margin-bottom: 10px; padding: 6px 10px; width: 115px; border: 1px solid {COMMONBORDER}; {SIDEBGCODE}; }
   
5.   .ct2_a .mn { float: right; width: 810px; }
   
6.   .ct3_a .mn { float: right; width: 565px; }
   
7.   .ct3_a .sd { float: right; margin-left: 15px; width: 220px; }
   

复制代码

修改为：

1. .ct2 .mn { float: left; width: 75%; min-width: 730px; margin-bottom: 1em; }
   
2. .ct2 .sd { float: right; width: 24%; min-width: 220px; overflow: hidden; _overflow-y: visible; }
   
3. 
   
4. .appl { float: left; overflow: hidden; margin-bottom: 10px; padding: 6px 10px; width: 12%; min-width: 115px; border: 1px solid {COMMONBORDER}; {SIDEBGCODE}; }
   
5. 
   
6. .ct2_a .mn { float: right; width: 85%; min-width: 810px; }
   
7. 
   
8. .ct3_a .mn { float: right; width: 60%; min-width: 565px; }
   
9. .ct3_a .sd { float: right; margin-left: 15px; width: 23%; min-width: 220px; }
   

复制代码

保存文件，后台更新模板css缓存，自适应页面效果就出来了。
现在还有个问题，就是导航条，官方高亮导航条是特制的，自适应页面就无法实现这个效果了。

打开template\default\style下t1到t5目录下的style.css文件，
找到：

1. #nv { background-color: #BA350F; background-image: url(nv.png); }
   

复制代码

修改为：

1. #nv { background-color: #BA350F; background: url(nv.png) repeat-x 0 -33px; }
   

复制代码

保存，请注意五个目录下的文件统一修改此处，更新模板css缓存和系统缓存，最好能清空浏览器的cookie。

温馨提示，这些页面我只测试了广场、群组、家园、排行榜页面，门户我没有使用，应用我没开启，均未测试过，修改style.css文件的方法来自cr180版主，特此感谢。
这个修改方法只是简单的在默认风格上修改，没有什么很高深的技术，喜欢可以试试，不喜欢就飘过，只是提供一种修改的方式。


最新修正一下，家园查看用户资料页面会错位，需要把common.css文件里的：

1. .ct2 .sd { float: right; width: 24%; min-width: 220px; overflow: hidden; _overflow-y: visible; }

复制代码

修改为：

1. .ct2 .sd { float: right; width: 24%; min-width: 190px; overflow: hidden; _overflow-y: visible; }
   

复制代码

否则在窄屏显示器查看页面会错位。宽屏显示器无错位现象。

  支持

前排强势插入

感谢占位

回复 antdk 的帖子

这个到不是很难！ 我目前比较困惑的是, 我在Dreamweaver下如何制作一套全新的模板！

制作完后,在首页添加DIY区域. 就是搞不懂制作流程!

回复 yeecool 的帖子

自己全新制作模板的话，我就丢掉diy了。个人建议。

支持 分享

回复 antdk 的帖子

我使用include 把html切割成footer, head 三部分.
然后css调用放在index.php里面.

不过最后还不清楚怎么弄到DX里面去正常运行, 至于你说diy, 可以在需要的地方加个便于投放广告什么之类的而已.

所以我就困惑了. 我记得DW可以可以连接joomla制作模板的. 但是DX的就真搞不懂怎么做了.

看看哈。。。。