Enable static files in Django

In order to use static files in the project, we configure the following variable:

customlogin\customlogin\settings.py

STATIC_URL = "static/"

More information in:

https://docs.djangoproject.com/en/dev/howto/static-files/

Install Bootstrap and Fontawesome

In this section we will mainly want to customize some templates and know their behaviors; one of the keys to this customization is that it has a good design, and that is why we will use Bootstrap again.

Let's start by installing Bootstrap; since CodeIgniter is a framework without any connection with Node, we must use the Bootstrap CDN which we can obtain from the official page:

https://getbootstrap.com/

Click on "Download" and then again on "Download" in the following section:

Bootstrap files download

Bootstrap, being a client-side web framework, uses CSS and JavaScript to be able to use any Bootstrap component or functionality; once the previous compressed file has been downloaded and the folder has been generated (which, to simplify the process, we renamed bootstrap) we need the following files:

account/static/

<link rel="stylesheet" href="{% static 'bootstrap\css\bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'fontawesome\css\all.min.css' %}">

What we are going to copy into the static folder of the project:

Proyects files CSS and JS
Proyects files CSS and JS

We also install the popper dependencies that you can obtain from the same Bootstrap page; we install Fontawesome for the iconography:

<link rel="stylesheet" href="{% static 'fontawesome\css\all.min.css' %}">

Remember to download the web source files for free from:

https://fontawesome.com/

With Fontawesome we have access to multiple SVG icons ready to use.

There is also a specific package for Django in case you prefer to configure it that way:

https://fontawesome.com/docs/web/use-with/python-django

- Andrés Cruz

En español
Andrés Cruz

Develop with Laravel, Django, Flask, CodeIgniter, HTML5, CSS3, MySQL, JavaScript, Vue, Android, iOS, Flutter

Andrés Cruz In Udemy

I agree to receive announcements of interest about this Blog.