内容发布更新时间 : 2024/12/24 2:25:06星期一 下面是文章的全部内容请认真阅读。
(图7)
呵呵,有内容出来了,可是排版上却变得乱七八糟了,这是因为还没有引入css文件。这时
将原来设计好的css文件放到你模板目录下
(templates/test),并将它重命名为“css_append.htm”(注意:改后的文件名是css_append,后缀名是htm)。接着打开header.htm文件,找到你引入css文件的语句,这会因为引入的语句不同而不同,我这里是
@importurl(css/style.css);将这个替换为: $rsshead $extrahead
{subtemplatecss_script}
这样就可以将你的css文件引入了。进入后台更新一下缓存,现在的效果图如下: (图8)
这样就整齐了许多,这时你是不是发觉少了点东西?没错,图片没有显视出来。下面我们先将背景图(也就是css文件中引入的图片)显示出来。打开css_append.htm文件,找到所
有你引入图片的地方,将路径替换为“{styleimgdiR}”。例如:这里有一句:
第 5 页 共 15 页
#footer{padding:1em0;background:url(images/footer_bg.gif)} 将它改为:
#footer{padding:1em0;background:url({styleimgdiR}/footer_bg.gif)repeat-xtop;}{styleimgdiR}实际上是discuz的一个变量,当模板被解释时,就会用一个值来替换这个变量,这个变量的值可以在后台设置。进入后台后点击“界面——>风格管理”出现下图: 篇二:discuz模板修改教程演示 discuz模板修改教程演示 discuz教程演示,discuz模板修改
近几天做了几套模板先将心的整理一下发给大家以供各位参考借鉴。
在做模板之前大家最好具备一些基本的网页制作方面的知识。那么咱们先来看看如何制作一套简单的模板流程。 1、在photoshop中制作风格页面并切图保存; 2、制作html文档,css调整;
在开始前,先了介绍一下discuz!的几个模板文件: 1、header.htm--页面头部 2、discus.htm--论坛首页
3、index_header.htm--头部发帖按钮,和公告内容页。
第 6 页 共 15 页
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)进入论坛点击“系统设置——>界面——>模板管理”,在新增模板后填入模板名称,模板文件所在目录,板权信息然后提交即可!如
第 7 页 共 15 页
(3)然后切换到“系统设置——>界面——>风格管理”,您就可以
在界面风格中看到您所定义的新的风格方案。点击安装就可以了!如下图:
(4)然后点击[编辑]后就可以进入该模板的风格配色方案的编辑页面,此根据你的界面风格配色方案设置一下你的配色方案。
具体的设置参数,主要对应的前台显示效果参照如下链接地址的标注:
http:///viewthread.phptid=1496344right:0;bottom:0;_bottom:-2px;height:26px;}
#menuli{display:inline;float:left;margin-left:5px;{menubgcode};}
#menua{float:left;padding:014px;height:25px;border:solid{menuboRdeR};border-width:1px1px0;background:transparentnone;line-height:25px;color:{menutext};text-decoration:none;overflow:hidden;}
#menua.dropmenu{padding-right:20px;background-image
第 8 页 共 15 页