如何修改Discuz模板页面宽度？

http://bbs.bzhot.com/6494/

随着显示器变大，网页内容增多，Discuz默认的960px宽度无法适应页面布局，修改方法如下：
1、用网页编辑器打开 template/default/common/common.css 默认模板文件；
2、搜索以下代码

# l& E, R6 Z: l3 J

1. wp { margin: 0 auto; width: 960px; } #wp .wp { width: auto; }

复制代码

修改其中960px为我们想要的模板宽度值，建议设1000px；
3、同样用网页编辑器打开widthauto.css，搜索同样的代码修改；
7 J. D& z8 b9 F5 |, m6 g+ D$ _. j7 {4、管理员登陆网站后台，更新缓存，刷新页面即可生效。
# C; T  D$ ?; ]4 d
注：
其他模板，请到 template/模板名/common/ 中找到以下文件修改
extend_common.css 是附加的全局样式表
extend_module.css 是附件的模块样式表
widthauto.css 是切换宽版时二次定义全局样式表的文件
# N) J5 K1 {1 ]1 Y  h$ Jheader.htm 全局页头文件
6 h% J& }# S8 ~& Zfooter.htm 全局页尾文件

# f3 c$ X, o- ~# |. `3 Q6 X* V

转载请保留当前帖子的链接：https://www.beimeilife.com/thread-18827-1-1.html 谢谢

GBK / UTF8 互转码工具 （网页编码转换软件）

因为我最近在老牛这儿看到的几个新DX模板都是GBK格式，而我的网站是UTF的，
因此找了款转码工具，经过我个人使用认为是最简易实用的一款 - ConvertZ 8.02~

借此软件将一位大神的最新的19楼模板的GBK转成UTF了，
介于人家的权益，在此只提供方法，如需模板请自行转换哈~


            a. 点击中间位置的“进阶选项”按钮，如上右图设置是GBK转码为UTF，设置完点击隐藏。
            b. 点击操作界面上面的长条框，设置你的”待转换模板“的位置。
            c. 点击操作界面中间的长条框，设置你模板转换后存放的文件夹，建议设置个空文件夹。
            d. 点击操作界面下面的”全部加入“按钮。
            e. 点击中间右面那个大大的”开始转换“，我转换19楼那个模板用了5秒钟不到，
                   是html、php、css等等网页相关文件都转码了。


 点击下载

模板文件附录

common.css	公共CSS文件
faq.htm	帮助模板文件
footer.htm	系统总底部模板
footer_ajax.htm	ajax模式是使用到的系统总底部模板，ajax模式大部分为浮动框登录、注册、发帖等。
forum_calendar.css	广场社区使用到的日历日期样式
forum_moderator.css	版主管理面板样式
header.htm	系统总头显示内容文件
header_common.htm	系统总头公共标签文件
header_ajax.htm	ajax模式时使用到的系统总头部文件
header_diy.htm	DIY面板模板文件
invite.htm	邀请好友模板文件
module.css	模块样式文件，用于模块的拆分并生成相应的CSS样式。
preview.htm	预览的模板文件
showmessage.htm	系统提示信息模板文件
userabout.htm	我的中心面板模板文件
widthauto.css	宽屏模式追加的css

' @/ Q- ?" m8 L/ V. F  |7 V) B论坛模板文件夹./template/default/froum/

activity_applylist.htm	活动列表模板文件
activity_export.htm	活动资料内容模板文件
announcement.htm	广场公告模板文件
attachpay.htm	附件金币积分支付模板文件
attachpay_view.htm	附件金币积分支付查看模板文件
ajax_attachlist.htm	ajax获取附件列表模板文件
collection_add.htm	淘帖创建淘专辑页面模板
collection_all.htm	淘帖所有专辑页面
collection_comment.htm	淘帖专辑评论列表页
collection_mycollection.htm	淘帖我所创建专辑
collection_index.htm	淘帖首页推荐专辑
collection_nav.htm	淘帖面包屑下淘帖导航部分
collection_view.htm	淘帖具体专辑页面
comment.htm	评论模板文件
comment_more.htm	更多评论模板文件
debate_umpire.htm	辩论模板文件
discuz.htm	论坛首页模板文件
forumdisplay.htm	论坛版块主题列表总模板文件
forumdisplay_list.htm	论坛版块具体主题列表模板文件
forumdisplay_passwd.htm	论坛需要密码访问的版块模板文件
forumdisplay_subforum.htm	论坛子版块列表模板文件
index_navbar.htm	邀请模板文件
modcp.htm	管理面板模板文件
pay.htm	支付页面模板文件
pay_view.htm	支付结果查看模板文件
post.htm	发帖模板总文件
post_activity.htm	活动发布页面模板文件
post_debate.htm	辩论发布模板文件
post_poll.htm	投票贴发布模板文件
post_reward.htm	悬赏帖发布模板文件
post_sortoption.htm	主题分类选择模板文件
post_trade.htm	交易帖发布模板文件
rate.htm	主题评分模板文件
rate_view.htm	主题评分查看模板文件
recommend.htm	主题推荐模板文件
trade.htm	商品交易主题模板文件
trade_displayorder.htm	商品排序模板文件
trade_info.htm	商品交易详细资料模板文件
trade_view.htm	商品交易浏览页面模板文件
viewthread.htm	看帖页面模板文件
viewthread_activity.htm	查看活动页面模板文件
viewthread_debate.htm	查看辩论页面模板文件
viewthread_fastpost.htm	快速回复模板文件
viewthread_from_node.htm	特殊主题回复模板文件
viewthread_mod.htm	主题操作记录模板文件
viewthread_node.htm	复节主体内容模板文件
viewthread_node_body.htm	主题回复节点模板文件
viewthread_pay.htm	主题支付模板文件
viewthread_poll.htm	投票主题查看模板文件
viewthread_poll_voter.htm	投票主题参与者查看模板文件
viewthread_reward.htm	悬赏主题查看模板文件
viewthread_trade.htm	查看交易主题模板文件

群组模板文件夹./template/default/group/

group.htm	浏览群组时的模板文件
group_create.htm	群组创建时使用到的模板文件
group_index.htm	浏览群组时首页内容模板文件
group_invite.htm	邀请参与群组的模板文件
group_list.htm	群组列表文件
group_manage.htm	管理群组的模板文件
group_memberlist.htm	群组中参与用户的列表文件
group_right.htm	群组右侧边栏
index.htm	群组首页模板文件

空间家园模板文件夹./template/default/home/

invite.htm	空间邀请页面
magic_call.htm	通知好友魔法道具模板文件
magic_doodle.htm	涂鸦魔法道具模板文件
network.css	随便看看页CSS样式文件
space_album_list.htm	空间相册列表页面模板文件
space_album_pic.htm	空间相册图片模板文件
space_album_view.htm	空间相册浏览模板文件
space_blog_list.htm	空间日志列表模板文件
space_blog_view.htm	空间日志浏览模板文件
space_click.htm	表态模板文件
space_comment_li.htm	评论模板文件
space_debate.htm	辩论模板文件
space_diy.htm	空间DIY模板文件
space_doing.htm	心情记录模板文件
space_doing_form.htm	心情记录发送的模板文件
space_doing_li.htm	心情记录的列表模板文件
space_favorite.htm	空间收藏模板文件
space_feed_li.htm	feed事件列表模板文件
space_footer.htm	空间底部模板文件
space_friend.htm	空间好友模板文件
space_group.htm	空间群组模板文件
space_header.htm	空间头部模板文件
space_home.htm	空间home页模板文件
space_index.css	个人空间首页CSS样式文件
space_index.htm	个人空间首页模板文件
space_list.htm	空间列表页模板文件
space_magic.htm	空间魔法道具模板文件
space_magic_mybox.htm	本人所拥有的魔法道具模板文件
space_magic_shop.htm	魔法道具商城模板文件
space_medal.htm	空间勋章模板文件
space_menu.htm	空间菜单项模板文件
space_notice.htm	空间公告模板文件
space_pm.htm	空间短消息模板文件
space_poll.htm	空间投票模板文件
space_profile.htm	空间用户资料页模板文件
space_share_form.htm	空间分享来源模板文件
space_share_li.htm	空间分享模板文件
space_share_list.htm	空间分享列表模板文件
space_share_view.htm	空间分享查看模板文件
space_thread.htm	空间的主题帖模板文件
space_top.htm	空间头部模板文件
space_trade.htm	空间商品交易主题模板文件
space_userabout.htm	空间用户面板模板文件
space_videophoto.htm	视频相册模板文件
space_wall.htm	个人空间留言板
spacecp_click.htm	空间表态页模板文件
spacecp_search.htm	空间搜索页模板文件
spacecp_share.htm	空间分享管理页模板文件
spacecp_space.htm	空间管理页模板文件
spacecp_userapp.htm	用户应用页模板文件

# p( h* i5 Y; u会员模块模板文件夹./template/default/member/

getpasswd.htm	找回密码模板文件
groupexpiry.htm	用户组期限模板文件
login.htm	用户登录模板文件
login_simple.htm	用户登录模块文件
register.htm	用户注册模板文件

首页模板文件夹./template/default/portal/

comment.htm	评论页面模板文件
comment_li.htm	评论操作模板文件
index.htm	门户首页模板文件
list.htm	门户新闻列表页面
portal_topic_content.htm	门户专题页面模板，如果添加新专题请创建portal_topic_xxx.htm的页面，即可在专题创建时自动的看到。
portalcp_article.htm	门户文章管理页面
portalcp_block.htm	门户模块页面
portalcp_category.htm	门户分类页面
portalcp_comment.htm	门户管理评论操作模板文件
portalcp_diy.htm	门户DIY模板文件
portalcp_index.htm	门户管理首页模板文件
portalcp_portalblock.htm	门户管理模块模板文件
portalcp_topic.htm	门户管理话题模板文件
topic_footer.htm	话题底部模板
topic_head.htm	话题顶部模板
view.htm	查看页面

首页模板文件夹./template/default/search/

album.htm	搜索相册结果
album_list.htm	搜索相册列表结果
blog.htm	搜索日志结果
blog_list.htm	搜索日志列表结果
footer.htm	页面底部
forum.htm	论坛搜索页
group.htm	群组搜索结果页面
group_list.htm	群组搜索结果列表页面
header.htm	页面头部
portal.htm	门户搜索结果
portal_list.htm	门户搜索结果列表页面
sortoption.htm	分类信息页面
thread_list.htm	主题列表页面
trade.htm	商品页面

  v5 W, C( `1 o  y% c  v会员模块模板文件夹./template/default/userapp/

userapp_app.htm	用户应用
userapp_index.htm	应用频道首页
userapp_manage.htm	应用管理
userapp_menu_list.htm	应用菜单列表

更多相关：
1、http://bbs.zb7.com/thread-1050-1-1.html
2、http://bbs.zb7.com/thread-5586-1-1.html
3、http://bbs.zb7.com/thread-6002-1-1.html
4、http://bbs.zb7.com/thread-6026-1-1.html
, N; \5 d) a. u) U9 J/ P5、http://bbs.zb7.com/thread-11332-1-1.html

" V* s0 |( R7 ?

模板缓存模板缓存存放：所有的模板缓存均被解析成php文件存放在 ./data/template 中，以 “数字_模板标示符组合.tpl.php”形式保存。页面缓存刷新原理：当开发者编辑过模板文件之后，Discuz! 模板解析器会匹配模板htm文件与缓存php文件的最后修改时间，如过模板html文件较新或无缓存文件，则更新或生成缓存，不新，则不采取任何动作。手动删除此目录的缓存不会影响Discuz!系统的整体运行，Discuz! 模板缓存仍然会进行自动生成。

更多相关：
1、如何搭建本地环境(php+mysql环境)
2、Discuz模板的制作方法
3、风格管理编辑页面中风格常量在模板中的注解图
4、Discuz各类幻灯片的制作方法 - 完全支持DIY
5、巧用firebug 对Discuz!模板进行样式调试修改美化

http://www.zb7.com/discuz/dx25/template/made/made_extend.htm
% W) k  @5 ~/ p1 o
7 q4 a2 z( @6 \* o扩展新模板

如果你想直接在默认模板的基础上修改的话那就到 网站根目录/template/default/ 目录下面直接修改文件就可以了，论坛所有的模板都放在这个文件夹下！

Discuz! X程序读取模板的机制是，读取当前模板套系目录下的模板文件，如yourstyle文件夹下common/header.htm文件，如果没有这个文件，则自动读取默认风格/tempalte/default目录下的common/header.htm文件。这里需要提醒一下，扩展的风格不再需要原来的css文件，只需要新建一个以extend_为前缀加源文件名的扩展css文件即可，例如：extend_common.css文件、extend_module.css这里面只需要加入你自定义的扩展css文件即可！这部分代码将在生成缓存css时，自动追加到你当前模板的common.css缓存文件中。

更多相关：
1、http://bbs.zb7.com/thread-1050-1-1.html
% u! q  [1 n% f4 \5 w( w5 f" r% _2、http://bbs.zb7.com/thread-5586-1-1.html
3 R- r! ~7 F& s( ~2 r3、http://bbs.zb7.com/thread-6002-1-1.html
4、http://bbs.zb7.com/thread-6026-1-1.html
1 Q  ?7 i7 m* ^$ [8 V$ v5、http://bbs.zb7.com/thread-11332-1-1.html

• 首先我们需要在template/文件夹下新建一个yourstyle文件夹放置模板文件，然后复制default下的discuz_style_default.xml，重命名为discuz_style_你的风格名称.xml(注意这里discuz_style_是必须保留的)。这个文件配置的即是下图中后台显示的配置区域中的变量内容。
  注释：这个文件是我们风格模板套系的配置文件，其中指定了你的扩展风格名称，配置风格的初始化id，风格模板所在文件夹和一些初始化参数，如：整个模板的字体大小，颜色等一些通用参数的配置。
  
• 修改文件中以下四个参数

  <item id="name"><![CDATA[默认风格]]></item>	指定扩展风格的名称，例如：默认风格。
  <item id="templateid"><![CDATA[1]]></item>	指定初始化templateid，这里不要和现有安装风格的id相同。
  <item id="tplname"><![CDATA[默认模板套系]]></item>	指定扩展风格套系的名称，例如：默认风格套系。
  <item id="directory"><![CDATA[./template/yourstyle]]></item>	指定扩展风格所在的文件夹，这个文件夹的名字就是你刚才在template新建的yourstyle。

  注释：有了这个文件后台就可以刷新看到一个扩展风格了。
• 另外我们复制的配置文件中需要我们特别注意的就是以下两个参数：

  <item id="imgdir"><![CDATA[]]></item>	此参数为风格基础图片存放的目录，默认使用地址 static/image/common/ 目录，一般我们只需要留空就行了
  <item id="styleimgdir"><![CDATA[template/yourstyle/images]]></item>	此参数为扩展目录地址，留空表示无扩展图片目录，如果你想新增图片的话可以在这里预先手动指定一个地址, 然后在此参数指定的目录下新建images扩展图片目录。

  
  0 t/ P4 s  V- |+ o+ C- m  a

现在我们将扩展风格yourstyle设置为当前模板套系，由于这个目录下现在还没有文件，那么他会完全去调用默认模板template/default/文件夹下的文件，这样一个完全和默认风格相同的扩展风格就建立完了。如下图：
1. 在template下新建一个文件夹，放置扩展的模板套系文件。
6 z' L( g" ~% n' v: @+ p0 e
8 N, f- ^: D8 c. U2 W
# e% M! K- Q( f  [8 P2. 扩展文件夹下的文件目录名称和模板文件名称完全按照default默认模板命名。注意：也可以自己命名，但是要在模板文件中自己修改模板的对应文件调用，不建议初学者使用。
如上图，我现在进行最简单的修改，此扩展风格只对应了默认模板default下的common文件夹。common中只有一个header.htm文件，也就是说在应用这套模板后，由于它只对应默认模板default下面的common/header.htm, 所以应用此套模板后只能读到header.htm头部模板文件，而其他的如果没有全部自动调用template/default下的模板文件。

3. 后台应用扩展模板：
( q" m. ]/ w& k3 b
4. 在header.htm中适当位置添加一句话，以此来测试读取当前模板的模板文件。
0 e: e: n8 h2 n0 p6 t( p
) y% p8 m" q8 g. z( G; w5. 对应与前台显示效果：
8 b, i- R- ?8 T
- S' E. b7 B0 v, I, h. g8 w  C演示完成。

扩展配色

用户切换配色方案的扩展，它对应 ./template/yourstyle/style/ 目录中的样式文件。全新创建时应在./template/yourstyle/style/目录中建立如t1/style.css之后方能生效!
; w2 }& `& w  t  fstyle.css头部的[name]红[/name], [iconbgcolor]#BA350F[/iconbgcolor]是用来配置后台中的配色方案名称和名称前对应的颜色值(采用16位制配色),扩展时需要你自己配置你所扩展的配色方案的对应名称和显示颜色。注释：此个人配色的加载是在header.htm中根据默认或者你的上一次设置按要求加载的。

个人空间风格

个人空间风格模板默认放置在./static/space/目录下扩展模式和文件结构和论坛的扩展配色基本一直。新建时在./static/space/目录中建立如t9/style.css之后方能生效!style.css头部的[name]自然[/name]是用来配置模板名称的！其他的对照默认的空间风格目录格式放置你要扩展的空间风格的文件！

5 v- N- n: e% a" v% r

显示器宽屏时代的到来，各主流站点均调整宽度为1190px

修改了网页宽度为1200px后个人设置里出现大面积空白处

+ u1 o4 O- Z# d3 y+ Y( f- m  o
  J  S# v6 ~7 ~$ `. {6 W
修改了common.css 中的
, U2 u* \9 d, B  ], z( F
* ~2 p- ]  r8 s/* 通用容器，定义页面宽度 */ .wp { margin: 0 auto; width: 1200px; } #wp .wp { width: auto; }

/* 页头 */
! w+ D  N  W% _4 e        #toptb { min-width: 1200px; border-bottom: 1px solid {COMMONBORDER}; background: {COMMONBG}; line-height: 28px; }
  ^0 G2 N: \4 o+ e/ h
+ W7 D! v/ T3 J
8 d% r3 D0 N3 m& S5 d# i/ U$ X将代码中的 width: 960px; 改为了  width: 1200px; ，就出现图中红色框架的空白处，解决方法：
' \8 [6 e6 E5 U% p" a5 J" B
8 g3 d8 _. Z/ A
7 [$ |& b, G3 j* X2 m3 G

$ V7 A) G2 d; B/ |' k0 y( e+ ~- i只改这份文件就好，其它的文件不要改，修改前先用官方源文件覆盖在修改。 template/default/common/common.css 查找577行 ; _+ J  r5 ?% ?  Q& V7 a .wp { margin: 0 auto; width: 960px; } [color=rgb(51, 102, 153) !important]复制代码 4 d5 m' G# r6 R 替换为 .wp { margin: 0 auto; width: 1200px; } 3 @) T5 L: K- F: i6 b8 u [color=rgb(51, 102, 153) !important]复制代码

再查找707行

• .ct2_a .mn { display: inline; margin-right: 10px; padding-top: 10px; width: 800px; }
  

  ^- R. s. a( P; W% E& n9 O9 n& r[color=rgb(51, 102, 153) !important]复制代码

; B! M$ f7 c! }( _+ ^4 k" T$ p, t替换为

• .ct2_a .mn { display: inline; margin-right: 10px; padding-top: 10px; width: 1040px; }
  

[color=rgb(51, 102, 153) !important]复制代码
3 v- V3 K" J, B' C6 a* I

修改个人空间模板，调整宽度
7 U1 T2 W; J- a* p3 T! H! P
模板文件为：/mnt/www/ydxjyj/template/ydjy/space_home.htm
7 I$ g& @7 ?4 c2 H) _

调整宽度的CSS文件：/mnt/www/ydxjyj/template/ydjy/common/css_space.css
, _9 L* a4 u% X3 d( D# R) V0 M将
" E1 W- x4 `  S; `; R.wp { width: 960px; }
复制代码
2 e1 p1 ^6 f) I8 H! [中的960修改成1190
#nv { position: absolute; left: 10px; height: auto; bottom: 0; background: transparent none; }
( \- e7 c3 S! h4 `9 E1 f复制代码
调整菜单栏位置