Django Allauth (9) – Customize Sign-in and Sign-up Pages
The last part of the social login UI styling adjustment is for the Sign In (login) and Sign Up page. Currently, the social login UI design is just simple text, and social login is only available on the Sign In (login) page. In this section, we'll restructure the pages and add logos.
Add logos
As the links to the social login (e.g., GitHub and Google) are coming from the allauth source code, you may have difficulty replacing text links with image links. Here are the steps to add images to the social login links.
Prepare icons
We use these Google and GitHub icons for the links. To make them accessible by Django, save these image files under the images directory.
Define HTML elements to add icons
First, you need to identify the elements where you want to add the icons. This part may be the most challenging part.
To see where the GitHub's and Google's texts come from, check the account/login.html file. You can see that this HTML document includes another HTML document – socialaccount/snippets/provider_list.html.
{% if socialaccount_providers %}
<p>{% blocktransSubscribe now for
uninterrupted access.