Discuz!官方免费开源建站系统

 找回密码
 立即注册

QQ登录

只需一步,快速开始

搜索

模板风格制作——新手篇(完毕)

[复制链接]
拳头 发表于 2008-9-30 11:27:39 | 显示全部楼层 |阅读模式
现在发表这个,可能有些慢了,但对于喜欢制作风格却又不知从何入手的朋友,不妨看看,
本帖以文字叙述,介绍一下界面风格详情所涉及的基本配色方法,尽量详细,所以会比较罗嗦,
即在官方默认风格的界面上,怎样改变背景图片颜色等,不涉及其它文件。

以下内容后面的说明,是对界面风格详情里的内容所涉及区域的详细叙述。
(如何修改为你喜欢的颜色或图片,如何获取颜色、制作,将在2楼说明)


论坛 logo {BOARDIMG},{BOARDLOGO}:
如官方左上角的社区动力DISCUZ!默认为:logo.gif

界面图片目录 {IMGDIR}:(照填)
风格的图片文件夹
后面的default为图片文件夹名,如上面的logo要更换,
将图片上传至此文件夹内,譬如图片名称为:discuz.gif,将此名替换上面的logo.gif

文字及颜色设置

正常字体设置 {FONT}:——小号字号设置 {SMFONTSIZE}:
复制默认风格的内容对应输入。

内表格中超级链接文字颜色 {LINK}:
(登录用户名,版块名称,标题、作者,友情连接站点,在线会员,
主题列表标题,页数,作者,时间,几乎所有可以点击进入或新窗口打开的字体颜色)

高亮链接颜色 {HIGHLIGHTLINK}:
(状态模式,查看新帖,标记已读,版块今日帖数,版主名称颜色,主题列表页下方的管理操作选项)

内表头文字颜色 {HEADERTEXT}:
(区版块名称颜色,如官方的Discuz! 交流与讨论)

外表格中 (表格除外) 文字颜色 {TEXT}:
(右上角今日、昨日等,版块简介,主题帖数,时间,帖子内容页个人信息的威望、精华等,
个人签名文字颜色,几乎所有不能点击进入或新窗口打开的字体颜色)

浅色文字颜色 {LIGHTTEXT}:
(左下方页面执行时间,主题页主题总数,最后发表作者)

表格与背景颜色设置

外表格宽度 {MAINTABLEWIDTH}:
(默认为98%,这种方式将自动适应分辨率、宽屏,如设置为980PX,将固定宽度,
无论是否宽屏,界面都将受此宽度限制,适合大图LOGO)

主表格边缘空隙 {TABLESPACE}:
区版与边框线之间的间隔

主表格背景颜色 {TABLEBG}:
(版块与版块之间的横线颜色,友情连接站点、在线用户组背景色,
主题列表标题之间的横线及快速发新话题、操作管理选项、帖子内容及发新帖界面的背景色)

主表格边框宽度 {BORDERWIDTH}:
(区版外边框、友情连接、在线会员,主题列表、子版块、快速发新话题,即每一个区域外边框的厚度)

主表格外边框颜色 {BORDERCOLOR}:
(如上,每一个区域的外边框颜色,但不包括友情连接、在线会员,及快速发新话题边框)

页面背景 {BGCOLOR},{BGCODE}:
(排除掉区域内,其它所有的背景色,换成背景图片,与logo相同)

内表头背景颜色 {HEADERCOLOR},{HEADERBGCODE}:
(前面的颜色代码,为页面内表头没打开的背景颜色;
后面的图片名称,如Discuz! 交流与讨论的背景图片,蓝色背景条)

栏目背景颜色 {CATCOLOR},{CATBGCODE}:
(前面的颜色代码,首页登录、主题列表页的版块主题(即固顶帖与普通帖之间)、操作管理选项的背景色;
后面的图片名称,首页及主题列表页的版块、主题、帖数、最后发表的背景)

栏目边框色 {CATBORDER}:
(顶部菜单栏、标签、友情连接、在线会员,主题列表页的本版规则、页数、快速发表话题、发表新帖功能的边框颜色)

聚合版块背景颜色 {PORTALBOXBGCODE}:
(标签、本版规则及所有下拉菜单的背景色;
后面的图片为标签规则下拉菜单顶部,友情连接、在线会员,快速发表话题、正在浏览此版块会员的背景图)

内表格背景配色 1 {ALTBG1}:
(首页版块、尾部有无新帖,主题列表标题及有无新回复的背景颜色)

内表格背景配色 2 {ALTBG2}:
(尾部版权,主题页精华、投票等,及内容页个人信息背景色)

内表格边框色 {BGBORDER}:
(有无新帖边框色,版块、主题之间的横线,页数背景及管理选项边框色)

提示信息背景颜色 {NOTICEBG}: (忽略,可不填)

提示信息边框颜色 {NOTICEBORDER}: (忽略)

提示信息文字颜色 {NOTICETEXT}:
(发表帖子、页数数字、个人信息的用户组名称、搜索的颜色)

通用显示区域边框颜色 {COMMONBOXBORDER}:
(友情连接与详细内容、在线会员与用户组图标、下拉菜单内容之间的横线,以及表情的边框线)

通用显示区域背景颜色 {COMMONBOXBG}:
(主题页数、最近访问版块,及帖内上一主题下一主题的背景色)

版块间距 {BOXSPACE}: (照填)

输入框边框颜色 {INPUTBORDER}:
(快速回复的标题、内容框,及新帖的附件浏览边框色)

顶部菜单栏背景 {HEADERMENU},{HEADERMENUBGCODE}:
(前面的颜色代码为菜单栏下方边框色,后面的图片即短消息等的背景图)

顶部菜单栏文字颜色 {HEADERMENUTEXT}:
(即短消息等的文字颜色)

左右分栏导航栏背景色 {FRAMEBGCOLOR}:
(开启分栏后的背景图)
 楼主| 拳头 发表于 2008-9-30 11:28:00 | 显示全部楼层
如果你明白了以上的内容说明,那么制作一个简单的风格就容易了。

以创始人帐号登录论坛,进入后台,版块,界面风格,
新增:随便输入文字(将作为现在所制作的风格名称),提交。
默认风格的详情,右键,新窗口打开(方便配色方案对照进行修改),
再在原窗口点击刚才输入风格名称的详情,进入风格配色界面。

更改颜色:
下载所提供的软件,打开之后,在该画面的四个边框中任意位置,按住左键,
然后拖动鼠标至其它窗口,所掠过的界面,该软件下面的代码都将随着界面不同颜色而改变,
确定了要使用的颜色代码,在1楼帖子所说的内容框中进行更换
(譬如原页面背景为#FFF,你获取的代码为FF0000,那么就更改为#FF0000,
提交之后,刷新论坛首页就可以看到改变的效果了,其它的你就可以照样更改为自己喜欢的颜色了)

更换图片:
下载images里面的default图片文件夹至本机,然后将你做好或其它的图片以同样名称覆盖,
再将文件夹更改为其它名称,如:discuz    然后上传到论坛文件夹images里面,
然后将你所制作的风格 界面图片目录 {IMGDIR}:images/discuz(后面文件名填写你上传的图片文件名)
提交之后,一个风格就这样诞生了。

上传风格:
在界面风格,点击你所制作好的风格的导出,保存到电脑里面,
和刚才的图片文件夹一起添加至压缩文件,上传到论坛,与大家分享。

有关templates文件的说明,那得看其它的教程说明了:(详情请见固顶版规3楼连接)

[ 本帖最后由 拳头 于 2008-9-30 19:14 编辑 ]
回复

使用道具 举报

广告 发表于 2008-9-30 11:28:59 | 显示全部楼层
呵呵  终于可以做个板凳了。
回复

使用道具 举报

272394553 发表于 2008-9-30 11:33:11 | 显示全部楼层
呵呵,不错
回复

使用道具 举报

 楼主| 拳头 发表于 2008-9-30 11:34:06 | 显示全部楼层
吃完饭再继续了(::24::)
回复

使用道具 举报

stheng123 发表于 2008-9-30 13:46:09 | 显示全部楼层
支持支持。
回复

使用道具 举报

滚骨碌 发表于 2008-9-30 14:57:18 | 显示全部楼层
拳头这个帖子我表示非常地支持
因为比较通俗易懂,令我产生了想学习制作模块的冲动。
希望继续补充完整,最好弄个图文并茂。
回复

使用道具 举报

 楼主| 拳头 发表于 2008-9-30 15:03:20 | 显示全部楼层
加图片的话可能会太复杂,将尽可能的对修改所影响的地方作详细说明
回复

使用道具 举报

莫寂语 发表于 2008-9-30 15:05:26 | 显示全部楼层
记得截取哦
  占位支持
回复

使用道具 举报

sky的颜色 发表于 2008-9-30 15:09:56 | 显示全部楼层
学习下,感觉还可以
回复

使用道具 举报

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

本版积分规则

手机版|小黑屋|Discuz! 官方站 ( 皖ICP备16010102号 )star

GMT+8, 2025-6-5 11:06 , Processed in 0.050057 second(s), 18 queries , Gzip On.

Powered by Discuz! X3.4

Copyright © 2001-2023, Tencent Cloud.

快速回复 返回顶部 返回列表