文章管理 - XOOPS风格修改简易教程 imag1
文章管理 :: Xoops Theme :: Theme制作

XOOPS风格修改简易教程


http://xoops.org.cn/modules/newbb/viewtopic.php?topic_id=6039&forum=16
实例部分(一) insraq于 2006.2.12/insraq.org

XOOPS版本:2.2.6中文版风格:xmt(XOOPS自带)修改使用软件:Editplus , Topstyle
目的:修改这个风格,目的是为了让大家知道怎么修改一个新风格,怎么样通过分析,了解一个新的风格。所以,每条结论的后面,我都会写上怎样通过分析确定这个结论的。

修改这个风格,主要需要修改的文件有: theme.html以 及 css/style.css。 首先分析 theme.html,用 Editplus打开文件, 找到 57-64行:
Open in new window


第 59行的代码定义了 header图片,也就是 logo。这个可以通过查看图片来确定。

地 62行的代码定义了导航栏,这个可以通过“ navigbar”这个关键词确定,通过这一行代码,我们还可以确定,修改导航栏,需要修改 “navigation/theme_usernav.html”这个文件。从 66-138行,定义的都是风格的各个区块,一般没必要修改。这个可以从风格作者的注释中确定,也可以看 “content”这个关键字确定。对 theme.html的修改大抵就这些。对 CSS的修改可以说是修改的重中之重。下面我们用 Topstyle打开 css/style.css

Open in new window


下面说一下怎么样分析出来该修改什么:方法一:根据常识。例如,第 2行的“ body”,一看就可以确定是控制主要文字的。第 16行的“td#leftcolumn div.blockTitle”也可

以确定是控制左边区块标题的。

方法二:根据 theme.html。例如,如果你确定不了“#header-l”和“#header-r”的具体作用,可以看看 theme.html的第 57行的“<div id="header-l"><div id="header-r">”代码,很容易知道,它就是控制 header样式的,也就是实现 header顶端的那两个“圆角”。方法三:根据样式。例如,对于 80行的“div.errorMsg”假如你确定不了,可以看看 Topstyle的输出样式(如下图),

[img] http://xoops.org.cn/uploads/article/image/20080630072505.jpg[/img]


很容易辨别,它就是那几个信息提示。方法四:试还有其他的不能辨别的,可以通过尝试一下,在 XOOPS 看看效果来辨别。通过以上四个方法,再加上一些美工基础,修改风格应该不成问题。关于 style.css文件的详细内容,可以参见:《 XOOPS风格文件 style.css不完全解释》:

http://xoops.org.cn/modules/newbb/vie ... php?topic_id=3750&forum=4
<< D.J.的 framework在开发中的应用(关于art类) 为图片浏览增加了遮罩层的应用(lightbox) >>

跟踪网址
  • 文章地址: http://xoops.org.cn/modules/article/view.article.php/c12/81
  • 跟踪地址: http://xoops.org.cn/modules/article/trackback.php/81
API: 工具箱 短消息 Email PDF 书签 打印 | RSS | RDF | ATOM
Copyright© ezsky & XOOPS CHINA
网友个人意见,不代表本站立场。对于发言内容,由发表者自负责任。
发表者 树状展开