Question posted in 
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">— or —</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 JoomlaCMSLanguageText;
use JoomlaCMSRouterRoute;
use JoomlaCMSPluginPluginHelper;
use JoomlaCMSComponentComponentHelper;
use JoomlaCMSHTMLHTMLHelper;
//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'); ?> <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
Answers
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.
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