用户名 密码 记住我 还未注册?

文章管理 - 创建一个xoop布景『译Theme KickStart Guide』

文章管理 :: Xoops Theme

创建一个xoop布景『译Theme KickStart Guide』


http://xoops.org.cn/modules/newbb/viewtopic.php?topic_id=2592&forum=16
教程原作者:Theme KickStart Guide(Macti翻译)
themes
这是一篇如何创建一个你自己的 布景 的文章。读完本文后你将学会如何建立自己的 布景。

*编辑“default”布景。(就是默认的那个)
第一步
拷贝默认的布景文件夹到themes\default目录下重命名文件夹名称(如“cool”)。现在你拥有了一个和默认布景相同的名为cool的文件夹。
在此文件夹下打开文件theme.html找到如下字符串(用Ctrl+f了,呵呵)

<{include file="default/theme_blockleft.html"}>

请修改如下:

<{include file="cool/theme_blockleft.html"}>

这样你能够看见你的修改结果在cool布景中。
同时此文件中还包含了一些其他的此类链接,修改方法如上。(不要怕麻烦,哦!)


第二步

现在,你必须做的是克隆你的“默认”布景了,因为默认布景是不能够被修改的。管理区 > 系统管理 > 模板风格管理,在右侧有一个“复制”按钮。你可以给新的布景取一个于你文件夹相同的名字,如“cool”。
请非常小心你此时的操作。错误的的编辑和修改将给你带来不可挽回的后果。(要胆大心细,脸皮厚)


第三步
在管理区> 系统管理 > 系统设置 > 一般设置里(一般是管理区里的第一个图标第6个设置项)在“默认模板风格”里选择“cool”作为你的默认模板风格。“从/themes/yourtheme /templates目录更新模板.html文件?若打开此功能,模块的模板.html文件将自动从更新/themes/yourtheme /templates目录更新。网站正式运行后,请关闭该功能。”在这个选项中选“是”,因为这是你唯一能够即时更新修改的方法了,为了您能够即使看到你所作的修改。
这非常有用一定要记住了,不然你是看不到你随时修改的结果的。等到你完成了所有修改后,不要忘记把这个选项改成“否”!
现在你已经完成了安装“cool”布景的工作,现在的布景不再是“default”而是“cool”,你可以按照你的需要编辑它了。如果你在编辑过程中有任何问题,都可以回复到默认布景的。(大胆干吧,有后备保障了)


第四步
这是一个编辑的过程。先简短的说明一下文件结构:
heme.html - 控制这主要版面,这个文件是最重要的。(所有的theme中都有)
theme_blockleft.html - 控制着左侧版面的显示
theme_blockright.html - 控制右侧版面的显示
theme_blockcenter_c.html - 控制正中版面的显示
theme_blockcenter_l.html - 控制正中偏左版面的显示
theme_blockcenter_r.html - 控制正中偏右版面的显示(如果你设置过“区块显示安排”你应该能够理解这几种版面的意思)
style.css - 布景的样式表单(就是css样式了)
styleMAC.css - 对于苹果机的样式设置。
styleNN.css - 对于Netscape浏览器的样式设置(一些两个文件对于你的布景的通用性是比较重要的,如果你的用户群都是ie的,不写也没关系)

有了这些文件你就可以定义你的网站的外观了,(呵呵,可以充分发挥你的想象力了)。模块的所有结构块显示都可以通过模板被单独控制。




*设计一个完整的新布景


普通的网站设计这通常是通过可视化的设计程序来完成网站设计的。(但是,我没用过,我一直用VI)在此以后,他可以完成一个HTML站点的创建。此时最重要的是要记住规划出XOOP的3个区域。()

注:如果你不能象我一样使用记事本等文本编辑器来书写网页,那么当你使用FrontPage等可以化编辑工具设计网页时,它们将产生大量垃圾代码,在网页投入使用前必须经过优化。
一些缩写的含有:
lc = 左侧区域
cc = 中间区域
rc = 右侧区域



在你完成了你三个区域设计后你还必须拷贝default/theme.html的头文件,放到你的html文件中。(很重要)
给个例子:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd" >
<
html xmlns="http://www.w3.org/1999/xhtml" xml:lang="<{$xoops_langcode}>" lang="<{$xoops_langcode}>">
<
head>
<
meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<
meta http-equiv="content-language" content="<{$xoops_langcode}>" />
<
meta name="robots" content="<{$xoops_meta_robots}>" />
<
meta name="keywords" content="<{$xoops_meta_keywords}>" />
<
meta name="description" content="<{$xoops_meta_description}>" />
<
meta name="rating" content="<{$xoops_meta_rating}>" />
<
meta name="author" content="<{$xoops_meta_author}>" />
<
meta name="copyright" content="<{$xoops_meta_copyright}>" />
<
meta name="generator" content="XOOPS" />
<
title><{$xoops_sitename}>-<{$xoops_pagetitle}></title>
<
link href="<{$xoops_url}>/favicon.ico" rel="SHORTCUT ICON" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_url}>/xoops.css" />
<
link rel="stylesheet" type="text/css" media="screen" href="<{$xoops_themecss}>" />
<
script type="text/javascript">
<!--
<{
$xoops_js}>
//-->
</script>

<{$xoops_module_header}>

</head>

(一大串,有些我页不明白是说明意思,反正放进去就没错了)

把一下代码放到你左侧的区域模块中。

<!-- Start left blocks loop -->
<{foreach 
item=block from=$xoops_lblocks}>
<{include 
file="default/theme_blockleft.html"}>
<{/foreach}>
<!-- 
End left blocks loop -->

请把这以上一段代码放到

<td></td>
标记之间,并给不标记id="leftcolumn"象默认模板那样。这是必须的对于css定义来说。


这些代码是放到中间区域模块中的。

<!-- Display center blocks if any -->
<{if 
$xoops_showcblock == 1}>

<
table cellspacing="0">
<
tr>
<
td id="centerCcolumn" colspan="2">

<!-- 
Start center-center blocks loop -->
<{foreach 
item=block from=$xoops_ccblocks}>
<{include 
file="default/theme_blockcenter_c.html"}>
<{/foreach}>
<!-- 
End center-center blocks loop -->

</
td>
</
tr>
<
tr>
<
td id="centerLcolumn">

<!-- 
Start center-left blocks loop -->
<{foreach 
item=block from=$xoops_clblocks}>
<{include 
file="default/theme_blockcenter_l.html"}>
<{/foreach}>
<!-- 
End center-left blocks loop -->

</
td><td id="centerRcolumn">

<!-- 
Start center-right blocks loop -->
<{foreach 
item=block from=$xoops_crblocks}>
<{include 
file="default/theme_blockcenter_r.html"}>
<{/foreach}>
<!-- 
End center-right blocks loop -->

</
td>
</
tr>
</
table>

<{/if}>
<!-- 
End display center blocks -->


<
div id="content">
<{
$xoops_contents}>
</
div>


<td></td>
标记中放入以上代码,并打上标记id="centercolumn"(我关于标记的表示方法,请参考一下默认模板,应该不难懂的,不行的化也可以给我发邮箱咨询。)


<!-- Start right blocks loop -->
<{foreach 
item=block from=$xoops_rblocks}>
<{include 
file="default/theme_blockright.html"}>
<{/foreach}>
<!-- 
End right blocks loop -->

在左侧的

<td></td>
之间放入以上代码并给予标记id="rightcolumn"。在完成此操作后,你必须在 theme.html中给出你的正确的图片文件路径。如果你的所有图片路径都在你定义(在xoop中设定的图片路径)的图片路径下,<img>就应该这样写:


<img src="<{$xoops_imageurl}>logo.gif">


否则,图片将不能够被正确的解析,从而不能够显示正确显示。

记住这只是最基本的应用说明。你也可以随随心所欲移动你的区域,制作出你自己的theme。


——————————————————————————————————————————————————
后记:
看到了这篇文章感觉很基础也是大家所需要的。DJ老大没时间翻译,所有我就显丑翻译了一下,时间仓促,错误在所难免,有不对的地方,请大家给予批评指正。
也希望在技术上于大家共同交流,一起进步。
不过今天也有点遗憾,为了翻译这篇文章,我没去上课,结果老师点……名……了,呜呜。看来这回完了,明天补请假条也没戏了!我不想重修呀!
说句老实话,我真的很喜欢XOOP无论在设计思路和结构设计上都有着无比的创新。还有一群像DJ XOOP CHINA这样的老大级人物在支持这我们这些初学者,我真的感到
很荣幸。我也将为XOOP做出自己一份力量。


如果有疑问欢迎于我探讨!
《XOOPS Theme设计宝典》 >>
分类
Theme制作

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