编辑“Joomla/Joomla登录模块的DIY改造”

{{Joomla top}}
本条目主要介绍[[Joomla]]登录模块的一些个性化改造的简单方法，注意，本文所谈论的登录模块修改指 Joomla! 1.0.13 版本的登录模块。

[[Image:Joomla login form.png]]

==具体步骤==
实际上登录模块在前台显示只占很小一块地方。它的所有外观布局都包含在 /modules/mod_login.php 文件中。因此，我们调整登录模块的所有操作实际上是对此文件的修改。打开  /modules/mod_login.php ，可以看到，从第 80 行以 <nowiki><table></nowiki> 标记开始就是登录模块的前台布局了。

[[Image:Joomla login form 1.png]]

我们看懂这些[[代码]]，就可以自己来动手修改（Hacking）了。

首先，<table> 标记提示这是通过“表格”来控制的布局；<tr> 表示表格中换行；<td>表示单元格，包含在同一个 <tr></tr> 标记内的<td>标记表示表格中在同一行显示的并列单元格；<br /> 标记表示换行；<label> 标记表示此处将显示文字，而这个文字的定义取自网站当前使用的语言文件；<?php echo_ 开头的代码表示这是提取语言文件中字串；<input> 标记提示这里是输入框或者按钮，其类型根据该元素的 type 属性来判断；<a> 标记代表一个超级链接。如果懂得 [[HTML]] 语言，那么这些一眼就能看懂。

例如，下面这段代码代表的就是登录模块上“用户名：”这个字串：
<pre><label for="mod_login_username">
    <?php echo _USERNAME; ?>
   </label></pre>
如果将这一段代码删除或者注释掉（[[comment out]]），则前台就不会显示“用户名：”这个字串。

同理，如果将这段代码后面的 <br /> 标记删除或者屏蔽，那么前台的用户名输入框就会直接跟在“用户名：”后面而不是显示在下一行。

假如你对照前台猜测一下，很快就知道这些代码所表示的内容：

[[Image:Joomla login form 2.jpg]]

就这么简单。如果你想改变布局，可以对表格中的换行标记（<br /> 及<tr></tr>）作以修改，就能实现“用户名输入框与用户名三个字在同一行”或者“所有项目都在同一行显示”的效果。

或许，有些用户提出更进一步的需求：能否将“注册”及“登录”按钮显示为图片？当然可以。

请制作好分别用于“注册”和“登录”的按钮图片，例如名称为 register.png 和 login.png，放置于网站当前模板的 images 目录下。

==“注册”按钮的修改==
将 <?php echo _CREATE_ACCOUNT; ?> 这段代码替换为：
<pre>
<?php echo '<img src="'.$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/register.png" alt="Join Us" />'; ?>
</pre>
这段代码即可。 如果你的图片名称不是 register.png，位置也不是当前模板的 images 目录，那么请根据实际情况修改上述代码。

例如，你可能使用了名为 regnew.jpg 图片，并放置在网站的 /images/button/ 目录下，那么上述代码就必须变为：
 <?php echo '<img src="'.$mosConfig_live_site. '/images/button/regnew.jpg" alt="Join Us" />'; ?>

==修改“登录”按钮==
原本的“登录”按钮就是一个 <input> 元素，因此我们必须从这里入手。首先将其 type 从 submit 修改为 image，然后插入图片链接即可。即：

将 <input type="submit" name="Submit" class="button" value="<?php echo _BUTTON_LOGIN; ?>" /> 这段代码修改为：
<pre><?php echo '<input type="image" src="'.$mosConfig_live_site.'/templates/'.$GLOBALS['cur_template'].'/images/login.png" name="Submit" 
class="button" height="" width="" border="0" />'; ?>
</pre>
如果图片名称和位置与本例不同，可根据前面的变通方法修改。

如果你还需要给登录模块增加特定的背景图片，如本文一开始展示的那种圆角图片，那么就需要修改 mod_login.php 文件中有关 <table> 或者 <td> 标记，给其增加背景图片属性。如果修改不够方便，可以将 <table> 用 <div> 重新编写，用不同 ID 来区分多个 <div>，然后在模板文件的 css/template_css.css 文件中指定每一个<div> 的背景图片。

==参考来源==
http://www.joomlagate.com/article/joomla10-tutorial/diy-joomla-login-form-for-vertical-or-horizontal-module-layout/

{{Joomla 1.0}}

[[category:Joomla|J]]