This Joomla 4 override allows you to display a login form with a picture on the left side simply using Joomla's mod_login module. At the bottom of this article, you can download the files of the override.
Joomla 4 frontend rendering
PhP markup
<?php
/**
* @package Joomla.Site
* @subpackage mod_login
* @author web-eau.net
* @copyright (C) 2006 Open Source Matters, Inc. <https://www.joomla.org>
* @license GNU General Public License version 2 or later; see LICENSE.txt
*/
defined('_JEXEC') or die;
use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\HTML\HTMLHelper;
use Joomla\CMS\Language\Text;
use Joomla\CMS\Plugin\PluginHelper;
use Joomla\CMS\Router\Route;
$app->getDocument()->getWebAssetManager()
->useScript('core')
->useScript('keepalive')
->useScript('field.passwordview');
Text::script('JSHOWPASSWORD');
Text::script('JHIDEPASSWORD');
?>
<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>
<div class="my-3 text-center">
<?php
$usersConfig = JComponentHelper::getParams('com_users'); ?>
<?php if ($usersConfig->get('allowUserRegistration')) : ?>
<div class="d-flex text-center links">
<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>
</div>
<?php endif; ?>
<div class="d-flex justify-content-center links">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=remind'); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_USERNAME'); ?></a>
</div>
<div class="d-flex justify-content-center links">
<a href="<?php echo JRoute::_('index.php?option=com_users&view=reset'); ?>">
<?php echo JText::_('MOD_LOGIN_FORGOT_YOUR_PASSWORD'); ?></a>
</div>
</div>
<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(path/to/your/picture.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;
}This Joomla 3 override allows you to display a login form with a picture on the left side simply using Joomla's mod_login module. At the bottom of this article, you can download the files of the override.
Joomla 3 frontend rendering
PhP 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(path/to/your/picture.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;
}