We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
    • 37031
    • 93 Posts
    Hi everyone!

    Wanted to know if anyone has had any success with creating a custom manager theme on MODX 2.3 and up. On earlier versions I followed the tutorial here:

    https://rtfm.modx.com/revolution/2.x/administering-your-site/customizing-the-manager/manager-templates-and-themes

    but now when I do, after changing the default theme in system settings to my custom theme, I get an un-styled manager. I then have to go back and manually change the system setting in the DB to get things back to normal.

    Any thoughts?

    Jeff

    This question has been answered by sottwell. See the first response.

      • 28042 ☆ 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/
        Studying MODX in the desert - http://sottwell.com
        Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
        Join the Slack Community - http://modx.org
        • 37031
        • 93 Posts
        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
          • 28042 ☆ 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>
          
          
            Studying MODX in the desert - http://sottwell.com
            Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
            Join the Slack Community - http://modx.org
            • 28042 ☆ 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/
              Studying MODX in the desert - http://sottwell.com
              Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
              Join the Slack Community - http://modx.org
              • 37031
              • 93 Posts
              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?
                • 28042 ☆ 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).
                  Studying MODX in the desert - http://sottwell.com
                  Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                  Join the Slack Community - http://modx.org
                  • 37031
                  • 93 Posts
                  You're a wonderful human being Susan, thank you!
                    • 28042 ☆ 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.


                      Studying MODX in the desert - http://sottwell.com
                      Tips and Tricks from the MODX Forums and Slack Channels - http://modxcookbook.com
                      Join the Slack Community - http://modx.org
                      • 37031
                      • 93 Posts
                      So would you still have to change the theme value in system settings? Because what you've just described is how I originally set things up and then as soon as I switched the value in system settings to my custom theme all of the manager pages rendered without styling. I also noticed that the login.tpl pages are slightly different between 2.3.3 and 2.3.5. Check this out:

                      MODX 2.3.3 login.tpl
                      <link rel="stylesheet" type="text/css" href="{$_config.manager_url}templates/{$_config.manager_theme}/css/login.css" />


                      MODX 2.3.5 login.tpl
                      <link rel="stylesheet" type="text/css" href="{$loginCss}" />


                      In 2.3.5 I can copy over only the files I want to change in my custom theme. In 2.3.3 I need to copy all of them over it seems.