Loading lesson path
We have learned how to add a static file in the application's static folder, and how to use it in the application. But what if other applications in your project wants to use the file? Then we have to create a folder on the root directory and put the file(s) there. It is not enough to create a static folder in the root directory, and Django will fix the rest. We have to tell Django where to look for these static files. Start by creating a folder on the project's root level, this folder can be called whatever you like, I will call it mystaticfiles in this tutorial: my_tennis_club db.sqlite3 manage.py my_tennis_club/ members/ mystaticfiles/ Add a CSS file in the mystaticfiles folder, the name is your choice, we will call it myglobal.css in this example: my_tennis_club db.sqlite3 manage.py my_tennis_club/ members/ mystaticfiles/ myglobal.css Open the CSS file and insert the following:
Formula
my_tennis_club/mystaticfiles/myglobal.cssbody {
color: violet;
}You will have to tell Django to also look for static files in the mystaticfiles folder in the root directory, this is done in the settings.py file:
STATICFILES_DIRS list:
Formula
my_tennis_club/my_tennis_club/settings.py..
Formula
STATIC_ROOT = BASE_DIR / 'productionfiles'STATIC_URL = 'static/'
#Add this in your settings.py file: STATICFILES_DIRS = [ BASE_DIR / 'mystaticfiles' ]..
STATICFILES_DIRS list, you can list all the directories where Django should look for static files.
BASE_DIR keyword represents the root directory of the project, and together with the / "mystaticfiles", it means the mystaticfiles folder in the root directory.
If you have files with the same name, Django will use the first occurrence of the file. The search starts in the directories listed in STATICFILES_DIRS, using the order you have provided. Then, if the file is not found, the search continues in the static folder of each application.
CSS file for the entire project, which can be accessed from all your applications. To use it in a template, use the same syntax as you did for the myfirst.css file: Begin the template with the following:
{% load static %}And refer to the file like this:
<link rel="stylesheet" href="{% static 'myglobal.css' %}">Example my_tennis_club/members/templates/template.html
{% load static %}<!DOCTYPE html> <html>
<link rel="stylesheet" href="{% static 'myglobal.css' %}"><body>
{% for x in fruits %}<h1></h1>
{% endfor %}</body> </html>
That is correct. You need to collect the static files once again.
Run the collectstatic command to collect the new static file: python manage.py collectstatic
You have requested to collect static files at the destination location as specified in your settings: C:\Users\
\myworld\my_tennis_club\productionfiles This will overwrite existing files! Are you sure you want to do this? Type 'yes' to continue, or 'no' to cancel:
Type 'yes' to continue, or 'no' to cancel: yes
1 static file copied to 'C:\Users\
\myworld\my_tennis_club\productionfiles', 128 unmodified.
Start the server, and the example will work: python manage.py runserver Check out the result in your own browser:
Formula
127.0.0.1:8000/testing/.Example my_tennis_club/members/templates/template.html
{% load static %}<!DOCTYPE html> <html>
<link rel="stylesheet" href="{% static 'myglobal.css' %}"><body>
{% for x in fruits %}<h1></h1>
{% endfor %}</body> </html>