align login and password fields

answered 2011-06-07 10:01:22 -0500

Samuel
413 ● 16 ● 6 ● 21

updated 2011-06-08 03:16:02 -0500

The good solution is to include these fields in a table. Here is the corresponding patch which is working fine:

diff --git a/askbot/skins/default/templates/authopenid/signin.html b/askbot/skins/default/templates/authopenid/signin.html
index 5cff194..417b421 100644
--- a/askbot/skins/default/templates/authopenid/signin.html
+++ b/askbot/skins/default/templates/authopenid/signin.html
@@ -47,7 +47,7 @@
     {% endif %}
     {% if view_subtype != 'email_sent' and view_subtype != 'bad_key' %}
     <form id="signin-form" method="post" action="{{ settings.LOGIN_URL }}">{% csrf_token %}
-        {# in this branch - the real signin view we display the login icons
+   {# in this branch - the real signin view we display the login icons
             here we hide the local login button only if admin
             wants to always show the password login form - then
             the button is useless.
@@ -91,16 +91,28 @@
                 {% if login_form.password_login_failed %}
                     <p class="error">{% trans %}Login failed, please try again{% endtrans %}</p>
                 {% endif %}
-                <p>
-                    <label for="id_username">{% trans %}Login name{% endtrans %}</label>
-                    {{login_form.username}}
-                </p>
-                <p>
-                    <label for="id_password">{% trans %}Password{% endtrans %}</label>
-                    {{login_form.password}}
-                </p>
+                <table class="login_table">
+                    <tr>
+                        <td>
+                            <label for="id_username" class="login_label">{% trans %}Login name{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.username}}
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="id_password" class="login_label">{% trans %}Password{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.password}}
+                        </td>
+                    </tr>
+                </table>
                 <p id="local_login_buttons">
                     <input class="submit-b" name="login_with_password" type="submit" value="{% trans %}Login{% endtrans %}" />
+                </p>
+                <p id="local_account_creation">
                     {% if settings.USE_LDAP_FOR_PASSWORD_LOGIN == False %}
                     <a class="create-password-account" style="vertical-align:middle" href="{% url user_signup_with_password %}?login_provider=local">{% trans %}Create a password-protected account{% endtrans %}</a>
                     {% endif %}
@@ -109,16 +121,26 @@
                 <h2 id="password-heading">
                     {% trans %}To change your password - please enter the new one twice, then submit{% endtrans %}
                 </h2>
-                <p>
-                    <label for="id_new_password">{% trans %}New password{% endtrans %}</label>
-                    {{login_form.new_password}}
-                    <span class="error">{{login_form.new_password.errors[0]}}</span>
-                </p>
-                <p>
-                    <label for="id_new_password_retyped">{% trans %}Please, retype{% endtrans %}</label>
-                    {{login_form.new_password_retyped}}
-                    <span class="error">{{login_form.new_password_retyped.errors[0]}}</span>
-                </p>
+                <table class="login_table">
+                    <tr>
+                        <td>
+                            <label for="id_new_password" class="login_label">{% trans %}New password{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.new_password}}
+                            <span class="error">{{login_form.new_password.errors[0]}}</span>
+                        </td>
+                    </tr>
+                    <tr>
+                        <td>
+                            <label for="id_new_password_retyped" class="login_label">{% trans %}Please, retype{% endtrans %}</label>
+                        </td>
+                        <td>
+                            {{login_form.new_password_retyped}}
+                            <span class="error">{{login_form.new_password_retyped.errors[0]}}</span>
+                        </td>
+                    </tr>
+                </table>
                 <p id="local_login_buttons">
                     <input class="submit-b" name="change_password" type="submit" value="{% trans %}Change password{% endtrans %}" />
                 </p>

And here are my modifications in the file askbot/skins/default/media/jquery-openid/openid.css

#password-heading {margin-left:35px;margin-bottom:20px;}
.login_table {text-align:center;}
.login_label {margin-left:95px;}
.login {margin-left:40px;}
.openid-signin .submit-b {
    position:relative;
    top:10px;
    left:280px;
}
.create-password-account {
   margin-left:110px;
   position:relative;
   top:20px;
}