3

I work with templates in my application. I have the main part of the website styled in base.html, being the files that always will be the same (header, menu, footer...) properly coded in 'base.html' and also with the styles linked to it (in a link rel="stylesheet").

When I try to use the base template as it is, a base template, it works well while it lets me add content between de {% block content %} and also shows the 'permanent' parts (menu, header etc), but there have no style (CSS) on it. How could I also extend to these stylesheet to load the CSS styles??

Help would be appreciated, thank you.

EDIT 2: Here's my base.html head content:

    <head>
<meta charset="utf-8">
{% load staticfiles %}
<title>{% block title %}Index{% endblock %}</title>
{% block style_base %}
<link href="{% static 'css/styles.css' %}" rel="stylesheet">
{% endblock %}
<meta name="description" content="{% block description %}{% endblock %}">
<link href='https://fonts.googleapis.com/css?family=Roboto+Mono:400,700,300' rel='stylesheet' type='text/css'>
<script src="static/myapp/jquery.min.js" type="text/javascript"></script>
<script src="static/myapp/main.js" type="text/javascript"></script>
</head>

This works on base.html, it gets the correct styles. However, when trying to get the same styles in the common part with another template, it doesn't gets the styles. The template code starts like this:

{% extends "base.html" %}
{% load staticfiles %}
{% load i18n %}
{% include "base.html" %}
{% block title %}{% trans "Main index" %}{% endblock %}
{% block content1 %}

It gets all the correct HTML from base.html but unstyled. I also try delete the 'include' tag or changing its position but there's no result. What can be wrong? Thank you.

Also, the console tells me this:

Not Found: /list/static/myapp/styles.css
[25/Mar/2016 01:03:03] "GET /list/static/myapp/styles.css HTTP/1.1" 404 3414

When I refresh the page (list is the page where there is the template I wanna get the styles from base) it keeps telling me this. List is not a directory in my project, but the /static/myapp/styles.css path is correct. What happens?

Jim
  • 541
  • 1
  • 7
  • 15
  • can you _show_ your base template. – v1k45 Mar 24 '16 at 20:51
  • I've edited the post. Thank you – Jim Mar 24 '16 at 21:53
  • You may look into the url of your static files. While 'http://localhost/static/css' works. 'http://localhost/something/static/css' would not. – ericls Mar 24 '16 at 21:58
  • I don't know if I have understand your answer properly, but I've changed and created a directory named 'css' for css files and changed the URL in base.html. It works well, but the other template (which extends base.html) still doesn't get the styles. Thank you – Jim Mar 24 '16 at 22:24

3 Answers3

2

You have to call the CSS files within the base.html, so when you extend the base.hml in your other pages, the CSS will be called.

For me, I usually do this:

I have Head.html I call all Javascripts and CSS files I am using in the website inside it like this:

for CSS:

<link rel="stylesheet" type="text/css" href="/static/styles/example.css"/>

for javascript:

<script type="text/javascript" src="/static/js/example.js"></script>

then, in each page in the website, after the title tag I include this Head.html like this:

{% include "Head.html" %}

When you do this in every page, the CSS and javascripts files will be seen in all the pages and callable.

Also, the main urls.py file should be like this: "the answer is from here"

urlpatterns = [ # ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
The Maestro
  • 659
  • 1
  • 5
  • 21
  • Yeah, but how I should do that? I should put the code apart from the 'extends base.html' in every other template that extends base.html? What would be the code to call CSS files in base.html? Can't find it.. Thank you. – Jim Mar 24 '16 at 19:32
  • Thank you for your answer. However, while I'm trying it the output still shows the plain text without style. The template I'm trying to link's head looks like: {% extends 'base.html' %} {% load i18n %} {% load staticfiles %} {% block title %}{% trans "Title" %}{% endblock %} {% include "base.html" %} Should it be that way? – Jim Mar 24 '16 at 19:50
  • for me I would call the {% load staticfiles %} in the base.html. Other possibility is the new line in the answer you also can check it. – The Maestro Mar 24 '16 at 20:02
  • Thank you again for your answer but I've tried with no success yet. I've edited the first post with further info. Thank you – Jim Mar 24 '16 at 21:54
0

On top of your html file add this:

{% extends "base.html" %}
arrt_
  • 369
  • 1
  • 6
  • 15
  • On which html file you mean? It is on top of the template I want to link with 'base.html'. It works well, it really extends to the html code on base.html (which is great) but it doesn't pick the styles which is what I want. Any idea on that? Thank you – Jim Mar 24 '16 at 22:29
  • I mean in your template. But you should define your styles in style_base tag. In your base.html write your styles like this: {% block style_base %} {% endblock %} – arrt_ Mar 24 '16 at 22:45
  • Thank you again for your answer. I've changed and added this template tag system to define styles in base.html and it works on base.html (it still has the styles). However in the template I want to extend it still lacks on load the styles. I edit the first post with the first lines of code of my template I wanna link to base.html, hopefully I'll find out what's wrong... thank you again. – Jim Mar 24 '16 at 23:53
0

It should work, maybe the css path is wrong, or try to delete your {%block style_base%}

Lemayzeur
  • 8,297
  • 3
  • 23
  • 50
  • But if the styles work well in 'base.html', the path can't be wrong right? I don't know what else to try, it isn't working... thank you for the answer. – Jim Mar 25 '16 at 07:27
  • I'm just trying it again but the console still shows the same message once and again... why? – Jim Mar 25 '16 at 07:34
  • STATIC_URL = '/static/' STATICFILES_DIRS = [ os.path.join(BASE_DIR, 'static'), ] – Lemayzeur Mar 25 '16 at 09:48
  • In your settings.py file, do you have theses lines like this ? – Lemayzeur Mar 25 '16 at 09:49
  • Have a look here: http://stackoverflow.com/questions/24238496/what-is-the-difference-between-load-staticfiles-and-load-static – Lemayzeur Mar 25 '16 at 10:03
  • Thank you for you answer again. I've added the 'STATICFILES_DIRS' statement, and had a look to the link, but can't understand why the template doesn't extend also to the styles... the console is still showing the same message. Any ideas on what could be wrong here? – Jim Mar 28 '16 at 18:32