CODEWITHSUNDEEP
pythoncssdjango
Liondancer
Liondancer

Reputation: 16469

My CSS and images aren't being displayed Django

I am learning Django and for some reason my CSS and images are not being displayed. I feel as though I am doing something wrong inside my HTML file. I think my files are being collected correctly because when I insert http://127.0.0.1:8000/static/images/[email protected] in my browser I see the image.

This is my project tree:

mysite
  \articles
       \static
       \articles
           \css
  \static
       \images
       \css
           default.css
       \js 
  \assets
       \admin
       \images
           [email protected]
       \css
           default.css
  \templates
       base.html
  \settings.py

In my settings.py

STATICFILES_FINDERS = (
    'django.contrib.staticfiles.finders.FileSystemFinder',
    'django.contrib.staticfiles.finders.AppDirectoriesFinder',
)

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

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

STATIC_URL = '/static/'

Here is my base.html

{% load staticfiles %}

<!DOCTYPE html>
<html lang="en">
<head>
    <title>{% block title %} My Base Template {% endblock %}</title>

    <link rel="stylesheet" type="text/css" href="{% static "css/default.css" %}">

</head> 

<body>
    <div id="page">
        <div id="sidebar">
            {% block sidebar %}
            <ul>
                <li><a href="/articles/all">Articles</a></li>
                <li><a href="/admin/">Admin</a></li>
            </ul>
            {% endblock %}  
        </div>  
        <div id="content">
            {% block content %}This is the content area{% endblock %}
            <img src="{% static "images/[email protected]" %}">
        </div>
    </div>

</body>
</html>

Upvotes: 0

Views: 271

Answers (4)

rnevius
rnevius

Reputation: 27092

As I mentioned in your Reddit post, you need to add your /assets directory to your STATICFILES_DIRS.

I'm not sure why you have your assets and static files in different directories (and you may want to consider combining these assets), but this should be an adequate solution to your current issues.

Upvotes: 1

Shanki
Shanki

Reputation: 167

Just try this:

In settings.py

Replace 

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

With this:

STATIC_ROOT = ''

And in template file

Replace 

{% load staticfiles %}

With this in the template.

{% load static %}

Note: Put the contents of assets folder inside static folder.

Upvotes: 1

Narayana
Narayana

Reputation: 100

To start off, link your .less stylesheets with the rel attribute set to "stylesheet/less"

<link rel="stylesheet/less" type="text/css" href="styles.less" />

Next, download less.js and include it in a tag in the element of your page:

<script src="less.js" type="text/javascript"></script>

Upvotes: 1

Narayana
Narayana

Reputation: 100

Close the syntax with angle brackets. Right now it has been closed with question mark in head section.

Upvotes: 1

Related Questions