Welcome to the Treehouse Community

Want to collaborate on code errors? Have bugs you need feedback on? Looking for an extra set of eyes on your latest project? Get support with fellow developers, designers, and programmers of all backgrounds and skill levels here with the Treehouse Community! While you're at it, check out some resources Treehouse students have shared here.

Looking to learn something new?

Treehouse offers a seven day free trial for new students. Get access to thousands of hours of content and join thousands of Treehouse students and alumni in the community today.

Start your free trial

Python Django Basics Django Templates Static Assets

Pachal Debbarma
PLUS
Pachal Debbarma
Courses Plus Student 3,597 Points
Posted by Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points

CSS not working even .I am using the latest version of django and python.

When I refresh the page after running the server the terminal shows following lines " "GET /static/css/layout.css HTTP/1.1" 404 1769". Can anyone tell me what's that mean and the desirable solution?

6 Answers

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Pachal,

I don't see anything that stands out in the code you provided. The other things to check is that your CSS file is named correctly (there are no typos in the filename), and that your directory structure is correct: (learning_site/assets/css/layout.css).

Note that the "assets" folder should be in the main "learning_site" folder, not the sub-folder with the same name.

It should look like this:

- learning_site
    > assets
        > css
            layout.css
    > courses
    > learning_site
    > templates
    db.sqlite3
    manage.py

One other thing is that you mentioned that you are using the latest version of Django, and on versions 1.9 and higher the STATICFILES_DIRS variable needs to be a list, not a tuple. But I don't think this will cause the error you are getting. Just something to be aware of.

Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points
Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points

Hi!Ryan. thanks for taking your time out and advising me.It seems like the static CSS directory is same as you mentioned.I'm Just helpless finding out the error with loading static files.

After trying myself fixing and playing around the terminal shows "GET /courses/1/1/ HTTP/1.1" 200 349" But the CSS won't load. I checked the developer console it shows no error.But I don't see the CSS style on my page. can you further suggest me? What going on?

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hey no problem. I know how difficult it can be to debug things like this.

That is a good sign that you are now getting a 200 for your css file.

I think I might know what the problem is. There is only one css property that is applied at this stage in the course, and that is a fixed width of 68em (1088px) to the "site-container" div, which you set up on layout.html. The significance of the fixed width is that if your browser width is smaller than 68em, then nothing will happen and the "Welcome" text will hug the left side of the window.

If you expand your browser larger than 68em wide, then an auto margin kicks in on the left and right sides, which will center your div and push the "Welcome" text towards the right. After 68em's, the larger your browser width, the greater your left margin.

So long story short, try expanding your browser and see if the margin appears.

Pachal Debbarma
PLUS
Pachal Debbarma
Courses Plus Student 3,597 Points
Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points

HI! Ryan.Thanks a lot for sticking with me helping me out.Now the CSS finally works.Yes, I am using my local environment for this tutorial cause I feel workspace is unhandy for me.Once again thanks alot.Ryan

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Nice. Glad you got it working. What did you end up doing to solve it?

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hi Pachal,

The error means that Django cannot find your "layout.css" file when rendering the particular template that you are trying to view. It could be the result of a number of things, like specifying the incorrect path to the file, or having the wrong directory structure, or simply having a typo somewhere, or not setting up your STATIC variables properly in settings.py... just to name a few.

It is impossible to offer a specific solution without seeing your code. If you provide a snapshot of your workspace then we can debug further.

Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points
Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points

Hi!Ryan,thanks for your response.

its my layout.html

{%load static from staticfiles %}
<!DOCTYPE html>
<html lang="en">
    <head>
        <title>{%block title%}{%endblock%}</title>
        <meta charset="UTF-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link href="{% static 'css/layout.css'%}" rel="stylesheet">
    </head>
    <body>
        <div class="site-container">
            {% block content %}{% endblock %}
        </div>

    </body>
</html>

home.html

{% extends "layout.html"%}
{%block title%}Wellcome{%endblock%}
{% block content%}
Wellcome
{% endblock %}

views.py

from django.http import HttpResponse
from django.shortcuts import render



def hello_world(request):
   return render(request,'home.html',)

url.py

from django.conf.urls import include,url
from django.contrib import admin
from . import views
from django.contrib.staticfiles.urls import staticfiles_urlpatterns
urlpatterns = [
    url(r'^admin/', admin.site.urls),
    url(r'^$',views.hello_world),
    url(r'^courses/', include('courses.urls')),
]

urlpatterns += staticfiles_urlpatterns()

settings.py

STATIC_URL = '/static/'
STATICFILES_DIRS=(
    os.path.join(BASE_DIR, 'assets'),
)

please suggest me the issue.I tried my best but didn't fine any problem according to me as iam a django beginner.

Pachal Debbarma
PLUS
Pachal Debbarma
Courses Plus Student 3,597 Points
Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points

Now that might be the reason why my CSS won't load.I am using a small screen laptop with 11.6 inches.Maybe that falls in you mentioned screen size which is smaller than 68em.Thanks a lot for sticking with me.You have been a really helpful person.

Further, I have overwritten the .site-container with background-color with red but that also does show any style.I think I really have a big problem with my code.

Ryan S
Ryan S
27,276 Points
Ryan S
Ryan S
27,276 Points

Hmm. Sorry but I'm not quite sure where to go from here. Django has so many moving parts that it can be tough to debug any further without seeing your project in its entirety. Unless I'm missing something, I don't see any errors with the information you've provided.

I'm guessing you aren't using workspaces? Because a snapshot of your workspace would be really helpful so I could try running it, or even setting up a git repo.

Have you tried using your browser developer tools and inspecting the element in question to see if you can find any errors in the CSS itself? Any information in the "network" tab?

Have you tried clearing your browser cache?

Pachal Debbarma
PLUS
Pachal Debbarma
Courses Plus Student 3,597 Points
Pachal Debbarma
Pachal Debbarma
Courses Plus Student 3,597 Points

Hi!Ryan. the problem is solved thanks for your suggestions and help.

Wes R
Wes R
4,527 Points
Wes R
Wes R
4,527 Points

The assets directory should be added to the top level learning_site directory, not the app. From the top level directory, this should do it for you:

mv learning_site/assets .