CSS classes in forgot form

1

Hello.

How can I modify the Forgot form, applying the css classes from the .md file to it?

I know how to do this in a normal form (contact, for example), but I don’t know how to change it in the forgot.md file.

I can only make the changes by modifying the partials/forgot-form.html.twig file (copied to the theme folder, previously), but if in the future the Login plugin is updated, the theme file would not be updated. So I would like to know how to make the changes in the forgot.md file.

I have done the following, but it doesn’t work:

---
title: Forgot password
cache_control: private, no-cache, must-revalidate

login_redirect_here: false

form:

     fields:
         - name: email
           type: email
           label: PLUGIN_LOGIN.EMAIL
           autofocus: true
           validate:
             required: true
             type: email
     buttons:
         - name: task
           type: submission
           value: login.forgot
           label: PLUGIN_LOGIN.BTN_SEND_INSTRUCTIONS
           classes: large fit
---


# Recover your password

Enter your email to recover your password

Any idea?

2

did you try plugins custom css to inject some styles?

3

Ok @topidesta,

Finally, I was able to modify the css styles of the button, taking into account its value:

input[value="login.forgot"],
.button {
  width: 100%;
  font-size: 0.7em;
  padding: 0 3em;
}

But this style is also applied to the login button, with the value “login.login”.
For now, I have to continue investigating.

PD: I think you have to use javascript for this.

4

Yes, css in getgrav is global style, if you must spesific some style in different page, please use it with plugin helper , did you try, Custom CSS v0.2.2

i think it’s can solve your problem.

5

@topidesta, finally, I was able to override the ‘primary’ style of the Login plugin, assigned to the “Send reset instructions” button, inside the forgot.html.twig file as follows:

{% block stylesheets %}
     {{ parent() }}
     {% set styles %}
         #grav-login
              input[type=submit].primary,
              input[type=reset].primary,
              input[type=button].primary,
              button.primary {
              width: 100%;
         }
     {% endset %}
     {% do assets.addInlineCss(styles) %}
{% endblock %}

Thanks for your help

1 Like