Django template extends does not call CSS

Question

I'm working on a project whereas the key is to learn django and python.

There is an issue when I try to use the command {% extends 'base.html' %} to extend the html code and create a new template or a new page even.

It is structured like this; the base.html is the index file or the file I put most of the code that is displayed on the actual website. Then I make templates for each function I want to make. So i wanted to have a signup (submit) template that is loading fine.

This is my base.html:

    <!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="utf-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1">
    <meta name="description" content="">
    <meta name="author" content="">
    <link rel="icon" href="icon/favicon.ico">

    <title>Jumbotron Template for Bootstrap</title>

    <!-- Bootstrap core CSS -->
    <link href="static/css/bootstrap.min.css" rel="stylesheet">

    <!-- Custom styles for this template -->
    <link href="static/css/jumbotron.css" rel="stylesheet">

    <!-- Just for debugging purposes. Don't actually copy these 2 lines! -->
    <!--[if lt IE 9]><script src="static/js/ie8-responsive-file-warning.js"></script><![endif]-->
    <script src="static/js/ie-emulation-modes-warning.js"></script>

    <!-- HTML5 shim and Respond.js for IE8 support of HTML5 elements and media queries -->
    <!--[if lt IE 9]>
      <script src="https://oss.maxcdn.com/html5shiv/3.7.2/html5shiv.min.js"></script>
      <script src="https://oss.maxcdn.com/respond/1.4.2/respond.min.js"></script>
    <![endif]-->
  </head>
  <body>
    <nav class="navbar navbar-inverse navbar-fixed-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">Project name</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <form class="navbar-form navbar-right">
            <div class="form-group">
              <input type="text" placeholder="Email" class="form-control">
            </div>
            <div class="form-group">
              <input type="password" placeholder="Password" class="form-control">
            </div>
            <button type="submit" class="btn btn-success">Sign in</button>
          </form>
        </div><!--/.navbar-collapse -->
      </div>
    </nav>

{% block jumbotron %}{% endblock %}

    <div class="container">
    {% if messages %}
    <div class='row'>
        <div class='col-sm-12 col-sm-offset'>
        {% for message in messages %}
        <p{% if message.tags == "success" %} class="alert alert-success" {% endif %}>{{ message }}</p>
        {% endfor %}
        </div>
    </div>
  {% endif %}

    <div class="row">
        {% block content%}{% endblock %}
    </div>
    <hr>
    <footer>
        <p>&copy; Copyright 2014</p>
    </footer>
    </div> <!-- /container -->

    <!-- Bootstrap core JavaScript
    ================================================== -->
    <!-- Placed at the end of the document so the pages load faster -->
    <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
    <script src="static/js/bootstrap.min.js"></script>
    <!-- IE10 viewport hack for Surface/desktop Windows 8 bug -->
    <script src="static/js/ie10-viewport-bug-workaround.js"></script>
  </body>
</html>

There is also my url.py:

from django.conf.urls import patterns, include, url

from django.conf import settings
from django.conf.urls.static import static

from django.contrib import admin
admin.autodiscover()

urlpatterns = patterns('',
    # Examples:
    url(r'^$', 'signups.views.home', name='home'),
    # url(r'^blog/', include('blog.urls')),
    url(r'^thank-you/$', 'signups.views.thankyou', name='thankyou'),
    url(r'^about-us/$', 'signups.views.aboutus', name='aboutus'),
    url(r'^admin/', include(admin.site.urls)),
)

if settings.DEBUG:
    urlpatterns += static(settings.STATIC_URL,
                          document_root=settings.STATIC_ROOT)
    urlpatterns += static(settings.MEDIA_URL,
                          document_root=settings.MEDIA_ROOT)

And the view.py:

from django.shortcuts import render, render_to_response, RequestContext, HttpResponseRedirect
from django.contrib import messages

# Create your views here.

from .forms import SignUpForm

def home(request):

    form =SignUpForm(request.POST or None)

    if form.is_valid():
        save_it = form.save(commit=False)
        save_it.save()
        messages.success(request, 'Thank you for joining! We will be in touch with you as soon as possible:) ')
        return HttpResponseRedirect('/thank-you/')

    return render_to_response("signup.html", locals(), context_instance=RequestContext(request))


def thankyou(request):

    return render_to_response("thankyou.html", locals(), context_instance=RequestContext(request))

def aboutus(request):

    return render_to_response("aboutus.html", locals(), context_instance=RequestContext(request))

Here is my signup.html template that is working (i.e it is calling the CSS as intended).

{% extends 'base.html' %}

{% block jumbotron %}

       <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>Hello, world!</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

{% endblock %}    

{% block content %}

        <div class="col-sm-3">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-block btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-sm-3">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-block btn-primary" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-sm-3">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-block btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>


        <div class="col-sm-3">
    <h2>Join Now</h2>  
    <form method='POST' action=''> {% csrf_token %}
        {{form.as_p }}    
        <input type='submit' class='btn btn-success btn-block'>
    </form>
        </div>


{% endblock %}

Now when a visitor comes to the website they are able to "join", they enter name, and email and are redirected to a new page that says "thank you" and all. This thankyou page does NOT call the CSS as intended. It just shows as plain HTML with now formatting at all (apart from h1, h2 etc. of course). The thankyou.html template looks like this:

{% extends 'base.html' %}



{% block content %}

<div class='col-sm-12' style='text-align: center'>
<h1>Thank you for joining!</h1>
</div>


{% endblock %}

And Finally I tried to create an AboutUs page just to see if the CSS would get called to that one, but no luck here either. The same happens with the AboutUs page as it does with the thankyou page. The aboutus.html template looks like this:

{% extends 'base.html' %}

{% block jumbotron %}

       <!-- Main jumbotron for a primary marketing message or call to action -->
    <div class="jumbotron">
      <div class="container">
        <h1>This is Us</h1>
        <p>This is a template for a simple marketing or informational website. It includes a large callout called a jumbotron and three supporting pieces of content. Use it as a starting point to create something more unique.</p>
        <p><a class="btn btn-primary btn-lg" href="#" role="button">Learn more &raquo;</a></p>
      </div>
    </div>

{% endblock %}    

{% block content %}

        <div class="col-sm-3">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-block btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>
        <div class="col-sm-3">
          <h2>Heading</h2>
          <p>Donec id elit non mi porta gravida at eget metus. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus. Etiam porta sem malesuada magna mollis euismod. Donec sed odio dui. </p>
          <p><a class="btn btn-block btn-primary" href="#" role="button">View details &raquo;</a></p>
       </div>
        <div class="col-sm-3">
          <h2>Heading</h2>
          <p>Donec sed odio dui. Cras justo odio, dapibus ac facilisis in, egestas eget quam. Vestibulum id ligula porta felis euismod semper. Fusce dapibus, tellus ac cursus commodo, tortor mauris condimentum nibh, ut fermentum massa justo sit amet risus.</p>
          <p><a class="btn btn-block btn-primary" href="#" role="button">View details &raquo;</a></p>
        </div>


        <div class="col-sm-3">
    <h2>Join Now</h2>  
    <form method='POST' action=''> {% csrf_token %}
        {{form.as_p }}    
        <input type='submit' class='btn btn-success btn-block'>
    </form>
        </div>


{% endblock %}

I have tried:

adding {% load static %}
doing it all over again
copying the "working" code from the signup.html and change it

I'm not yet able to debug code myself but I think there might be a problem in the url.py but I can't figure it out really. I could be in the blue on this.

Thank you so much for your awesome help and time!

Best,

Robin

Daniel Roseman · Accepted Answer

Your stylesheet links are all relative URLs, where they should be absolute:

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

note the initial slash.

You should though be using the static tag, after doing load static:

<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet">

Django template extends does not call CSS

Tags:

python

html

css

django

django-templates

wiro

1 Answers

Daniel Roseman

Recent Activity

Donate For Us

Django template extends does not call CSS

Tags:

python

html

css

django

django-templates

wiro

1 Answers

Daniel Roseman

Related questions

Recent Activity

Donate For Us