Logo Questions Linux Laravel Mysql Ubuntu Git Menu
 

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.

like image 536
artem Avatar asked Dec 01 '11 14:12

artem


2 Answers

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?

like image 104
j_syk Avatar answered Oct 16 '22 14:10

j_syk


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!

like image 33
sparkholiday Avatar answered Oct 16 '22 14:10

sparkholiday