[Solved]-Django templates extending and CSS

by

26đź‘Ť

âś…

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?

👤j_syk

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!

👤sparkholiday

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…

👤U-DON

0đź‘Ť

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

Leave a comment