change the look of the user login in joomla

39 Views Asked by At

I'm a beginner and I don't know how to manipulate code. Surely here I find people who are much better than me. My request is to modify the files I have available to make them appear correctly in joomla. it is a login form. The default one doesn't look good. Please, is there anyone in this forum who can give me a hand. I attach the zip folder. Thank you so much

I attach zip fileI attach zip file for the login form

I insert here the code to be changed:

The code I intend to change is in this file which has only html code "index.html"

<!doctype html>
<html lang="en">
  <head>
    <!-- Required meta tags -->
    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link href="https://fonts.googleapis.com/css?family=Roboto:300,400&display=swap" rel="stylesheet">

    <link rel="stylesheet" href="fonts/icomoon/style.css">

    <link rel="stylesheet" href="css/owl.carousel.min.css">

    <!-- Bootstrap CSS -->
    <link rel="stylesheet" href="css/bootstrap.min.css">
    
    <!-- Style -->
    <link rel="stylesheet" href="css/style.css">

    <title>Charmed login</title>
  </head>
  <body>
  

  <div class="d-lg-flex half">
    <div class="bg order-1 order-md-2" style="background-image: url('images/bg_1.jpg');"></div>
    <div class="contents order-2 order-md-1">

      <div class="container">
        <div class="row align-items-center justify-content-center">
          <div class="col-md-7">
            <div class="mb-4">
              <h3>Sign In</h3>
              <p class="mb-4">Lorem ipsum dolor sit amet elit. Sapiente sit aut eos consectetur adipisicing.</p>
            </div>
            
            
             <!-- Form  --->
            
              <form action="<?php echo Route::_('index.php?option=com_users&task=user.login'); ?>" method="post">
              
              <!-- Username --->
              
              <div class="form-group first">
                <label for="username">Username</label>
                <input type="text" class="form-control" id="username">
              </div>
              
              <!-- Password --->
              
              <div class="form-group last mb-3">
                <label for="password">Password</label>
                <input type="password" class="form-control" id="password">
                
              </div>
              
              <!-- Remember me --->
              <div class="d-flex mb-5 align-items-center">
                <label class="control control--checkbox mb-0"><span class="caption">Remember me</span>
                  <input type="checkbox" checked="checked"/>
                  <div class="control__indicator"></div>
                </label>
                <span class="ml-auto"><a href="#" class="forgot-pass">Forgot Password</a></span> 
              </div>
              
              <!-- Login btn --->

              <input type="submit" value="Log In" class="btn btn-block btn-primary">

              <span class="d-block text-center my-4 text-muted">&mdash; or &mdash;</span>
              
              
              <!-- Social login no --->
              
              <div class="social-login">
                <a href="#" class="facebook btn d-flex justify-content-center align-items-center">
                  <span class="icon-facebook mr-3"></span> Login with Facebook
                </a>
                <a href="#" class="twitter btn d-flex justify-content-center align-items-center">
                  <span class="icon-twitter mr-3"></span> Login with  Twitter
                </a>
                <a href="#" class="google btn d-flex justify-content-center align-items-center">
                  <span class="icon-google mr-3"></span> Login with  Google
                </a>
              </div>
            </form>

            
        
          </div>
        </div>
      </div>
    </div>

    
  </div>
    
    

    <script src="js/jquery-3.3.1.min.js"></script>
    <script src="js/popper.min.js"></script>
    <script src="js/bootstrap.min.js"></script>
    <script src="js/main.js"></script>
  </body>
</html>

This is the default.php code of com_user:

<?php
use Joomla\CMS\Language\Text;
use Joomla\CMS\Router\Route;
use Joomla\CMS\Plugin\PluginHelper;
use Joomla\CMS\Component\ComponentHelper;
use Joomla\CMS\HTML\HTMLHelper;
//for_use

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

defined('_JEXEC') or die;

HtmlHelper::_('behavior.keepalive');
HtmlHelper::_('behavior.formvalidator');

?>

<div class="login<?php echo $this->pageclass_sfx; ?>">
    <?php if ($this->params->get('show_page_heading')) : ?>
        <div class="page-header">
            <h1>
                <?php echo $this->escape($this->params->get('page_heading')); ?>
            </h1>
        </div>
    <?php endif; ?>
    <?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
        <div class="login-description">
    <?php endif; ?>
    <?php if ($this->params->get('logindescription_show') == 1) : ?>
        <?php echo $this->params->get('login_description'); ?>
    <?php endif; ?>
    <?php if ($this->params->get('login_image') != '') : ?>
        <img src="<?php echo $this->escape($this->params->get('login_image')); ?>" class="login-image" alt="<?php echo Text::_('COM_USERS_LOGIN_IMAGE_ALT'); ?>" />
    <?php endif; ?>
    <?php if (($this->params->get('logindescription_show') == 1 && str_replace(' ', '', $this->params->get('login_description')) != '') || $this->params->get('login_image') != '') : ?>
        </div>
    <?php endif; ?>
    
    
    <form action="<?php echo Route::_('index.php?option=com_users&task=user.login'); ?>" method="post" class="form-validate form-horizontal well">
        <fieldset>
            <?php foreach ($this->form->getFieldset('credentials') as $field) : ?>
                <?php if (!$field->hidden) : ?>
                    <div class="control-group">
                        <div class="control-label">
                            <?php echo $field->label; ?>
                        </div>
                        <div class="controls">
                            <?php echo $field->input; ?>
                        </div>
                    </div>
                <?php endif; ?>
            <?php endforeach; ?>
            <?php if ($this->tfa) : ?>
                <div class="control-group">
                    <div class="control-label">
                        <?php echo $this->form->getField('secretkey')->label; ?>
                    </div>
                    <div class="controls">
                        <?php echo $this->form->getField('secretkey')->input; ?>
                    </div>
                </div>
            <?php endif; ?>
            <?php if (PluginHelper::isEnabled('system', 'remember')) : ?>
                <div class="control-group">
                    <div class="control-label">
                        <label for="remember">
                            <?php echo Text::_('COM_USERS_LOGIN_REMEMBER_ME'); ?>&nbsp; <input checked="checked" style="display:inherit" id="remember" type="checkbox" name="remember" class="inputbox" value="yes" />
                        </label>
                    </div>
                    <div class="controls">
                        
                    </div>
                </div>
            <?php endif; ?>
            <div class="control-group">
                <div class="controls">
                    <button type="submit" class="btn btn-primary">
                        <?php echo Text::_('JLOGIN'); ?>
                    </button>
                </div>
            </div>
            <?php $return = $this->form->getValue('return', '', $this->params->get('login_redirect_url', $this->params->get('login_redirect_menuitem'))); ?>
            <input type="hidden" name="return" value="<?php echo base64_encode($return); ?>" />
            <?php echo HtmlHelper::_('form.token'); ?>
        </fieldset>
    </form>
    
    
    
</div>

<div>
    <ul class="nav nav-tabs nav-stacked">
        <li>
            <a href="<?php echo Route::_('index.php?option=com_users&view=reset'); ?>">
                <?php echo Text::_('COM_USERS_LOGIN_RESET'); ?>
            </a>
        </li>
        <li>
            <a href="<?php echo Route::_('index.php?option=com_users&view=remind'); ?>">
                <?php echo Text::_('COM_USERS_LOGIN_REMIND'); ?>
            </a>
        </li>
        <?php $usersConfig = ComponentHelper::getParams('com_users'); ?>
        <?php if ($usersConfig->get('allowUserRegistration')) : ?>
            <li>
                <a href="<?php echo Route::_('index.php?option=com_users&view=registration'); ?>">
                    <?php echo Text::_('COM_USERS_LOGIN_REGISTER'); ?>
                </a>
            </li>
        <?php endif; ?>
    </ul>
</div>

I'm not how to handle the index.html file

thanks in advance <3

2

There are 2 best solutions below

2
itoctopus On

Just make a copy of the /components/com_users/tmpl/login/default_login.php file and place it under templates/[your-template]/components/com_users/login and then modify it there. Make your modifications incrementally and test them every time to ensure that you don't lose a lot of work if you have an error somewhere.

0
Bas van den Dikkenberg On

In the backend go to system -> website template -> chose your template Go to the tab make override. click on com_users Clock on login This will create correct files in your template directory in html/login folder. Here you can make all the changes you need.

Using this procedure you ensured