-
☆ A M B ☆
- 24,524 Posts
A custom login screen, yes, but not the entire Manager.
For example, just for fun this...
http://bb.sottwell.modxcloud.com/manager/
Yes! That's what I want! Do I have to copy over all of the CSS files from the default theme or just the ones I'm changing?
discuss.answer
-
☆ A M B ☆
- 24,524 Posts
I duplicated the whole "default" theme, and replace the duplicate theme's security/login.tpl. The login form itself is somewhat modified from a tutorial
http://tutorialzine.com/2012/02/apple-like-login-form/ One of these days I'll customize the form itself more.
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title>BB Login</title>
<link rel="stylesheet" href="/manager/templates/bb/css/login.css">
<!--[if lt IE 9]>
<script src="http://html5shiv.googlecode.com/svn/trunk/html5.js"></script>
<![endif]-->
</head>
<body>
{$onManagerLoginFormPrerender}
<div id="formContainer">
<form id="login" method="post" action="">
<a href="#" id="flipToRecover" class="flipLink">Forgot?</a>
<input type="hidden" name="login_context" value="mgr">
<input type="hidden" name="modahsh" value="{$modahsh|default}">
<input type="hidden" name="returnUrl" value="{$returnUrl}">
<h2>{$_config.site_name|strip_tags|escape} <span>{$_lang.login_button}</span></h2>
<input type="text" id="loginEmail" name="username" tabindex="1" value="{$_post.username|default}" placeholder="{$_lang.login_username}">
<input type="password" id="loginPass" name="password" tabindex="2" placeholder="{$_lang.login_password}">
<button name="login" type="submit" value="1" tabindex="4">{$_lang.login_button}</button>
{if $error_message|default}
<p class="error">{$error_message}</p>
{/if}
{$onManagerLoginFormRender}
</form>
<form id="recover" method="post" action="">
<a href="#" id="flipToLogin" class="flipLink">Forgot?</a>
<input type="text" name="username_reset" id="recoverEmail" value="{$_post.username_reset|default}" placeholder="{$_lang.login_username_or_email}">
<button name="forgotlogin" type="submit" value="1" id="modx-fl-btn">{$_lang.login_send_activation_email}</button>
</form>
</div>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="/manager/templates/bb/js/script.js"></script>
</body>
</html>
-
☆ A M B ☆
- 24,524 Posts
When using your own form, make sure that the field names are the same as those in the default login.tpl, so that MODX will have the expected POST values.
Here's some to get inspiration from.
https://colorlib.com/wp/html5-and-css3-login-forms/
Ahh so we do need to copy the whole theme instead of the just the files we want to change. I see. Thanks for helping out Susan. So doesn't that also mean that whenever MODX is upgraded that include changes to the default theme, aspects of the custom theme that weren't changed will be out of sync?
-
☆ A M B ☆
- 24,524 Posts
Supposedly one only needs to have the files one wishes to change, for example your custom theme should only need /manager/templates/mytheme/security/login.tpl, and the CSS and JS files that tpl uses. I've never had any luck trying that, maybe I was doing it wrong. I just find it easier to duplicate the whole thing.
Breaking changes in upgrades are indicated by major version number (SemVer - Semantic Versioning).
You're a wonderful human being Susan, thank you!
-
☆ A M B ☆
- 24,524 Posts
Actually this got me curious, so I went into my custom theme and deleted everything except what I needed for that custom login page. And it works.
So basically you need to keep the directory structure for the changes you want to make the same, but only with the files you want to change.
For the login form, you could just have the CSS and JS files in the same folder as the login.tpl file, it uses its own HTML head and links to its CSS and JS files. In this case, I have the files in basically the same folders as the default.