Customizing login form

[vpereddy]

Hello I am trying to customize the default login form.

I want to make width of div(which contains form) to 50% and move the div to the center. It should impact all forms like registration , create app etc.

I am doing the following:

div.row
{
margin-right: -15px;
margin-left: -15px;
width : 50%
margin : 0 auto
}

the above change is impacting my other pages which does not contain forms.

How can I do this, so that it wont impact the style of the content of the other pages(basic pages)

Thanks,

Venkat

[DChiesa · Accepted solution]

Hi Venkat

When you speak of "the login form", I suppose you are referring to the login form on the Drupal developer portal.

If you are using the modal login form, then you get the behavior you mentioned, "for free". It looks like this:

If you are not using the modal form, then... You can constrain the CSS rules so that they apply only to the login form, the registration form, etc. You need to use a more specific CSS selector in the rule.

To figure out how to constrain the selector, you can use the Developer Tools in your browser to examine the HTML element hierarchy. In case you're unfamiliar with that idea, then here's a quick reminder:

At the bottom there you can see the element hierarchy. And this hierarchy is what you need in order to provide a more discriminating CSS selector.

In my case instead of div.row, I would use something like:

.modal-content > modal-body { ... }

But your case will be different, if you're not using the modal login form.