为了更容易的设计出第一个模板，我们可以采取一些简化措施，X3BLOG模板在设计的时候将每个模块设计为可支持圆角，边框，背景等自定义功能，便于更快的理解整个模板的设计过程，我们简化一下，仿造51上面的模板设计一个X3BLOG的模板，先不关心怎么去设计模块的特殊样式。

    首先打开ui/theme/ config.xml文件，新增一个<theme></theme>节点,如：<theme id="default" name="默认主题">
    <skin id="default" thumb="../ui/theme/default/skin/default/thumb.jpg">默认皮肤</skin>
    <skin id="robot" thumb="../ui/theme/default/skin/robot/thumb.jpg">Robot</skin>
    <skin id="orangelife" thumb="../ui/theme/default/skin/orangelife/thumb.jpg">orangelife</skin>
</theme>
<theme id="new" name="新增主题">
    <skin id="new" thumb="../ui/theme/new/skin/new/thumb.jpg">新增皮肤</skin>
</theme>
    上面粗体标注的是新增的节点，看看这个配置节点说明了什么。我们新增了一个名称为新增主题的主题模板，在skin节点中配置了一个新的皮肤命名为新增皮肤，thumb属性定义了在它的效果图路径。现在配置信息设置好了。我们还必须按照这个配置的路径建立好模板文件存放的路径。

    在ui/theme/目录下建立一个名称为new的文件夹，为什么要用这个名字呢？看上面的配置信息“<theme id="new" name="新增主题">”中的id=”new”，当然你也可以不用这个名字，但必须注意配置的名称要与实际建立的文件夹名相同，因为程序需要用这个ID来确定模板文件的路径。同样，在建立好了new文件夹后，在ui/theme/new/skin/目录下建立一个存放“新增皮肤“的文件夹new。实际的操作过程其实没有这么复杂，你可以复制一份以前的风格目录，把名称改为与配置文件相同就可以了。现在的操作我们就是这样进行的。这样，实际上我们已经通过复制建立好了一个新的模板，理论上说，我们已经建立好了一个新的模板，把配置保存一下，打开http://localhost:8001/newtj路径（注意：在你的机器上的配置路径和这个不同），进入模板选择界面，我们已经可以看到新增的皮肤了，只是这个皮肤是我们用复制的方式完成的，和以前的模板没有什么区别。

  接下来我们需要修改主题和皮肤的具体内容了。先看主题，在前面我们已经了解了主题的控制方式，他的作用其实就是用于控制用户主页面的布局，我们现在来设计一个左中右布局的主题。要设计一个新的主题，我们就需要具体的了解new/ main.xsl样式文件和style.css样式文件。对DIV加CSS布局比较熟悉的话，其实不需要说的太详细，只是我们以前的版本注释太少，可能带来了很多问题，程序看起来比较有难度，这个我们马上会出一个带有比较详细注释的源代码版本。先不管这个，为了让不是很熟悉的朋友也能了解，我们还是决定做一个比较详细的介绍。为了更清晰直观的观察布局结构，介绍一个IE的工具插件IEDevToolbar，有兴趣的朋友可以在网上搜索一下，有中文和E文两个版本。如果你已经习惯了使用它，那就更好了。这个插件可以很好的帮助你了解网页的布局结构。

  现在使用IEDevToolbar插件，进入http://localhost:8001/newtj/地址（根据你的机器配置有所不同），采用刚刚建立好的模板选中<div class=syblog_outer_frame>这句代码，对照ui\theme\new\main.xsl文件你会发现这么一句代码<!--外层框架,左边边框容器-->
<div class="syblog_outer_frame">，从这个你可以确定，这个被定义为<!--外层框架,左边边框容器-->的DIV的作用范围是什么，因为你在使用IEDevToolbar的工具的时候可以很直观的了解到，当你选种这个DIV的时候，IE里这个DIV的边框会高亮显示，不要光想了，试一试，你会惊讶的发现，其实这很容易搞明白的，接下来，我们关心的问题就是这个名称为“syblog_outer_frame”的CSS类了。打开ui\theme\new\skin\new\style.css文件，查找syblog_outer_frame，看到他定义的代码是这样的：/*主题框架*/
div.syblog_outer_frame {
background:#fff url(img/left.jpg) repeat-y left;
width:960px;
margin-top:28px;
margin-left:auto;
margin-right:auto;
text-align:left;
}
现在关心的问题就很明白了，他的作用相信不用多说了吧，如果你不熟悉CSS，那可以先不管这些，你可以就应用现有的主题来开发皮肤就是了，简单的皮肤开发会是一件很惬意的事情，不用关心程序的具体实现（对于模板开发，以后的版本就会越来越简单，我们将提供适合各个层次的朋友的开发方式），只需要改动相关的一些图片就可以满足更改皮肤的需要。顺带再说一下，朋友们可以暂时先不关心<div class=syblog_topbar>和<div class=syblog_window>这样应用这两个样式的DIV，简单说起就是，syblog_topbar是顶部的固定工具条的布局DIV。syblog_window是点击管理菜单的时候弹出的编辑窗体的布局DIV，在现在的情况下，编辑窗体是不可见的。其他的介绍就不多说了，有耐心的朋友可以采用上面的方式来观察下面其他模块的具体布局情况。先不说了，兄弟还有其他事情要做，明天出一个分析51的例子，做一个简单的仿51的模板出来。有好的建议的朋友，希望帮忙回帖告诉我们，兄弟先谢谢了！