CSS files not loading

Using Django Deployment
1

Hi all

I have managed to upload my django project to a server but the css file isn’t working.

The code below is from my settings file.

When i ran collect static it generated the “staticfiles” folder, i thought this was supposed to be called “static”

STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')

STATIC_URL = 'staticfiles/bands_ratings'

See below image for file structure.

image
image2704×816 135 KB

connecting css in html file


 {%  load static %}
    <meta charset="UTF-8">
    <title>Title</title>
    <link rel="stylesheet" href="{% static 'staticfiles/Style.css'%}">
    <meta name="viewport" content="width=device-width, initial-scale=1">
</head>
<body>
2

All the details are documented at How to deploy static files | Django documentation | Django and Settings | Django documentation | Django

That’s because you’re telling it to do that:

Your STATIC_URL setting is used in the static tag in your template as a prefix to the static file identified as the parameter of that tag.

For example, you have:

This means that something like:
{% static 'css/file.css' %}
is going to end up rendering as:
staticfiles/bands_ratings/css/file.css

Note from the docs for STATIC_URL:

It must end in a slash if set to a non-empty value.

3

Thanks Ken, the creation of staticfiles does now make sense, thank you.

So my CSS file is inside bands_ratings, so should my html file be like

[quote=“wishmaser89, post:3, topic:22053, full:true”]
Thanks Ken, the creation of staticfiles does now make sense, thank you.

So my CSS file is inside bands_ratings, so should my html file be like

< link rel=“stylesheet” href=“{% static Style.css’%}” >

I have tried this and it doesn’t work

4

When i go on the page and click on view source i can see

Note: I ran collect static again and changed the folder to “static” instead of “staticfiles”

5

I think you’re trying to post html here that is not showing up in the forum. I can’t see what you’re trying to share.

When you have a single line of html, you must enclose it between single backtick - ` characters.

If you have multiple lines of html, you want to surround it between lines of three backtick - ` characters.

6

Hi Ken

I have fixed this now.

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

When i view page source i can see

  •    <link rel="stylesheet" href="[/static/bands_ratings/admin/css/Style.css](https://www.sb10-89.co.uk/static/bands_ratings/admin/css/Style.css)">
7

That href doesn’t look right to me - is that a copy/paste error? Or does it actually appear in your browser looking like that?

8

Oh i don’t know why it came out like that when i pasted it, see this image for how it actually shows.

image
image1604×362 41.3 KB

9

Is an admin page / template involved here? Note the url - Django is expecting the file to be in bands_ratings/admin/css.

10

its in static> bands_ratings/Style.css

image
image1604×702 22.2 KB

11

That might be where you have it, but that’s not where Django is looking for it.

12

hmm then i don’t know what im doing wrong because settings.py is pointing to it

STATIC_URL = ‘/static/bands_ratings/admin/css/’
-STATIC_ROOT = os.path.join(BASE_DIR, ‘static’)

13

But is your file in that directory?

14

It is yes

image
image1604×1120 64.2 KB

15

I also copied the css file to the admin/css folder too but still does not work :frowning:

16

What you need to do:

  1. Stop

  2. Take a deep breath

  3. Delete your current STATIC_URL setting

  4. Reread the definition of what STATIC_URL does.

  5. Reread my reply above at CSS files not loading - #2 by KenWhitesell

The STATIC_URL forms a prefix to the path component relative to STATIC_ROOT. What you specify in STATIC_URL is not part of the actual path in which the files are stored. What you identify as the parameter in the static tag is the relative directory and file name of the file to be referenced, relative to STATIC_ROOT, not STATIC_URL.

So, in other words, if you have STATIC_URL as I defined in my previous example (STATIC_URL='staticfiles/bands_ratings/'), and STATIC_ROOT=/var/www/html/
Then the tag {% static 'css/file.css' %} is going to render a url as staticfiles/bands_ratings/css/file.css.

The file itself is going to be collected to /var/www/html/css/file.css.

It is then up to your webserver configuration (e.g. nginx / apache) to know that the url staticfiles/bands_ratings/css/file.css should refer to the physical file /var/www/html/css/file.css.

(I should clarify that your STATIC_ROOT should never be inside your project directory in a production environment, and hopefully you know better than to be using runserver in a deployment environment.)

1 Like
17

Hi Ken

i changed STATIC URL to
STATIC_URL = ‘/static/bands_ratings’

STATIC ROOT is unchanged - STATIC_ROOT = os.path.join(BASE_DIR, ‘static’)

and

  •  <link rel="stylesheet" href="{% static '/admin/css/Style.css' %}">

Now the CSS is working thank you so much. This had been driving me crazy over the past 48 hours. I took your advice and re-read your post 2. I guess something clicked and it works now.

Although i am not sure what you mean here ’ (I should clarify that your STATIC_ROOT should never be inside your project directory in a production’

Where should it be then if not in the top level directory of the project?

Thank you so much for your patience i really appreciate it. Also i am a noob, only started learning python 18 months ago and django 2.5 months ago so still plenty to learn, especially in regards to how servers work…

18

Outside your project. Whether you choose to put it in a standard location like /var/www/html, or somewhere else is entirely up to you. But you generally don’t want your web server having direct access to your project directory. (There’s no need for it, and you typically want to prevent any unintentional data leakage.)

19

thanks Ken, will look into moving it,