пятница, 5 декабря 2014 г.

Выпадающая форма авторизации в меню (BS2)

Сегодня мы рассмотрим как создать выпадающую форму авторизации joomla 3 из меню, с применением Bootstrap 2.3.2.


<div class="navbar">
<div class="navbar-inner">
<ul class="nav pull-right">
<li class="dropdown">
<a class="dropdown-toggle" href="#" data-toggle="dropdown"> Вход на сайт </a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form class="form-inline" action="#" method="post">
<div class="userdata">
 <!-- Логин -->
<div class="control-group">
 <div class="controls">
<div class="input-prepend"><span class="add-on"> <span class="icon-user" title="" data-original-title="Логин"></span> </span> <input class="input-medium"  type="text" placeholder="Логин" size="18" /></div>
 </div>
</div>
 <!-- Пароль-->
<div class="control-group">
  <div class="controls">
<div class="input-prepend"><span class="add-on"> <span class="icon-lock" title="" data-original-title="Пароль"> </span> </span> <input class="input-medium" type="password" placeholder="Пароль" size="18" /></div>
  </div>
</div>
<!-- Чекбокс -->
<div class="control-group checkbox"><label class="control-label" for="modlgn-remember">Запомнить меня</label> <input class="inputbox" type="checkbox" /></div>
<!-- Кнопка входа -->
<div class="control-group">
 <div class="controls"><button class="btn btn-primary">Войти</button></div>
</div>
 <!-- Ссылки на регистрацию и напоминалки -->
<ul class="unstyled">
 <li><a href="#"> Регистрация <span class="icon-arrow-right"></span> </a></li>
 <li><a href="#"> Забыли логин?</a></li>
 <li><a href="#"> Забыли пароль?</a></li>
</ul>
</div>
</form>
</div>
</li>
</ul>
</div>
</div>

В данном примере форма авторизации находится в правой части меню, за это расположение отвечает стиль pull-right, который вы можете убрать или заменить на другой. Нам достаточно вставить и в некоторых случаях просто заменить стили в стандартной форме авторизации.

1. Переопределим стили Формы авторизации в папку html/ шаблона:

создайте в директории html  папку mod_login;
копируйте в папку mod_login файлы default.php и default_logout.php, котроые находятся в модуле авторизации по пути ваш_сайт\modules\mod_login\tmpl\
2. Расставим html код на свои места в файле default.php:

 <?php
/**
 * @package     Joomla.Site
 * @subpackage  mod_login
 *
 * @copyright   Copyright (C) 2005 - 2014 Open Source Matters, Inc. All rights reserved.
 * @license     GNU General Public License version 2 or later; see LICENSE.txt
 */

defined('_JEXEC') or die;
require_once JPATH_SITE . '/components/com_users/helpers/route.php';
JHtml::_('behavior.keepalive');
?>
<ul class="nav pull-right">
 <li class="dropdown">
   <a class="dropdown-toggle" href="#" data-toggle="dropdown"><?php echo JText::_('MOD_LOGIN'); ?><strong class="caret"></strong></a>
<div class="dropdown-menu" style="padding: 15px; padding-bottom: 0px;">
<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure')); ?>" method="post" id="login-form" class="form-inline">
<?php if ($params->get('pretext')) : ?>
<div class="pretext">
<p><?php echo $params->get('pretext'); ?></p>
</div>
<?php endif; ?>
<div class="userdata">
 <div id="form-login-username" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext')) : ?>
<div class="input-prepend">
<span class="add-on">
<i class="icon-user hasTooltip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>"></i>

</span>
<input id="modlgn-username" type="text" name="username" class="input-medium" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>" />
</div>
<?php else: ?>
<label for="modlgn-username"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?></label>
<input id="modlgn-username" type="text" name="username" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME') ?>" />
<?php endif; ?>
</div>
</div>
<div id="form-login-password" class="control-group">
<div class="controls">
<?php if (!$params->get('usetext')) : ?>
<div class="input-prepend">
<span class="add-on">
<span class="icon-lock hasTooltip" title="<?php echo JText::_('JGLOBAL_PASSWORD') ?>">
</span>
</span>
<input id="modlgn-passwd" type="password" name="password" class="input-medium" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" />
</div>
<?php else: ?>
<label for="modlgn-passwd"><?php echo JText::_('JGLOBAL_PASSWORD') ?></label>
<input id="modlgn-passwd" type="password" name="password" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_PASSWORD') ?>" />
<?php endif; ?>
</div>
</div>
<?php if (count($twofactormethods) > 1): ?>
<div id="form-login-secretkey" class="control-group">
 <div class="controls">
<?php if (!$params->get('usetext')) : ?>
<div class="input-prepend input-append">
<span class="add-on">
<span class="icon-star hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY'); ?>">
   </span>
<label for="modlgn-secretkey" class="element-invisible"><?php echo JText::_('JGLOBAL_SECRETKEY'); ?>
</label>
</span>
<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY') ?>" />
<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
<span class="icon-help"></span>
</span>
</div>
<?php else: ?>
<label for="modlgn-secretkey"><?php echo JText::_('JGLOBAL_SECRETKEY') ?></label>
<input id="modlgn-secretkey" autocomplete="off" type="text" name="secretkey" class="input-small" tabindex="0" size="18" placeholder="<?php echo JText::_('JGLOBAL_SECRETKEY') ?>" />
<span class="btn width-auto hasTooltip" title="<?php echo JText::_('JGLOBAL_SECRETKEY_HELP'); ?>">
<span class="icon-help"></span>
</span>
<?php endif; ?>
 </div>
</div>
<?php endif; ?>
<?php if (JPluginHelper::isEnabled('system', 'remember')) : ?>
<div id="form-login-remember" class="control-group checkbox">
<label for="modlgn-remember" class="control-label"><?php echo JText::_('MOD_LOGIN_REMEMBER_ME') ?></label> <input id="modlgn-remember" type="checkbox" name="remember" class="inputbox" value="yes"/>
</div>
<?php endif; ?>
<div id="form-login-submit" class="control-group">
<div class="controls">
<button type="submit" tabindex="0" name="Submit" class="btn btn-primary"><?php echo JText::_('JLOGIN') ?></button>
</div>
</div>
<?php
$usersConfig = JComponentHelper::getParams('com_users'); ?>
<ul class="unstyled">
<?php if ($usersConfig->get('allowUserRegistration')) : ?>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=registration&Itemid=' . UsersHelperRoute::getRegistrationRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_REGISTER'); ?> <span class="icon-arrow-right"></span></a>
</li>
<?php endif; ?>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=remind&Itemid=' . UsersHelperRoute::getRemindRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
</li>
<li>
<a href="/<?php echo JRoute::_('index.php?option=com_users&view=reset&Itemid=' . UsersHelperRoute::getResetRoute()); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
</li>
</ul>
<input type="hidden" name="option" value="com_users" />
<input type="hidden" name="task" value="user.login" />
<input type="hidden" name="return" value="<?php echo $return; ?>" />
<?php echo JHtml::_('form.token'); ?>
</div>
<?php if ($params->get('posttext')) : ?>
<div class="posttext">
<p><?php echo $params->get('posttext'); ?></p>
</div>
<?php endif; ?>
</form>
</div>
</li>
</ul>

Создайте модуль Авторизации (Вход на сайт), укажите позицию, как у вашего меню, в настройках "Название полей формы" укажите "Иконки".

http://joomsnipp.ru/