Django templates extending and CSS

Question

I have such base template:

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

    <link rel="stylesheet" href="/static/style.css"/>

And this text in logs when I refresh the page:

[01/Dec/2011 18:22:00] "GET /search/ HTTP/1.1" 200 2760
[01/Dec/2011 18:22:00] "GET /static/style.css HTTP/1.1" 200 54

So, it means that CSS loads from server correctly. But it doesn't work! If I include this CSS as text directly into the base template, it works properly. The static files configuration is OK.

score 26 · Accepted Answer · answered Dec 01 '11 at 15:22

Are you putting the css in a block that will put it in the head of the base?

/* base.html */
<html>
    <head>
        <title>{% block title %}{% endblock %}</title>
        {% block extra_head %}{% endblock %}
    </head>
    <body>
        {% block content %}{% endblock %}
    </body>
</html>


/* another template */
{% extends 'base.html' %}
{% block title %}My Title{% endblock %}
{% block extra_head %}
    <link rel="stylesheet" href="/static/style.css"/>
{% endblock %}
{% block content %}
    <h1>This is my page!</h1>
{% endblock %}

In your browser, how does the page source look? Is the style sheet in the head? can you click the link and see the actual css?

score 2 · Answer 2 · answered May 14 '16 at 05:34

This an extremely late response, but possibly more relevant now than it would have been five years ago: Make sure the stylesheet you're editing isn't being generated by the server hosting your site.

I'm not entirely clear on whether @RankoR was making changes to the style.css file, and they weren't being reflected on the site, or if zero styles were being applied to the template whatsoever, but if you run into the former: You can quickly rule out the possibility that it's being being generated somewhere between you and its final, rendered state by adding your own .css folder to the root folder, and adding a definition to it that you're trying to change.

Let's say you're trying to customize your navbar's styling -- if you're wanting to change .navbar-inverse {background-color: #222; border-color: #090909 } to .navbar-inverse {background-color: #222; border-color: #090909; font:20px bold Arial, sans-serif }, add to your new, blank .css file .navbar-inverse2 {background-color: #222; border-color: #090909; font:20px bold Arial, sans-serif }, and change the .navbar-inverse tag(s) in your html to navbar-inverse2. If you just link your stylesheet under the original one in the <head>, and that change is rendered: You're on your way to Solution Town!

score 1 · Answer 3 · answered Dec 01 '11 at 14:56

1

What do you mean by "doesn't work"? Does no styling take place, are images missing, etc.? Are you sure you saved your changes to the CSS file? It seems a file was found at /static/style.css, so presumably there is something there...

answered Dec 01 '11 at 14:56

U-DON

2,102
14
14

CSS are not used by browser. Yes, I'm sure. – artem Dec 01 '11 at 15:02
1

So if you checked the source after loading the page, and viewed /static/style.css, does the correct CSS file show up? – U-DON Dec 01 '11 at 15:14

score 0 · Answer 4 · answered Dec 01 '11 at 14:56

Do u use STATIC_URL or MEDIA_URL to access css? If you are, did u add django.contrib.contenttypes to installed apps in settings? Also check STATICFILES_DIRS and STATIC_ROOT/MEDIA_ROOT in settings. For details look through https://docs.djangoproject.com/en/1.3/ref/contrib/staticfiles/ . Also if you use MEDIA_URL you may try to serve media root in urls, somehow like:

if settings.DEBUG:
urlpatterns += patterns('',        
    (r'^media/(?P<path>.*)$', 'django.views.static.serve', {'document_root': settings.MEDIA_ROOT, 'show_indexes': True}),
)

If I don't use base template, and include this css file to the 'search.html' template directly, it works fine, so, there is no problems with the static files. — artem, Dec 01 '11 at 15:04

Django templates extending and CSS

4 Answers4

Linked