Discuz!X1菜鸟贴，2步定制自己的模板方案，高手慎入！

一．安装DX1

带过…

二．开始DIY

思路：DX1默认的风格比较朴素大方适合于大多类型的网站，我们仅仅需要将页头的各个频道颜色统一起来就差不多了。接下来就教大家无损修改页头配色方案。

学学诸葛亮，借用群组频道的蓝绿色为主色调。找到/template/default/common目录下的common.css文件，打开后找到：

/* 每个功能频道的页头色调 */

#nv_portal#mu { background-color: #C00; background-position: 0 -99px; }

#nv_portal#mn_portal, #nv_portal .bn h2, #nv_portal .bn h2 a, #nv_portal .title,#nv_portal .title a { color: #C00; }

#nv_portal#mu a { background-position: 100% -132px; }

#nv_portal#mu a:hover { background-position: 50% -165px; }

#nv_forum#mu { background-color: #005DC3; background-position: 0 0; }

#nv_forum#mn_forum, #nv_forum .bn h2, #nv_forum .bn h2 a, #nv_forum .title, #nv_forum.title a { color: #005DC3; }

#nv_forum#mu a { background-position: 100% -33px; }

#nv_forum#mu a:hover { background-position: 50% -66px; }

#nv_group#mu { background-color: #A03BBB; background-position: 0 -198px; }

#nv_group#mn_group, #nv_group .bn h2, #nv_group .bn h2 a, #nv_group .title, #nv_group.title a { color: #088; }

#nv_group#mu a { background-position: 100% -231px; }

#nv_group#mu a:hover { background-position: 50% -264px; }

#nv_home#mu { background-color: #F90; background-position: 0 -297px; }

#nv_home#mn_home, #nv_home .bn h2, #nv_home .bn h2 a, #nv_home .title, #nv_home .titlea { color: #F60; }

#nv_home#mu a { background-position: 100% -330px; }

#nv_home#mu a:hover { background-position: 50% -363px; }

#nv_userapp#mu { background-color: #008A89; background-position: 0 -396px; }

#nv_userapp#mn_userapp { color: #609; }

#nv_userapp#mu a { background-position: 100% -429px; }

#nv_userapp#mu a:hover { background-position: 50% -462px; }

      

刚才说了要把颜色统一成蓝绿色，所以我们把门户portal、论坛forum、家园home的文字、背景色、背景图片CSS样式全部改成和群组group一样的设置就ok了。改成：

/* 每个功能频道的页头色调 */

#nv_portal#mu { background-color: #088; background-position: 0 -198px; }

#nv_portal#mn_portal, #nv_portal .bn h2, #nv_portal .bn h2 a, #nv_portal .title,#nv_portal .title a { color: #088; }

#nv_portal#mu a { background-position: 100% -231px; }

#nv_portal#mu a:hover { background-position: 50% -264px; }

#nv_forum#mu { background-color: #088; background-position: 0 -198px; }

#nv_forum#mn_forum, #nv_forum .bn h2, #nv_forum .bn h2 a, #nv_forum .title, #nv_forum.title a { color: #088; }

#nv_forum#mu a { background-position: 100% -231px; }

#nv_forum#mu a:hover { background-position: 50% -264px; }

#nv_group#mu { background-color: #088; background-position: 0 -198px; }

#nv_group#mn_group, #nv_group .bn h2, #nv_group .bn h2 a, #nv_group .title, #nv_group.title a { color: #088; }

#nv_group#mu a { background-position: 100% -231px; }

#nv_group#mu a:hover { background-position: 50% -264px; }

#nv_home#mu { background-color: #088; background-position: 0 -198px; }

#nv_home#mn_home, #nv_home .bn h2, #nv_home .bn h2 a, #nv_home .title, #nv_home .titlea { color: #088; }

#nv_home#mu a { background-position: 100% -231px; }

#nv_home#mu a:hover { background-position: 50% -264px; }

#nv_userapp#mu { background-color: #008A89; background-position: 0 -198px; }

#nv_userapp#mn_userapp { color: #088; }

#nv_userapp#mu a { background-position: 100% -231px; }

#nv_userapp#mu a:hover { background-position: 50% -264px; }

最后:

在/static/image/common目录下找到: hd_shadow.png这是二级导航栏广告背景图片，默认为灰色，我们用PS将它改成#088色渐变：

用PS打开此图片，放大，改为RGB模式

               

用渐变工具填充成如下效果：

好了，把改好的common.css和hd_shadow.png上传到服务器看看效果吧！

另，论坛的版块背景图片PS同上，到此全部完成，超级简单吧？！

演示地址:www.poctory.com

图片有几张看不到哦。。修改下吧。。我想看看。。。

对不起，刚刚帖子编辑错了

看不到图~

写的好呀、

谢谢楼上，现在能看到图片了

支持。。。。。

当然，你要修改成其他颜色，就按照上面的方法修改CSS和背景图片就可以了，不需要弄的那么复杂就可以达到理想的效果，当然配合首页代码块调用来排版就更完美了，完全可以做出一个你需要的任何效果，由于本人较懒，这里就不发布教程了大家摸索吧。提醒大家，网站越简洁越好，千万不要太花了！

谢谢楼上，现在能看到图片了
点评wen185cm  发表于 昨天 20:50

还是X哦
xiaowu0105 发表于 2010-5-25 20:49

就此两部就可以让网站主题色统一起来，而且按这思路你就会知道如何DIY自己的主题模板了，简单适用的才是最好的方法哦