Django templates extending and CSS

问题

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.

回答1:

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?

回答2:

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!

回答3:

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...

回答4:

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}),
)

来源：https://stackoverflow.com/questions/8343176/django-templates-extending-and-css

标签

python

django

django-templates