discuz模板制作教程精品
- 格式:doc
- 大小:1.02 MB
- 文档页数:17
discuz注册页面模板篇一:Discuz!论坛系统DIY模块模板使用教程Discuz!论坛系统DIY模块模板使用教程今天为大家讲解一下在使用DIY过程中的一些技巧与方法仔细阅读,受益匪浅一、如何在模块中增加“标题”及“更多”的链接如下图样式方法:通过框架或模块都可以实现上述样式,我们以框架为例,我们在DIY的时候选中要编辑的框架点击编辑如下图所示之后点击标题在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示,会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程”改成“更多”,链接以及字体、颜色都进行修改就可以了,这里的位置一定要选择“居右”完成,这样框架就有了标题及更多,模块的方法同上二、DIY的模块中如何调整链接的颜色如下图样式方法:选中要修改的模块,点击编辑,选择数据如下图所示在弹出层中选择编辑如下图所示篇二:discuz模板内容调用设置参照说明内容调用设置参照说明: 请认认真真看下面的内容门户首页内容DIY调用设置(其他页面有DIY数据的同样设置就可以了): 注意:在DiscuzX前台DIY管理的时候要先关闭伪静态否则有可能无法进行DIY;还有,DIY时请尽量选用Mozilla Firefox或谷歌浏览器,这样错位没那么严重用管理员帐号登录,在门户首页,点击网页右上角的[DIY] 按钮;点击后进入简洁模式后, 在每个模块上面,把鼠标移到要修改的内容上,右上角将出现一个[编辑] 按钮注意:蓝色的才是内容的,红色的最好不要更改,否则可能会造成错位!!!然后在弹出的菜单中,点击菜单出现的[属性] 或[数据] 或[更新] ,在这您可以更新模块,修改模块属性和数据(以调用论坛帖子模块为基础,其它模块的基本一样设置就行的了)[属性][属性] 是可以进行数据调的条件的更改和设置。
如:更改[模块分类]:在这,你可以更改调用数据的模块,如:调用论坛帖子的[帖子模块]调用门户文章的[文章模块] 调用用户日志的[日志模块] 调用群组帖子的[群组模块] ……………………………...更改[数据来源]:更改[指定主题]:更改这个选项,你可以快速选择数据的来源,如调用精华帖、热门帖等……还可以设定只显示推送的帖子。
DZ论坛DIY模块模板教程在使用DIY过程中的一些技巧与方法仔细阅读,受益匪浅一、如何在模块中增加“标题”及“更多”的链接如下图样式方法:通过框架或模块都可以实现上述样式,我们以框架为例,我们在DIY的时候选中要编辑的框架点击编辑如下图所示之后点击标题在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示,会“复制”出一份新的标题你只需修改就可以了把其中的“精彩教程” 改成“更多” ,链接以及字体、颜色都进行修改就可以了,这里的位置一定要选择“居右”完成,这样框架就有了标题及更多,模块的方法同上二、DIY的模块中如何调整链接的颜色如下图样式方法:选中要修改的模块,点击编辑,选择数据如下图所示在弹出层中选择编辑如下图所示在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作完成三、如何在现有的模块中添加新的数据选中要添加数据的模块点击编辑--数据如下图所示在弹出的层中选择任意一条数据点击编辑如下图所示点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据如下图所示点击获取会填充模块内相应的数据字段(此处的数据字段会根据模块样式的不同有所变化,请注意)完成四、DIY时如何调用外部程序的数据当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示如上图所示选择数据来源为“自定义HTML”一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了如下图所示完成五、首页多格或首页四格如何DIY出来我们以论坛首页为例(在任何页面都可以)来制作一个首页四格首先在论坛首页拖一个 1:1的框架如下图所示接下来向已拖好的1-1框架的框架里左侧的1 里面拖入一个1:1的框架如下图所示接下来向右侧的1里面也拖入一个1:1的框架如下图所示接下来我们就可以通过拖拽模块到框架中去了此时我们可以去掉框架的标题,同时为每一个模块增加一个标题如下图所示你可以通过不同的模块样式或者CSS来美化这里完成六、如何修改整个模块的链接样式比如下图方法:选中要编辑的模块,点击编辑--样式进行修改如下图所示以上修改针对整个模块完成七、如何修改两个模块或两个框架之间的距离如下图样式选择要编辑的框架或者模块,点击编辑--样式选择外边距,勾选分别设置,在右边距中写入合适的数字就可以了例如10如下图所示完成后的效果如下图样式全方位立体式讲解DIY技巧集锦第二弹一、DIY中TAB框架如果切换点击方式(鼠标点击与鼠标滑过)如下图中的效果如何实现实现方法:拖一个TAB框架到页面中,点编辑,选择标题如下图所示在弹出的窗口中选择切换类型如下图所示。
第1步:进入版块内点击右上角的DIY(如下图,注:静态化无法DIY,请取消静态化)第2步:拉好框架(先放3:1的,再将后两个框架放入其中)如下图所示(下面说的都无需再拉多个框架,这一步已把该拉的红框都拉好了):第3步:设好红框(就是指向出现红色的框架,在这我将其称为红框)的样式参数(如下图,对比看说明)图中1:边框,请将默认的【大小】改成0(因为这样不会显示边框线,不选则会显示官方默认的边框线)图中2:边框一定要为0,这样是最大化,0和不填是不一样的!图中3:边框一定要为10,这样是和下方框体的距离,若填0则会连在一起!图中4:此处请一定不要选择【无边框框架】否则你用TAB框架则在标题加链接时会成白色,留空不选即可!第4步:先DIY右边的。
请拉一个红框的框架到图中右边的框架内,然后点击样式,如图:图中1:边框线颜色为:1PX。
我用的是粉红色!根据自己的爱好选色!图中2:上为0(但官方默认的是1PX的距离,所以该处请填0,其它的请设置为1)第5步:红框的边框线,粉红的(如下图)图中1:请设为4PX(想更粗请设大点)图中2:左10PX(是与左边的框架保持10PX的距离,要不会连在一起)第6步:拉一个论坛类的帖子模块放在上一步设置好的红框内,点样式设置参数(如下图)图中1:链接字体,12PX是官方默认的,可以留空。
后面的是字体颜色!图中2:请选边框为0,也可以留空(这里和红框不一样,留空也不会有官方的默认边线)。
图中3:外边距设置和内边距有所不一样,自己理解,请看图中设置,假如你把图中右10PX 输入到下面的内边距的话,标题就偏了~最好这样搞!图中4:内边距的下2PX是为了对平左边框架,所以才设置为2,你可以根据右边的边框线对平(这里请善用QQ截图功能,最后我会教你如何用QQ截图进行DIY较正)第7步:标题,我在这用的方法是不正规设置方法,主要是考虑到美化,用的是图片(看下图)图中1:你看错了,那不是空的,是在智能ABC(我打五笔的)输入V+1这是空格白键,无字体的,但是会有字体一样,因为官方是默认无字体的话是无法设置标题的,所以用这招骗过官方!图中2:图片路径,为不平铺!0K,左边的DIY完成,先讲到这,顶的人多,再教你DIY另一边的~最后说一下我DIY用到的常用工具:1:QQ截图,我设置了快键(ALT+Q)方便截图及对齐边框,效果如下,自己理解。
目录Discuz‐x默认模板文件的目录结构 (2)一、模板公共文件夹 (2)二、广场模块模板 (3)三、群组模块模板 (5)四、家园模块模板 (6)五、用户相关模板 (9)六、门户模块模板 (9)七、搜索模块模板 (10)八、排行榜模板 (10)九、应用模块模板 (11)十、模版相关文件 (11)css命名规则、缓存、加载机制 (12)一、两个文件名的命名规则 (12)二、module.css的缓存和加载机制 (12)三、模版加载机制 (13)G变量的使用方法 (14)一、使用方法 (14)二、全局当前登录者信息篇$_G['member'] (14)三、全局后台各项设置篇$_G['setting'] (15)四、风格变量篇 (16)五、全局变量系统篇 (18)Discuz‐x默认模板文件的目录结构BY:cr180 一、模板公共文件夹template/default/common 模板公共文件夹,全局相关|‐‐block_forumtree.htm 树形论坛版块分支js文件|‐‐block_thread.htm 特殊主题的风格模块文件|‐‐block_userinfo.htm 用户资料的风格模块|‐‐common.css 全局公共css文件(所有页面加载)|‐‐css_diy.css DIY模式里整个页面的css样式表|‐‐css_sample.htm|‐‐css_space.css|‐‐editor.css 编辑器css样式文件|‐‐editor.htm 编辑器|‐‐editor_menu.htm 编辑器菜单文件|‐‐faq.htm 帮助|‐‐footer.htm 全局底部|‐‐footer_ajax.htm ajax模式是使用到的系统总底部模板|‐‐forum_calendar.css 广场社区使用到的日历日期样式|‐‐forum_moderator.css 版主管理面板样式|‐‐header.htm 全局头部|‐‐header_ajax.htm ajax模式时使用到的系统总头部文件|‐‐header_common.htm 全局头部被header.htm加载|‐‐header_diy.htm DIY模式下的头部|‐‐invite.htm 邀请朋友 相应链接|‐‐module.css 各模块css 阅读有关此文件的解释|‐‐preview.htm 预览的模版文件|‐‐pubsearchform.htm 页头搜索条加载|‐‐report.htm 举报模板文件|‐‐rss.css rss样式表|‐‐seccheck.htm 验证码验证模板文件|‐‐seditor.htm 编辑器菜单栏|‐‐sendmail.htm 发送email内容模板文件|‐‐showmessage.htm 提示信息|‐‐simplesearchform.htm 当前位置搜索框加载|‐‐stat.htm 站点统计左边栏 相应链接|‐‐userabout.htm 家园模块左边栏|‐‐widthauto.css 切换宽屏时读取的css,如果你调整了论坛的宽度,这里也要调整|‐‐wysiwyg.css二、广场模块模板template/default/forum 广场模块模板文件夹|‐‐activity_applylist.htm 活动列表模板文件|‐‐activity_export.htm 活动资料内容模板文件|‐‐ajax_albumlist.htm ajax获取相册列表模板文件|‐‐ajax_attachlist.htm ajax获取附件列表模板文件|‐‐ajax_imagelist.htm ajax获取图片列表模板文件|‐‐ajax_secondgroup.htm|‐‐announcement.htm 广场公告模板文件|‐‐attachpay.htm 附件金币积分支付模板文件|‐‐attachpay_view.htm 附件金币积分支付查看模板文件|‐‐comment.htm 评论模板文件|‐‐comment_more.htm 更多评论模板文件|‐‐debate_umpire.htm 辩论模板文件|‐‐discuz.htm 广场社区首页模板|‐‐discuzcode.htm 编辑器模板文件|‐‐editor_menu_forum.htm 广场中编辑器菜单模板文件|‐‐forumdisplay.htm 主题列表页|‐‐forumdisplay_fastpost.htm 列表页快速发帖框|‐‐forumdisplay_list.htm 主题列表页‐帖子列表区域|‐‐forumdisplay_passwd.htm 进入版块输入密码的界面|‐‐forumdisplay_subforum.htm 主题列表页子板块|‐‐index.htm 空白文件|‐‐index_navbar.htm 广场首页导航栏模板文件|‐‐modcp.htm 管理面板模板文件|‐‐modcp_announcement.htm 管理面板公告管理页面模板 |‐‐modcp_forum.htm 管理面板广场管理页面模板|‐‐modcp_forumaccess.htm 管理面板用户权限管理页面模板 |‐‐modcp_home.htm 管理面板内部留言管理页面模板|‐‐modcp_log.htm 管理面板管理日志页面模板|‐‐modcp_login.htm 管理面板登录页面|‐‐modcp_member.htm 管理面板用户管理页面模板|‐‐modcp_moderate.htm 管理面板审核页面模板|‐‐modcp_moderate_float.htm 管理面板审核页面模板|‐‐modcp_post.htm 管理面板发帖管理模板|‐‐modcp_recyclebin.htm 管理面板回收站模板|‐‐modcp_thread.htm 管理面板主题管理模板|‐‐pay.htm 支付页面模板|‐‐pay_view.htm 支付结果查看模板|‐‐post.htm 发帖页面模板|‐‐post_activity.htm 活动发布页面模板|‐‐post_debate.htm 辩论发布模板|‐‐post_forumselect.htm 版块选择模板|‐‐post_infloat.htm ajax发布主题模板|‐‐post_poll.htm 投票贴发布模板|‐‐post_reward.htm 悬赏帖发布模板|‐‐post_sortoption.htm 主题分类选择模板|‐‐post_trade.htm 交易帖发布模板|‐‐postappend.htm|‐‐rate.htm 主题评分模板|‐‐rate_view.htm 主题评分查看模板|‐‐recommend.htm 主题推荐模板|‐‐relatekw.htm|‐‐search_sortoption.htm 主题分类选项搜索模板|‐‐stat_main.htm|‐‐stat_memberlist.htm|‐‐stat_misc.htm|‐‐stat_onlinetime.htm|‐‐stat_team.htm|‐‐stat_trade.htm|‐‐topicadmin.htm 话题管理页面模板|‐‐topicadmin_action.htm 话题管理动作页面模板|‐‐topicadmin_getip.htm 话题管理页面获取IP模板|‐‐topicadmin_modlayer.htm 管理管理推送群组操作模板|‐‐trade.htm 商品交易主题模板|‐‐trade_displayorder.htm 商品排序模板|‐‐trade_info.htm 商品交易详细资料模板|‐‐trade_view.htm 商品交易浏览页面模板|‐‐upload.htm 上传模板文件|‐‐viewthread.htm 帖子阅读页面|‐‐viewthread_activity.htm 阅读页查看活动页面模板|‐‐viewthread_debate.htm 阅读页查看辩论页面模板|‐‐viewthread_fastpost.htm 阅读页快速回复模板|‐‐viewthread_from_node.htm 特殊主题回复模板|‐‐viewthread_mod.htm 主题操作记录模板|‐‐viewthread_node.htm 阅读页楼层模板文件 被viewthread.htm加载|‐‐viewthread_node_body.htm 阅读页楼层阅读区域模板文件被viewthread_node.htm加载 |‐‐viewthread_pay.htm 主题支付模板|‐‐viewthread_poll.htm 投票主题查看模板|‐‐viewthread_poll_voter.htm 投票主题参与者查看模板|‐‐viewthread_portal.htm 门户模式主题查看页模板|‐‐viewthread_printable.htm 打印主题模式模板|‐‐viewthread_reward.htm 悬赏主题查看模板|‐‐viewthread_trade.htm 查看交易主题模板|‐‐warn_view.htm 错误报告页面,无需其他报错模板即可执行三、群组模块模板template/default/group 群组模块模板文件夹 |‐‐group.htm 群组模块首页模板文件|‐‐group_attentiongroup.htm|‐‐group_create.htm 群组创建时使用到的模板 |‐‐group_index.htm 群组首页模板|‐‐group_invite.htm 邀请参与群组的模板|‐‐group_list.htm 群组列表|‐‐group_manage.htm 管理群组的模板|‐‐group_memberlist.htm 群组中参与用户的列表 |‐‐group_my.htm|‐‐group_recommend.htm|‐‐group_right.htm 群组右侧边栏|‐‐index.htm 空白文件四、家园模块模板template/default/home 家园模块模板文件夹|‐‐invite.htm 空间邀请页面|‐‐magic_call.htm 通知好友魔法道具模板|‐‐magic_doodle.htm 涂鸦魔法道具模板|‐‐magic_downdateline.htm 修改时间的魔法道具模板|‐‐magic_visit.htm 访问卡魔法道具模板|‐‐misc_ajax.htm 杂项ajax操作模板|‐‐misc_inputpwd.htm 密码输入模板|‐‐misc_login.htm 杂项登录操作模板|‐‐misc_lostpasswd.htm 忘记密码操作模板|‐‐misc_register.htm 杂项注册操作模板|‐‐misc_stat.htm 杂项统计页面模板|‐‐misc_swfupload.htm FLASH上传模板|‐‐network.css 随便看看页CSS样式文件|‐‐sendmail.htm 发系统email的模板|‐‐space_activity.htm 空间活动页面模板|‐‐space_album_list.htm 空间相册列表页面模板|‐‐space_album_pic.htm 空间相册图片模板|‐‐space_album_view.htm 空间相册浏览模板|‐‐space_blog_list.htm 空间日志列表模板|‐‐space_blog_view.htm 空间日志浏览模板|‐‐space_click.htm 表态模板|‐‐space_card.htm X1.5名片模板|‐‐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_log.htm 魔法道具使用记录模板|‐‐space_magic_mybox.htm 本人所拥有的魔法道具模板|‐‐space_magic_mybox_opreation.htm 魔法道具操作动作的模板|‐‐space_magic_shop.htm 魔法道具商城模板|‐‐space_magic_shop_opreation.htm 魔法道具操作动作的模板|‐‐space_medal.htm 空间勋章|‐‐space_menu.htm 空间菜单项模板|‐‐space_notice.htm 空间公告模板|‐‐space_pm.htm 空间短消息模板|‐‐space_poll.htm 空间投票模板|‐‐space_privacy.htm 空间隐私模板|‐‐space_profile.htm 空间用户资料页模板|‐‐space_reward.htm 空间悬赏模板|‐‐space_rss.htm 空间rss订阅模板|‐‐space_share_form.htm 空间分享来源模板|‐‐space_share_li.htm 空间分享模板|‐‐space_share_list.htm 空间分享列表模板|‐‐space_share_view.htm 空间查看模板|‐‐space_status.htm 空间状态模板|‐‐space_task.htm 任务模板|‐‐space_task_detail.htm 小任务模板|‐‐space_task_list.htm 任务列表模板|‐‐space_task_parter.htm 参与任务模板|‐‐space_thread.htm 空间的主题帖模板|‐‐space_top.htm 空间头部模板|‐‐space_trade.htm 空间商品交易主题模板|‐‐space_userabout.htm 空间用户面板模板|‐‐space_videophoto.htm 视频相册模板|‐‐space_wall.htm 个人空间留言板|‐‐spacecp_album.htm 空间管理面板相册页模板|‐‐spacecp_avatar.htm 空间管理面板修改头像页模板|‐‐spacecp_blog.htm 空间管理面板日志页模板|‐‐spacecp_class.htm 空间管理面板分类页模板|‐‐spacecp_click.htm 空间表态页模板|‐‐spacecp_comment.htm 空间管理面板评论页模板|‐‐spacecp_credit_action.htm 空间积分动作页模板|‐‐spacecp_credit_base.htm 空间基本积分页、兑换等模板|‐‐spacecp_credit_header.htm 空间管理面板积分头部模板|‐‐spacecp_credit_log.htm 空间管理面板积分操作记录模板|‐‐spacecp_credit_usergroup.htm 空间管理面板积分与组别关系模板页面 |‐‐spacecp_doing.htm 空间管理面板心情记录模板|‐‐spacecp_domain.htm 空间域名设置模板|‐‐spacecp_ec_explain.htm 我要解释页模板|‐‐spacecp_ec_list.htm 我的解释列表页模板|‐‐spacecp_favorite.htm 空间管理面板收藏页模板|‐‐spacecp_feed.htm 空间管理面板feed事件页模板|‐‐spacecp_friend.htm 空间管理面板好友页模板|‐‐spacecp_header.htm 空间管理面板头部|‐‐spacecp_index.htm 空间管理面板首页|‐‐spacecp_invite.htm 空间管理面板邀请页模板|‐‐spacecp_magic.htm 空间管理面板魔法道具页模板|‐‐spacecp_password.htm 空间管理面板修改密码页模板 |‐‐spacecp_plugin.htm 空间管理面板插件页模板|‐‐spacecp_pm.htm 空间管理面板短消息页模板|‐‐spacecp_poke.htm 空间管理面板打招呼页模板!|‐‐spacecp_privacy.htm 隐私筛选页模板|‐‐spacecp_profile.htm 空间个人资料编辑页模板|‐‐spacecp_profile_nav.htm 空间个人资料编辑页导航条 |‐‐spacecp_search.htm 空间搜索页模板|‐‐spacecp_sendmail.htm 空间邮件发送页模板|‐‐spacecp_share.htm 空间分享管理页模板|‐‐spacecp_space.htm 空间管理页模板|‐‐spacecp_upload.htm 空间上传页模板|‐‐spacecp_userapp.htm 用户应用页模板|‐‐spacecp_videophoto.htm 视频相册页模板template/default/member 用户相关模板文件夹|‐‐getpasswd.htm 找回密码模板文件|‐‐groupexpiry.htm 用户组期限模板文件|‐‐login.htm 用户登录模板文件|‐‐register.htm 用户注册模板文件六、门户模块模板template/default/portal 门户模块模板文件夹|‐‐comment.htm 评论页面模板文件|‐‐comment_li.htm 评论操作模板文件|‐‐index.htm 门户首页模板文件|‐‐list.htm 门户文章分类默认列表页面|‐‐list_category_onerank.htm 文章分类单列模板|‐‐list_category_tworanks.htm 文章分类两列模板|‐‐portal_topic_content.htm 门户专题页面模板|‐‐portalcp_article.htm 门户文章管理页面|‐‐portalcp_block.htm 门户模块页面|‐‐portalcp_category.htm 门户分类页面|‐‐portalcp_comment.htm 门户管理评论操作模板文件|‐‐portalcp_diy.htm 门户DIY模板文件|‐‐portalcp_index.htm 门户管理首页模板文件|‐‐portalcp_portalblock.htm 门户管理模块模板文件|‐‐portalcp_portalblock_data.htm 门户管理模块数据模板文件 |‐‐portalcp_topic.htm 门户管理话题模板文件|‐‐portalcp_topic_content.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 门户搜索结果列表页面|‐‐pubsearch.htm 公共搜索页面|‐‐sort_list.htm 分类信息列表页面|‐‐sortoption.htm 分类信息页面|‐‐thread_list.htm 主题列表页面|‐‐trade.htm 商品页面八、排行榜模板template/default/ranklist 排行榜模板文件包|‐‐activity.htm 活动排行榜|‐‐blog.htm 日志排行榜|‐‐forum.htm 版块排行榜|‐‐group.htm 群组排行榜|‐‐member.htm 用户排行榜|‐‐member_list.htm 用户排行 数据列表区域 被上面文件加载 |‐‐picture.htm 图片排行榜|‐‐poll.htm 投票排行榜|‐‐ranklist.htm 排行榜首页|‐‐side_left.htm 排行榜边栏|‐‐thread.htm 帖子排行榜九、应用模块模板template/default/userapp 应用模块模板文件夹|‐‐userapp_app.htm 用户应用|‐‐userapp_index.htm 应用频道首页|‐‐userapp_manage.htm 应用管理|‐‐userapp_menu_list.htm 应用菜单列表十、模版相关文件template/default/styletemplate/default/discuz_style_default.xml 风格配色备份xml数据,用于安装或恢复template/default/preview.jpg 风格图片截图,用于后台界面风格里显示css命名规则、缓存、加载机制BY:cr180 一、两个文件名的命名规则style_1_common.css|--是整站通用的全局css,所以命名为【style_1_common.css】|--前面的代号是当前使用这套风格的ID,所以style_1_common.css也就是第一套风格的共用的cssstyle_1_forum_index.css|--是【forum】广场BBS频道首页的css样式,那么forum和index分别对应这CURSCRIPT 和CURMODULE的常量值,这个在每个频|--道的入口脚本里都有定义,比如forum频道页面对应的是forum.php。
Discuz!美化模板系列教程--风格制作之二====================================================================== ============____________调用图片____________↓↑图片[images]--------[风格图片目录] ┠css_common.htm [css文件]/↑模板--[TXT导入文件]----[主要是配色方案] ┠header.htm [头部文件]\↙↓ ↘文件[templates]-----[风格模板目录]------┠discuz.htm ┠forumdisplay.htm ┠viewthread.htm↘↓ ↙┠footer.htm [底部文件]↙↓ ↘首页二级列表页帖子内容页====================================================================== ============﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎选定图片目录←----------- | 文字背景色|/↑﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊界面风格----[所用风格]----详情--文字背景配色调﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎/ \ ↑ | 风格图片|后台取选定模板目录用﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊\ ↓ ↑ ﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎模板管理----[所用风格]----详情----[风格模板文件]--------→ |风格框架|﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊====================================================================== ============安装风格:1.上传风格包中的images文件 2.上传templates中的文件 3.后台导入TXT配色文本[风格图片有了] + [风格框架有了] + [风格配色有了]显示风格:后台--界面风格--设置--OK====================================================================== ============教你做第一个风格[其实这个在官方的使用手册里就有说过]﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹍| 编写语:做一个风格.如果说代码框架都是自己来写的话工作量是很大的.很没必要.当然一般特殊的风格除外|| 其实一般的风格都脱离不了DZ的基本模式.所以我们完全可以在DZ默认风格的基础上来改|﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊第一步:准备1.复制images/default目录同时把文件夹名字改为你想要的风格的名字[比如kaibbs]2.复制templates/default目录里的[css_commmon.htm header.htm footer.htm discuz.htm][如果用得到别的可以自己加]同时把文件夹名字改为你想要的风格的名字[比如kaibbs]3.把以上二个文件目录上传到相应该目录下.就和装风格一样4.在后台导入[]5.修改设置[a.导入后.风格管理处.新加一个菜单.名字写你想要的风格名字.如:开论坛.模板目录为templates/kaibbsb.界面风格-把名字改成你想要的名字.同时在详情里设置图片目录为images/kaibbs]6.设置显示你的风格.﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹎﹍﹍| 当然现在显示的出来的是默认风格.刚刚其它就是相当于装了一个风格而已.如果以前操作你都知道为什么了.说明你已经理|| 解了DZ风格的结构做上面6步主要是拿出单一风格来给自己改.想怎么改就怎么改.就是错了也没事都不会影响到别的风格. |﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊﹉﹊第二步:改配色[以下改动均在kaibbs风格上运作]介绍[见手册]================================== 等续篇===============================================================以下是本人的一点心得:案例分析====================================================================== ===========================偷风格工具====================================================================== ===========================。
模板套系与风格区别•模板套系:统一的一类模板,集中放置并打包的系列。
•风格:应用某个模板套系,并改变其中变量设置的一个方案。
扩展模板创建创建模板套系•首先进入后台 - 界面 - 模板管理,扩展制作模板时需要创建一个专属套系用来后期修改o基于“模板套系”可以扩展针对 ./template/default/ 目录中对的模板文件o创建套系的原则是不破坏原有模板基础上进行全新的扩展模板设计实例1.在站点根目录 ./template/中创建新的目录如" ./template/mytest"2.在 mytest 目录中创建必要子目录与文件如:./template/mytest/common/./template/mytext/common/extend_common.css./template/mytext/common/extend_module.css•其中common目录为公共模板目录,其内部新建的extend_common.css、extend_module.css为扩展型CSS文件,它们可以在./template/default/common/common.css的和module.css的基础上进行CSS代码的覆盖性扩展•如果需要替换论坛首页模板,可以新建 ./template/mytext/common/forum/discuz.htm,或复制./template/default中的对应文件放在 mytext 对应目录,以在缓存生成时覆盖原有模板缓存,达到修改模板而不破坏原生模板的目的后台风格管理•进入后台 - 界面 - 风格管理o“风格管理”可以对已有风格进行风格变量的编辑,也可以基于前面创建的“模板套系”来全新开辟新的风格新建风格•后台风格管理中,可以通过新增和复制原有风格进行新建风格的操作•新建风格之后,需要编辑它,调整里面的“匹配模板”为上面创建的新套系即可风格管理编辑页面中重点风格常量介绍•匹配模板:对应的模板套系•扩展配色:此风格基础上可用于用户切换配色方案的扩展,它对应 ./template/mytest/style/ 目录中的样式文件。
近几天做了几套模板先将心的整理一下发给大家以供各位参考借鉴。
在做模板之前大家最好具备一些基本的网页制作方面的知识。
那么咱们先来看看如何制作一套简单的模板流程。
1、在Photoshop中制作风格页面并切图保存;2、制作html文档,css调整;在开始前,先了介绍一下discuz!的几个模板文件:1、header.htm--页面头部2、discus.htm--论坛首页3、index_header.htm--头部发帖按钮,和公告内容页。
4、footer.htm-- 页面底部5、viewthread.htm-- 查看帖子内容6、css_common.htm--公共样式css样式页面7、css_script.htm--其他常用css样式页面首先我们要制作的这套模板叫test,那么我就在templates目录下建立一个test目录。
在test目录下再新建一个images文件夹用于存放这套模板的图片,把切好的所有图片保存到这个文件夹中。
templates/test 文件夹用于存放这套模板的htm文件,首先我们先到default默认模板下面去复制header.htm、discuz.htm、footer.htm这三个htm文件。
然后分别打开着三个文件,可能这里你需要一些常用的htm语言常识,和一些基本的css语法。
如果你不会的话可以去查阅一些资料。
我们大多时候我们不必完全去重新做。
默认模板的head等头部信息我们还是非常有必要要保留。
将你做好的静态文件的切图我ps缩小成一个110X120大小名为preview.jpg的图片放到test目录下(这是后台安装界面显示的缩略图)。
接下来的工作要在论坛后台设置中来完成(1)进入论坛点击“系统设置——> 界面——> 模板管理”,在新增模板后填入模板名称,模板文件所在目录,板权信息然后提交即可!如(3)然后切换到“系统设置——> 界面——>风格管理”,您就可以在界面风格中看到您所定义的新的风格方案。
一、如何在模块中增加“标题”及“更多”的链接如下图样式
方法:通过框架或模块都可以实现上述样式,我们以框架为例,我们在DIY的时候选中要编辑的框架点击编辑如下图所示
之后点击标题
在弹出的层中可以添加标题及链接,位置选择居左如下图所示同时可以设置标题的颜色及大小
接下来增加“更多”的链接点击弹出层的添加新标题按扭如下图所示,会“复制”出一份新的标题你只需修改就可以了
把其中的“精彩教程” 改成“更多” ,链接以及字体、颜色都进行修改就可以了,这里的位置一定要选择“居右”
完成,这样框架就有了标题及更多,模块的方法同上二、DIY的模块中如何调整链接的颜色如下图样式
方法:
选中要修改的模块,点击编辑,选择数据如下图所示
在弹出层中选择编辑如下图所示
在弹出的层中可以对标题进行加粗、斜体、加下划线、修改颜色等操作
完成
三、如何在现有的模块中添加新的数据
选中要添加数据的模块点击编辑--数据如下图所示
在弹出的层中选择任意一条数据点击编辑如下图所示
点击编辑后在弹出的层中选择从数据源获取此处可以添写帖子ID、文章ID、日志ID、图片ID 来获取数据如下图所示
点击获取会填充模块内相应的数据字段(此处的数据字段会根据模块样式的不同有所变化,请注意)
完成
四、DIY时如何调用外部程序的数据
当我们与第三方程序整合后如何在门户、频道、论坛、或可以DIY的区域调用这些第三方程序的数据
首先我们可以在需要调用的地方拖一个展示类中的静态模块如下图所示
如上图所示选择数据来源为“自定义HTML”
一般第三方系统的数据调用都会有输出JS格式的我们把第三方程序提供的JS代码粘贴进HTML代码框就可以了
如下图所示
完成
五、首页多格或首页四格如何DIY出来
我们以论坛首页为例(在任何页面都可以)来制作一个首页四格首先在论坛首页拖一个1:1的框架如下图所示
接下来向已拖好的1-1框架的框架里左侧的1 里面拖入一个1:1的框架如下图所示
接下来向右侧的1里面也拖入一个1:1的框架如下图所示
接下来我们就可以通过拖拽模块到框架中去了
此时我们可以去掉框架的标题,同时为每一个模块增加一个标题如下图所示
你可以通过不同的模块样式或者CSS来美化这里
完成
六、如何修改整个模块的链接样式比如下图
方法:
选中要编辑的模块,点击编辑--样式进行修改如下图所示
以上修改针对整个模块
完成
七、如何修改两个模块或两个框架之间的距离如下图样式
选择要编辑的框架或者模块,点击编辑--样式选择外边距,勾选分别设置,在右边距中写入合适的数字就可以了例如10
如下图所示
完成后的效果如下图样式
完成。