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.
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?
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!
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With