Search code examples
pythondjangodjango-templates

Django static url not seem to be loading css file

I'm actually new to Django and tried to load my theme into newly created project.

I have a home.html template file placed at {APP_NAME}/templates/ directory of my Django project. The APP_NAME is called website here and projectname is dentist. Here is the structure top-level directory of project:

dentist
env (virtual environment)
static
    website
        css
            templatemo_style.css
        images
            ...
website
    templates
        home.html
manage.py

As you see the static files are placed in the static under the APP_NAME.

Now here is the home.html:

{% load static %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>free template one - templatemo</title>
<meta name="keywords" content="" />
<meta name="description" content="" />
<link href="{% static 'website/css/templatemo_style.css' %}" rel="stylesheet" type="text/css" />
</head>

And this is settings.py added configuration:

STATIC_URL = 'static/'

STATICFILES_DIR = [
    os.path.join(BASE_DIR,'static')
]

But now the problem is whenever I load the project, the css file is not being loaded and the html is corrupted!

I check the source code and it shows this link:

<link href="/static/website/css/templatemo_style.css" rel="stylesheet" type="text/css" />

However it is not found and the page comes up this way:

enter image description here

enter image description here

Solution

  • Move your static folder into the website(your app) folder. Also, create a folder named website (app name) in the templates folder and move home.html there. This will be your final file structure.

    website
  static
    website
      css
        templatemo_style.css
  templates
    website
      home.html

    I hope this will solve your issue.