Login
  • Django
  • Add Styles to the Project

The Project - My Tennis Club

If you have followed the steps in the entire Django tutorial, you will have a my_tennis_club project on your computer, with 5 members:


 

We want to add a stylesheet to this project, and put it in the mystaticfiles folder:

my_tennis_club
    manage.py
    my_tennis_club/
    members/
    mystaticfiles/
        mystyles.css

The name of the CSS file is your choice, we call it mystyles.css in this project.

Open the CSS file and insert the following:

my_tennis_club/mystaticfiles/mystyles.css:

body {

  background-color: violet;

}

Modify the Master Template

Now you have a css file, the next step will be to include this file in the master template:

Open the master template file and add the following:

my_tennis_club/members/templates/master.html:

{% load static %}

<!DOCTYPE html>

<html>

<head>

  <title>{% block title %}{% endblock %}</title>

  <link rel="stylesheet" href="{% static 'mystyles.css' %}"> 

</head>

<body>

 

{% block content %}

{% endblock %}

 

</body>

</html>

 

 

Check Settings

Make sure your settings.py file contains a STATICFILES_DIRS list with a reference to the mystaticfiles folder on the root directory, and that you have specified a STATICFILES_ROOT folder:

my_tennis_club/my_tennis_club/settings.py:

.

.

STATIC_ROOT = BASE_DIR / 'productionfiles'

 

STATIC_URL = 'static/'

 

#Add this in your settings.py file:

STATICFILES_DIRS = [

    BASE_DIR / 'mystaticfiles'

]

.

.

Collect Static Files

Every time you make a change in a static file, you must run the collectstatic command to make the changes take effect:

py manage.py collectstatic

If you have executed the command earlier in the project, Django will prompt you with a question:

You have requested to collect static files at the destination
location as specified in your settings:

    C:UsersYour Namemyworldmy_tennis_clubproductionfiles

This will overwrite existing files!
Are you sure you want to do this?

Type 'yes' to continue, or 'no' to cancel:

Type 'yes'. This will update any changes done in the static files, and give you this result:

1 static file copied to 'C:UsersYour Nameminverdenmy_tennis_clubproductionfiles', 132 unmodified.

Now, if you run the project:

py manage.py runserver

It will look like this:


 

If you have followed all the steps on you own computer, you can see the result in your own browser:

In the browser window, type 127.0.0.1:8000/members/ in the address bar.

Spice up the Style!

In the example above we showed you how to include a stylesheet to your project.

We ended up with a purple web page, but CSS can do more than just change the background color.

We want to do more with the styles, and end up with a result like this:


 

First, replace the content of the mystyles.css file with this:

my_tennis_club/mystaticfiles/mystyles.css:

@import url('https://fonts.googleapis.com/css2?family=Source+Sans+Pro:wght@400;600&display=swap');

body {

Add Styles to the Project

Login
ADS CODE