Customize the appearance of the Login page / fields. - My Forums

Customize the appearance of the Login page / fields.

marcozoid — Apr 22, 2017, 12:53 AM

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.

Re: Customize the appearance of the Login page / fields.

marcozoid — May 04, 2017, 03:33 PM

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.

Re: Customize the appearance of the Login page / fields. (Best Answer)

smashingred — Apr 22, 2017, 01:21 AM

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.

Re: Customize the appearance of the Login page / fields.

marcozoid — Apr 22, 2017, 01:20 AM

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.