Modified login page: the entire frame with the logo is now clickable.

forum/skins/light/templates/auth/signin.html

+{% extends "base.html" %}
+
+{% load i18n %}
+{% load extra_tags %}
+
+{% block title %}{% spaceless %}{% trans "Login" %}{% endspaceless %}{% endblock %}
+        
+{% block forejs %}
+    <link rel="stylesheet" type="text/css" media="screen" href="{% media "/media/style/auth.css" %}"/>
+    {% for provider in all_providers %}
+        {% for location in provider.extra_css %}
+            <link rel="stylesheet" type="text/css" media="screen" href="{{ location }}"/>
+        {% endfor %}
+    {% endfor %}
+{% endblock %}
+
+{% block content %}
+    {% for provider in all_providers %}
+        {% if provider.pre_code %}
+            {{ provider.pre_code|safe }}
+        {% endif %}
+    {% endfor %}
+    <div class="headNormal">
+	    {% trans "User login" %}
+    </div>
+    {% if msg %}
+        <p class="error">{{ msg }}</p>
+    {% endif %}
+    {% for provider in top_stackitem_providers %}
+        <form class="signin_form" method="POST" action="{% url auth_provider_signin provider=provider.id %}" accept-charset="utf-8">
+            {% csrf_token %}
+            {% include provider.stack_item_template %}
+            <input type="hidden" class="validate_email" name="validate_email" value="yes" />
+        </form>
+    {% endfor %}
+    {% if top_stackitem_providers %}
+        <h3 class="or_label">{% trans 'Or...' %}</h3>
+    {% endif %}
+    <div style="width:600px;float:left;margin-bottom:5px;">
+    {% blocktrans %}
+        External login services use <b><a href="http://openid.net/">OpenID</a></b> technology, where your password always stays confidential between
+        you and your login provider and you don't have to remember another one.
+    {% endblocktrans %}
+    </div>
+    {% if request.user.is_anonymous %}
+        <div style="width:600px;float:left;margin-bottom:5px;">
+            <input type="checkbox" checked="checked" id="validate_email" />
+            {% trans "Validate my email after I login." %}
+        </div>
+    {% endif %}
+    <div id="bigicon_providers">
+        {% for provider in bigicon_providers %}
+            <a class="provider_logo big" name="{{ provider.id }}" href="{% url auth_provider_signin provider=provider.id %}">
+                <div class="inner">
+                    {% ifequal provider.type "DIRECT" %}
+                        <img src="{% media provider.icon %}" />
+                    {% endifequal %}
+                    {% ifequal provider.type "CUSTOM" %}
+                        {% include provider.code_template %}
+                    {% endifequal %}
+                    {% ifequal provider.type "SIMPLE_FORM" %}
+                        <img alt="{{ provider.simple_form_context.your_what }}" class="simple_form_provider" src="{% media provider.icon %}" />
+                    {% endifequal %}
+                </div>
+            </a>
+        {% endfor %}
+    </div>
+    <div id="smallicon_providers">
+        {% for provider in smallicon_providers %}
+            <div class="provider_logo small" name="{{ provider.id }}">
+                <div class="inner">
+                    {% ifequal provider.type "DIRECT" %}
+                        <a class="provider_direct" href="{% url auth_provider_signin provider=provider.id %}">
+                            <img src="{% media provider.icon %}" />
+                        </a>
+                    {% endifequal %}
+                    {% ifequal provider.type "CUSTOM" %}
+                        {% include provider.code_template %}
+                    {% endifequal %}
+                    {% ifequal provider.type "SIMPLE_FORM" %}
+                        <img alt="{{ provider.simple_form_context.your_what }}" class="simple_form_provider" src="{% media provider.icon %}" />
+                    {% endifequal %}
+                </div>
+            </div>
+        {% endfor %}
+    </div>
+    <form name="signin_form" id="signin_form" class="signin_form" method="POST" action="">
+        {% csrf_token %}
+        <div id="signin_form_slot"></div>
+        <input type="hidden" class="validate_email" name="validate_email" value="yes" />
+    </form>
+    {% for provider in stackitem_providers %}
+        <h3 class="or_label">{% trans 'Or...' %}</h3>
+        <form class="signin_form" method="POST" action="{% url auth_provider_signin provider=provider.id %}" accept-charset="utf-8">
+            {% csrf_token %}
+            {% include provider.stack_item_template %}
+            <input type="hidden" class="validate_email" name="validate_email" value="yes" />
+        </form>
+    {% endfor %}
+    <h3 class="or_label">{% trans 'Or...' %}</h3>
+    <form name="signin_form" id="dummy_form_unused" class="signin_form" method="POST" action="">
+        {% csrf_token %}
+        <fieldset>
+            {% trans 'Click' %} <a href="{% url auth_request_tempsignin %}">{% trans 'here' %}</a> {% trans "if you're having trouble signing in." %}
+        </fieldset>
+    </form>
+    <script type="text/html" id="simple_form_template">
+        <fieldset id="slot_form">
+              <p id="provider_name_slot">{% trans 'Enter your ' %}%%YOUR_WHAT%%</p>
+              <div><p><span></span>
+                    <input id="input_field" type="text" name="input_field" /><span></span>
+                    <input id="ssignin" name="ssignin" type="submit" value="Login" />
+              </p></div>
+              <input type="hidden" class="validate_email" name="validate_email" value="yes" />
+          </fieldset>
+    </script>
+    <script type="text/javascript">
+        $(function() {
+            var signin_url = "{% url auth_provider_signin provider='PROVIDER' %}";
+
+            function set_validate_email() {
+                var validate = $('#validate_email').attr('checked') ? 'yes' : 'no';
+                $('.validate_email').attr('value', validate);
+
+                $('.provider_direct').each(function() {
+                    var current_url = $(this).attr('href');
+                    if (!/\?validate_email\=(yes|no)$/.test(current_url)) {
+                        current_url += ('?validate_email=' + validate);
+                    } else {
+                        current_url = current_url.replace(/(yes|no)$/, validate);
+                    }
+
+                    $(this).attr('href', current_url);
+                })
+            }
+
+            $('#validate_email').change(set_validate_email);
+
+            function set_form_action(el) {
+                var provider = el.parents('.provider_logo').attr('name');
+                $('#signin_form').attr('action', signin_url.replace('PROVIDER', provider));
+            }
+
+            $('.provider_logo').click(function() {
+                $('.provider_logo').removeClass('selected');
+                $(this).addClass('selected');
+            });
+
+            $('.simple_form_provider').click(function() {
+                $('#signin_form_slot').html('');
+                var new_html = $('#simple_form_template').html()
+                    .replace('%%YOUR_WHAT%%', $(this).attr('alt'));
+                $('#signin_form_slot').html(new_html);
+                set_form_action($(this));
+                set_validate_email();
+            })
+
+            set_validate_email();
+        });
+    </script>
+{% endblock %}
+
+{% block sidebar %}
+<div class="boxC">
+    <h3 class="subtitle">{% trans "Why use OpenID?" %}</h3>
+    <ul class="list-item">
+        <li>
+		{% trans "with openid it is easier" %}
+        </li>
+        <li>
+		{% trans "reuse openid" %}
+        </li>
+        <li>
+		{% trans "openid is widely adopted" %}
+        </li>
+        <li>
+		{% trans "openid is supported open standard" %}
+        </li>
+
+    </ul>
+    <p class="info-box-follow-up-links">
+        <a href="http://openid.net/what/" target="_blank">{% trans "Find out more" %} </a><br/>
+        <a href="http://openid.net/get/" target="_blank">{% trans "Get OpenID" %} </a>
+    </p>
+</div>
+{% endblock%}