Login with picture

: mod_login

Screenshot

Joomla override login with picture

Markup

<?php
	/**
		* @package     Joomla.Site
		* @subpackage  mod_login
		* @Author	   web-eau.net
		* @copyright   Copyright (C) 2005 - 2019 Open Source Matters, Inc. All rights reserved.
		* @license     GNU General Public License version 2 or later; see LICENSE.txt
	*/
	
	defined('_JEXEC') or die;
	
	JLoader::register('UsersHelperRoute', JPATH_SITE . '/components/com_users/helpers/route.php');	
	JHtml::_('behavior.keepalive');
	JHtml::_('bootstrap.tooltip');
	
?>
<div class="register-photo">
	
	<div class="form-container">
		
		<div class="image-holder"></div>
		
		<form action="<?php echo JRoute::_('index.php', true, $params->get('usesecure', 0)); ?>" 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', 0)) : ?>
						<div class="input-prepend">
							<span class="add-on">
								<span class="icon-user hasTooltip" title="<?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?>"></span>
								<label for="modlgn-username" class="element-invisible"><?php echo JText::_('MOD_LOGIN_VALUE_USERNAME'); ?></label>
							</span>
							<input id="modlgn-username" type="text" name="username" class="input-small" 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', 0)) : ?>
						<div class="input-prepend">
							<span class="add-on">
								<span class="icon-lock hasTooltip" title="<?php echo JText::_('JGLOBAL_PASSWORD'); ?>">
								</span>
								<label for="modlgn-passwd" class="element-invisible"><?php echo JText::_('JGLOBAL_PASSWORD'); ?>
								</label>
							</span>
							<input id="modlgn-passwd" type="password" name="password" class="input-small" 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', 0)) : ?>
						<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 btn-block login-button"><?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'); ?>">
						<?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'); ?>">
						<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
					</li>
					<li>
						<a href="/<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
						<?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>
</div>

CSS

.register-photo {
  background:#f1f7fc;
  padding:80px 0;
}
.register-photo .image-holder {
  display:table-cell;
  width:auto;
  background:url(../../../images/overrides/meeting.jpg);
  background-size:cover;
}
.register-photo .form-container {
  display:table;
  max-width:900px;
  width:90%;
  margin:0 auto;
  box-shadow:1px 1px 5px rgba(0,0,0,0.1);
}
.register-photo form {
  display:table-cell;
  width:400px;
  background-color:#ffffff;
  padding:40px 60px;
  color:#505e6c;
}
@media (max-width:991px) {
  .register-photo form {
    padding:40px;
  }
}
.register-photo form h2 {
  font-size:24px;
  line-height:1.5;
  margin-bottom:30px;
}
.register-photo form .form-control {
  background:#f7f9fc;
  border:none;
  border-bottom:1px solid #dfe7f1;
  border-radius:0;
  box-shadow:none;
  outline:none;
  color:inherit;
  text-indent:6px;
  height:40px;
}
.register-photo form .form-check {
  font-size:13px;
  line-height:20px;
}
.register-photo form .btn-primary {
  background:#f4476b;
  border:none;
  border-radius:4px;
  padding:11px;
  box-shadow:none;
  margin-top:35px;
  text-shadow:none;
  outline:none !important;
}
.register-photo form .btn-primary:hover, .register-photo form .btn-primary:active {
  background:#eb3b60;
}
.register-photo form .btn-primary:active {
  transform:translateY(1px);
}
.register-photo form .already {
  display:block;
  text-align:center;
  font-size:12px;
  color:#6f7a85;
  opacity:0.9;
  text-decoration:none;
}
Daniel Dubois

Daniel Dubois

Passionné par le Web depuis 2007, Daniel défend la veuve et l'orphelin du web en créant des sites respectueux du W3C. Fort d'une expérience de plusieurs années, il partage ses connaissances dans un état d'esprit open source.
Très impliqué dans la communauté Joomla depuis 2014, il est actif au sein de plusieurs projets, conférencier et fondateur du JUG Breizh.