How to customize the login form with css, outerclasses and classes

Support Forms & Blueprints
1

Hi,

How can I customize the login form template with custom css and outerclasses and classes in md files?

Now I have my login form like this:

login-form
login-form701×524 15 KB

I want to center all elements, but I’ve couldn’t still. I’ve changed the login.css and I’ve tried to set some outerclasses and classes (col-md-6 and col-md-12 and classes: form-control input-lg) in login.md, but I have not got what I want.

In login.css I’ve modified the text-align property and work for labels, but not for input boxes

#grav-login {
    max-width: 70rem;
    margin: 5rem auto;
    background: #fcfcfc;
    border: 4px solid #eee;
    border-radius: 4px;
    padding: 1rem 3rem 3rem 3rem;
    text-align: center;
}

Have you got any idea about how I can to customize this login form?

Thanks very much.

1 Like
2

Hi @pmoreno,
I’m not sure if you are still searching for an answer.
But one of great way templates files are managed by Grav is that you can override plugin html.twig files easily.
If you copy /plugins/login/templates/partials/login-form.html.twig and paste it in your theme folder.
From there, you can set the html markup you wish. Just make sure you don’t delete any twig snippet or you might break things.

3

Hi @julien,

Finally, I’ve solved this issue with your method. I’ve copied the login templates and css to my custom theme folder, and there I can change all I need.

Thanks for your help.

4

:+1: Well done!
I’m glad I could help.