Add Global Static Files

Add a Global CSS File

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:

Add a CSS file in the mystaticfiles folder, the name is your choice, we will call it myglobal.css in this example:

Open the CSS file and insert the following:

Modify Settings

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:

In the STATICFILES_DIRS list, you can list all the directories where Django should look for static files.

The BASE_DIR keyword represents the root directory of the project, and together with the / "mystaticfiles", it means the mystaticfiles folder in the root directory.

Modify the Template

Now you have a global 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:

And refer to the file like this:

That is correct. You need to collect the static files once again.

Collect Static Files

Run the collectstatic command to collect the new static file:

Which will produce this result:

Type yes:

Which will produce this result:

The Example Should Work

Start the server, and the example will work:

Check out the result in your own browser: 127.0.0.1:8000/testing/.