点标签看更多好帖
开启左侧

[学习借鉴] 如何修改Discuz模板页面宽度?

[复制链接] 7
回复
4350
查看
打印 上一主题 下一主题
楼主
跳转到指定楼层
发表于 2016-7-5 11:45 | 只看该作者 回帖奖励 |倒序浏览 |阅读模式

马上注册,结交更多好友,享用更多功能,让你轻松玩转社区。

您需要 登录 才可以下载或查看,没有帐号?注册

x
http://bbs.bzhot.com/6494/3 l- k; [7 J4 X+ w

& U7 c( F6 |+ S3 x随着显示器变大,网页内容增多,Discuz默认的960px宽度无法适应页面布局,修改方法如下:0 I' e% B, @5 Y: n4 H" G7 j0 _& E
1、用网页编辑器打开 template/default/common/common.css 默认模板文件;9 n/ j* R% ^. O3 J9 `+ O4 H+ {
2、搜索以下代码
0 M' o# L# y  ?% N
% T# u/ W1 @$ I8 |7 }
, e* B4 K4 n* n; p, I# V% L1 [
  1. wp { margin: 0 auto; width: 960px; } #wp .wp { width: auto; }
复制代码
3 m* w; f) X, s
( v- {& h; {" d) |/ Q, @/ r
修改其中960px为我们想要的模板宽度值,建议设1000px;) a/ b; T  y* @
3、同样用网页编辑器打开widthauto.css,搜索同样的代码修改;! ]8 p7 }* e- N; }( G" M
4、管理员登陆网站后台,更新缓存,刷新页面即可生效。
* l, J0 t5 A- s( I
: {- D) H" B: M5 s4 o注:
* \. Z& ?6 f3 f" \2 Q. w其他模板,请到 template/模板名/common/ 中找到以下文件修改/ |# Y6 W/ O, [9 V
extend_common.css 是附加的全局样式表
$ {. v. m' \8 D' T, f/ O8 Y( e+ xextend_module.css 是附件的模块样式表
9 x6 Y8 f' c6 ?4 bwidthauto.css 是切换宽版时二次定义全局样式表的文件$ }! A/ w" \  C0 X* n8 b3 j
header.htm 全局页头文件
; k1 B$ e3 B$ w/ h7 Ufooter.htm 全局页尾文件
5 O* I: l2 m0 p  t4 o- N: G" o* [2 ^, R: h


转载请保留当前帖子的链接:https://www.beimeilife.com/thread-18827-1-1.html 谢谢
沙发
发表于 2016-9-15 12:10 | 只看该作者
修改个人空间模板,调整宽度$ o# }5 |0 I( a5 e! a
5 l1 x% v# k3 S0 I9 K
模板文件为:/mnt/www/ydxjyj/template/ydjy/space_home.htm
6 x; Z; @' V6 ~* ]6 R' d* Q1 v5 d8 d
: p- ~# ?3 o, i  y7 ^
调整宽度的CSS文件:/mnt/www/ydxjyj/template/ydjy/common/css_space.css+ k+ R, x1 ^8 ^6 F; C% t# [

$ `" c: S! L% T" q% l.wp { width: 960px; }
# h# y6 A2 M/ ?, V复制代码
0 o; o3 @. P7 j/ K8 c7 P3 R1 G中的960修改成1190, G, F5 d" J) w* ~$ x
#nv { position: absolute; left: 10px; height: auto; bottom: 0; background: transparent none; }
7 `  n7 B1 R0 x% l; H8 J! j复制代码
$ k' S) N2 j4 {调整菜单栏位置
板凳
发表于 2016-9-15 12:12 | 只看该作者
修改了网页宽度为1200px后个人设置里出现大面积空白处
+ I% z- b- Z: K% _  t+ G6 V
4 A+ o1 R5 F0 p* E 3 n) ?% y0 ~1 J
/ H3 r$ T/ m( x( c* P* `
修改了common.css 中的
: e5 j; D( a, G0 z+ C; I
6 `* D! {) s2 ]- X7 ~1 I( `2 P/* 通用容器,定义页面宽度 */ .wp { margin: 0 auto; width: 1200px; } #wp .wp { width: auto; }
- s9 [# m/ k/ x8 K9 ?, m
* L6 s5 ^5 ]9 @  V% u0 S5 M/* 页头 */8 F2 W2 Q& S3 T( P
        #toptb { min-width: 1200px; border-bottom: 1px solid {COMMONBORDER}; background: {COMMONBG}; line-height: 28px; }0 Q( Q5 ^7 B* e% b
1 d' i4 M9 Q" z6 u5 E) @

! T% t$ S  o: S将代码中的 width: 960px; 改为了  width: 1200px; ,就出现图中红色框架的空白处,解决方法:
/ V) j& I6 n1 d3 b

9 p5 Y! A+ x* A8 }; X+ `! R* y7 i- }) U( Z( G* d* A
* l% E  Z' G+ J1 k; ~2 `

" @& z& K8 k5 w  d9 ^3 x3 D9 y" l只改这份文件就好,其它的文件不要改,修改前先用官方源文件覆盖在修改。
/ M  L  N6 l* q0 m! j; ztemplate/default/common/common.css
9 t* L' t3 T, I9 c3 f; w查找577行6 h: v7 d$ }; s# [0 o) c, }/ X
  • .wp { margin: 0 auto; width: 960px; }
    % O( U" u: E/ @6 b

# F" N1 v2 i& O7 D[color=rgb(51, 102, 153) !important]复制代码
9 n) o# Z0 B- i
( [/ X. c# y9 n
替换为
7 J# ~* j$ l/ I2 w
  • .wp { margin: 0 auto; width: 1200px; }
    - u  o8 W$ o* @5 \" t7 a% f
8 e4 u' G) F9 A* u3 V: V% Q: m
[color=rgb(51, 102, 153) !important]复制代码

# h( V5 G) K9 m& e* R

/ K& K1 E1 S' e: r! h再查找707行; c4 z% y0 @2 D: y! G
  • .ct2_a .mn { display: inline; margin-right: 10px; padding-top: 10px; width: 800px; }
    ( H6 z8 }4 j; d

* T5 ?) Q! h3 ~, Q[color=rgb(51, 102, 153) !important]复制代码

/ X4 d( W0 y, K
1 w  V8 r7 }2 ?+ h7 |替换为+ ~# I3 B/ B) _
  • .ct2_a .mn { display: inline; margin-right: 10px; padding-top: 10px; width: 1040px; }
    " R4 q1 K7 c: L: X% K

4 v3 y* B5 `: L, J. A; `: N* D[color=rgb(51, 102, 153) !important]复制代码

7 g+ v8 H1 Q) a1 B8 Y) J- `8 z# |! Q: e4 ]$ {
地板
发表于 2016-9-15 12:23 | 只看该作者
显示器宽屏时代的到来,各主流站点均调整宽度为1190px
5#
发表于 2016-9-18 22:52 | 只看该作者
http://www.zb7.com/discuz/dx25/template/made/made_extend.htm. f) O; x( T; M- p' N5 c! T, X& ~

+ A! z' e6 {: {6 N扩展新模板
如果你想直接在默认模板的基础上修改的话那就到 网站根目录/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缓存文件中。
更多相关:
/ m$ z1 C2 x$ J1 f& i0 p& {1、http://bbs.zb7.com/thread-1050-1-1.html - ?  m+ E) p: K" {4 H, s
2、http://bbs.zb7.com/thread-5586-1-1.html/ |7 i: y# G9 u; D
3、http://bbs.zb7.com/thread-6002-1-1.html
4 p  U' c$ W  t4、http://bbs.zb7.com/thread-6026-1-1.html
  [5 [" F! x; A2 x# B  D5、http://bbs.zb7.com/thread-11332-1-1.html
  • 首先我们需要在template/文件夹下新建一个yourstyle文件夹放置模板文件,然后复制default下的discuz_style_default.xml,重命名为discuz_style_你的风格名称.xml(注意这里discuz_style_是必须保留的)。这个文件配置的即是下图中后台显示的配置区域中的变量内容。$ k3 l4 g1 j. ^8 ~0 a) U: T/ |  ~* _
    注释:这个文件是我们风格模板套系的配置文件,其中指定了你的扩展风格名称,配置风格的初始化id,风格模板所在文件夹和一些初始化参数,如:整个模板的字体大小,颜色等一些通用参数的配置。$ V5 P: x* E7 |+ q: N& E' G6 h
  • 修改文件中以下四个参数
    <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扩展图片目录。
    1 o( e" a4 y1 r8 K1 [
现在我们将扩展风格yourstyle设置为当前模板套系,由于这个目录下现在还没有文件,那么他会完全去调用默认模板template/default/文件夹下的文件,这样一个完全和默认风格相同的扩展风格就建立完了。如下图:% W9 ]. e/ o% P5 l) V0 q9 `; f
1. 在template下新建一个文件夹,放置扩展的模板套系文件。, N1 u! m. B+ c, `/ P9 s
0 o5 M$ Y3 B( j3 M: o( z! X
+ k$ M8 a# R1 N- O, y: g( v
2. 扩展文件夹下的文件目录名称和模板文件名称完全按照default默认模板命名。注意:也可以自己命名,但是要在模板文件中自己修改模板的对应文件调用,不建议初学者使用。
) w3 n4 ~1 T/ y- f5 [% A0 s6 x; T2 i1 C如上图,我现在进行最简单的修改,此扩展风格只对应了默认模板default下的common文件夹。common中只有一个header.htm文件,也就是说在应用这套模板后,由于它只对应默认模板default下面的common/header.htm, 所以应用此套模板后只能读到header.htm头部模板文件,而其他的如果没有全部自动调用template/default下的模板文件。" v- \) h# ^' d% A+ c

* q* a" n, k- A$ P3. 后台应用扩展模板:0 U5 a& V& _! j: _/ @4 ]
' o* P4 Z# ?* \8 r! k
4. 在header.htm中适当位置添加一句话,以此来测试读取当前模板的模板文件。
& n3 z2 {7 A# U0 I: |+ o6 n, A) i
5. 对应与前台显示效果:
! j' m; E; e& Z( i; T
; z+ j( W2 p7 e( r$ ^  I: L演示完成。
扩展配色
用户切换配色方案的扩展,它对应 ./template/yourstyle/style/ 目录中的样式文件。全新创建时应在./template/yourstyle/style/目录中建立如t1/style.css之后方能生效!
, L  G! ^# E0 b, ystyle.css头部的[name]红[/name], [iconbgcolor]#BA350F[/iconbgcolor]是用来配置后台中的配色方案名称和名称前对应的颜色值(采用16位制配色),扩展时需要你自己配置你所扩展的配色方案的对应名称和显示颜色。注释:此个人配色的加载是在header.htm中根据默认或者你的上一次设置按要求加载的。
个人空间风格
个人空间风格模板默认放置在./static/space/目录下扩展模式和文件结构和论坛的扩展配色基本一直。新建时在./static/space/目录中建立如t9/style.css之后方能生效!style.css头部的[name]自然[/name]是用来配置模板名称的!其他的对照默认的空间风格目录格式放置你要扩展的空间风格的文件!

( T: S# i* C" j- y
6#
发表于 2016-9-18 22:53 | 只看该作者
模板缓存模板缓存存放:所有的模板缓存均被解析成php文件存放在 ./data/template 中,以 “数字_模板标示符组合.tpl.php”形式保存。页面缓存刷新原理:当开发者编辑过模板文件之后,Discuz! 模板解析器会匹配模板htm文件与缓存php文件的最后修改时间,如过模板html文件较新或无缓存文件,则更新或生成缓存,不新,则不采取任何动作。手动删除此目录的缓存不会影响Discuz!系统的整体运行,Discuz! 模板缓存仍然会进行自动生成。

7#
发表于 2016-9-18 22:54 | 只看该作者
模板文件附录
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

7 \$ V8 g) `: j论坛模板文件夹./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
查看交易主题模板文件
5 E" J4 N' q! J
群组模板文件夹./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
群组首页模板文件
, A  A. C2 u4 U- @
空间家园模板文件夹./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
用户应用页模板文件

0 y" \, m2 o6 L2 P5 F' a会员模块模板文件夹./template/default/member/
getpasswd.htm
找回密码模板文件
groupexpiry.htm
用户组期限模板文件
login.htm
用户登录模板文件
login_simple.htm
用户登录模块文件
register.htm
用户注册模板文件

  z9 B. T7 a( k' g  w首页模板文件夹./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
查看页面
* `" R% K$ h# p1 s& T; W
首页模板文件夹./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
商品页面

2 l2 X1 P6 a9 i; q) W会员模块模板文件夹./template/default/userapp/
userapp_app.htm
用户应用
userapp_index.htm
应用频道首页
userapp_manage.htm
应用管理
userapp_menu_list.htm
应用菜单列表
更多相关: 1 A. h0 ^; O: a8 M! C3 Z, K
1、http://bbs.zb7.com/thread-1050-1-1.html & ^* m4 W' ]% O' `" ]) d& i, ~" T1 _
2、http://bbs.zb7.com/thread-5586-1-1.html2 N1 k4 ?& Y7 b8 [/ A
3、http://bbs.zb7.com/thread-6002-1-1.html
" t; `2 W2 q7 P" k4、http://bbs.zb7.com/thread-6026-1-1.html
+ s1 u; {6 Q  P2 y! q. n5、http://bbs.zb7.com/thread-11332-1-1.html
, S8 ]6 i- z9 g# k! N6 W

2 W/ ^- J1 q# P6 I+ t3 K, J# I; Z6 f
8#
发表于 2016-9-18 23:37 | 只看该作者
GBK / UTF8 互转码工具 (网页编码转换软件)


attachments/201409/06_103931_123542pfcrcfbeadicd0dk.png

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

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


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


 点击下载

使用高级回帖 (可批量传图、插入视频等)快速回复

您需要登录后才可以回帖 登录 | 注册

本版积分规则   Ctrl + Enter 快速发布  

发帖时请遵守我国法律,网站会将有关你发帖内容、时间以及发帖IP地址等记录保留,只要接到合法请求,即会将信息提供给有关政府机构。
快速回复 返回顶部 返回列表