Jump to content

LOGIN/REGISTER/PROFILE styling question


digitex
 Share

Recommended Posts

There's no official forum thread for Ryan's Login/Register/Profile so I'm hoping this is an OK place to ask this question:

I'm using this module, which is great and saved me a ton of time, without styling so I can control the look and I decided to use flex-box rather than floats because align-items: stretch; allows all of the field wrappers to be uniform. Problem is that the profile, register, login and forgot password forms are all wrapped in a div with class Inputfields which is where the flex has to be applied which means every form is a flex-box and I can't find a way to override it. now the login form is inline rather than stacked and forgot password is a mess.

Question I have is: is there an easy way to hook into the module to change "inputfields" to "inputfields-profile" and "inputfields-login" so I can target them separately?

ETA: See below, hooks not necessary. I just needed to give it some more thought.

Edited by digitex
Link to comment
Share on other sites

I went and had a shower, great place to think. I found a solution that doesn't require hooks. It's a simple CSS thing.

For anyone in future thinking of using flex-box for the edit profile form, which does look and work better than floats, you can try this:

The Inputfields class is common for all of the forms in the module and is where flex needs to be applied but the forms themselves have individual IDs which allows you to target the .Inputfields class as follows:

.Inputfields {
    display: flex;
}
#LoginRegisterProfileForm > .Inputfields {
    flex-direction: row;
    justify-content: space-between;
    align-items: stretch;
    flex-wrap: wrap;
}
#LoginRegisterLoginForm > .Inputfields, #InputfieldForm1 > .Inputfields {
    flex-direction: column;
    justify-content: center;
    align-items: stretch;
    flex-wrap: nowrap;
}
#wrap_login_name, #wrap_login_pass, #wrap_username {
	display: block;
	max-width: 50%;
	margin: 0 auto 10px auto;
}

If that's helpful to anyone.

  • Like 4
Link to comment
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
 Share

  • Recently Browsing   0 members

    • No registered users viewing this page.
×
×
  • Create New...