We launched new forums in March 2019—join us there. In a hurry for help with your website? Get Help Now!
MODX Community Forums Archive

Answered Customize the appearance of the Login page / fields.

    • 53247
    • 14 Posts
    marcozoid Reply #1, 7 years, 8 months ago
    I am running Login (v1.9.2) and I am looking to customise the look of the login page and fields. I have hunted around a bit but have yet to find any solid information on this.

    When I view the lgnlogintpl.chunk.tpl, I see that there are some CSS styles identified (ex. div class="loginForm") but I do not know where the corresponding CSS lives. Perhaps I need to actually define those styles myself in the CSS that I assign to the template that will drive the login / logout pages?

    Any direction on all of this would be greatly appreciated. Thanks.

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

      • 53247
      • 14 Posts
      marcozoid Reply #2, 7 years, 8 months ago
      Indeed. I answered my own question. You need to create a template to be used with the Login pages. You then (ideally, in a dedicated 'Login' CSS file) create and define CSS classes that correspond to the named classes that are found in the various Lgn Tpl chunks (ex. lgnlogintpl.chunk.tpl). And Ouala! - you gain control over the appearance of the Login pages.
      • discuss.answer
        • 27708 MODX Staff
        • 2,502 Posts
        Jay Gilmore Reply #3, 7 years, 8 months ago
        Hey @marcozoid, first, you'll want to just create your own login forms and then use the &tplType and &loginTpl, &logoutTpl properties as well as follows: 
        [[!Login? 
    &tplType=`modChunk` 
    &loginTpl=`myLoginChunk`
]]

        Then you can just use your own CSS. I presume this is for a website project you've already got 1 or more CSS files for. Just put it in there using the classes in the login form.

        Incidentally, the login form up in the top right of the forums or the one over at https://modx.com/login are using Login.
          Author of zero books. Formerly of many strange things. Pairs well with meats. Conversations are magical experiences. He's dangerous around code but a markup magician. Blog ✦ Twitter ✦ LinkedIn ✦ GitHub
          • 53247
          • 14 Posts
          marcozoid Reply #4, 7 years, 8 months ago
          Jay. Appreciate the feedback. Yeah, I managed to sort it all out. Just created a custom CSS file and that took care of it.

          Another quick question though: Is there a way to have a user automatically logged out after a set amount of time of inactivity? I presume there is, I just do not know where to set that parameter.

          Thanks much.