登录 注册

登录

写本文的冲动源于我曾经在QQ群里看到有人焦急询问“怎样才能让登录框显示为横的一行”。我自己当时也是不知道怎么做,只觉得“哦,还有这种需求啊”。后来,在Joomla! 官方扩展库中找到了一个名叫“Thin Login”的模块,我非常高兴有人实现了这种效果。再后来,由于要实现带有图片的登录模块,不得已对其源文件进行了研究,这才发现原来修改一下登录模块的外观并不费劲。

当然,这个话题对于高手来说可能不足挂齿。考虑到还有一些新手需要了解相关的修改方法,我还是决定简单介绍一下。

想要漂亮的登录框?

 

注:本文所谈论的登录模块修改指 Joomla! 1.0.13 版本的登录模块。

实际上登录模块在前台显示只占很小一块地方。它的所有外观布局都包含在 /modules/mod_login.php 文件中。因此,我们调整登录模块的所有操作实际上是对此文件的修改。

打开  /modules/mod_login.php ,可以看到,从第 80 行以 <table> 标记开始就是登录模块的前台布局了。

mod_login.php 片断
mod_login.php 片断

我们看懂这些代码,就可以自己来动手修改(Hacking)了。

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

例如,下面这段代码代表的就是登录模块上“用户名:”这个字串:

 

   <label for="mod_login_username">
    <?php echo _USERNAME; ?>
   </label>

如果将这一段代码删除或者注释掉([[comment out]]),则前台就不会显示“用户名:”这个字串。

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

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

 

代码

前台内容

 <input name="username" id="mod_login_username" type="text" class="inputbox" alt="username" size="10" />

用户名输入框

   <label for="mod_login_password">
    <?php echo _PASSWORD; ?>
   </label>

密码:

<input type="password" id="mod_login_password" name="passwd" class="inputbox" size="10" alt="password" />

密码输入框

<input type="checkbox" name="remember" id="mod_login_remember" class="inputbox" value="yes" alt="Remember Me" />

“记住我”前面的钩选框

<label for="mod_login_remember">
    <?php echo _REMEMBER_ME; ?>
   </label>

记住我

<input type="submit" name="Submit" class="button" value="<?php echo _BUTTON_LOGIN; ?>" />

“登录”按钮

<a href="<?php echo sefRelToAbs( 'index.php?option=com_registration&amp;task=lostPassword' ); ?>">
    <?php echo _LOST_PASSWORD; ?></a>

忘记密码

<?php echo _NO_ACCOUNT; ?>

没有账号?

<a href="<?php echo sefRelToAbs( 'index.php?option=com_registration&amp;task=register' ); ?>">
     <?php echo _CREATE_ACCOUNT; ?></a>

马上注册

 

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

例如,本站的前台登录框就是删除了第86 行和第92行的<br />换行标记,因此看起来更符合中国网民习惯。

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

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

首先是“注册”按钮:

将 <?php echo _CREATE_ACCOUNT; ?> 这段代码替换为

 

<?php echo '<img src="'.$mosConfig_live_site. '/templates/' .$GLOBALS['cur_template']. '/images/register.png" alt="Join Us" />'; ?>

 这段代码即可。 如果你的图片名称不是 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; ?>" /> 这段代码修改为:

 

<?php echo '<input type="image" src="'.$mosConfig_live_site.'/templates/'.$GLOBALS['cur_template'].'/images/login.png" name="Submit" class="button" height="" width="" border="0" />'; ?>

 即可。如果图片名称和位置与本例不同,可根据前面的变通方法修改。

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

 

{quickdown:619}

  1. 评论 (0)

  2. Add Yours

评论 (0)

这里还没有人发表评论

免费下载最新Joomla!核心中文版

扫描此二维码,立即开始下载 Joomla 3 核心中文版

付费下载汉化版扩展

付费后即可下载独家海量

Joomla! CMS 扩展汉化版

了解付费会员制度

点击这里给我发消息

了解 joomlagate.com 网站的付费会员制度