CODEWITHSUNDEEP
pythonhtmlcssdjangodjango-templates
Lodyne Mark
Lodyne Mark

Reputation: 23

how to load css file in html file already extends another html file (base.html) in django

I'm new to django, so i get difficulty in dealing with django template in relation to adding css file into django template.My code is as follows:

base.html

{% load static %}
<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <link rel="stylesheet" href="{% static 'portfolio/main.css' %}"> {% if title%}
    <title>Django Portfolio - {{title}}</title>
    {% else %}
    <title>Django Portfolio</title>
    {% endif %}
</head>

<body>
    <div class="topnav">
        <a class="active" href="{% url 'portfolio-home' %}">Home</a>
        <a href="{% url 'portfolio-page' %}">Portfolio</a>
        <a href="{% url 'portfolio-about' %}">About</a>
        <a href="#blog">Blog</a>
        <a href="#account">Account</a>
    </div>
    <div class="container">
        {% block content %} {% endblock content %}
    </div>
</body>

</html>

This is my base.html file in which all my other html files inherit it.It works perfectly fine.Note:-I create the static file inside django app and put two static files; main.css and home.css for now. But i want to design homepage, and i av done this with the file known as home.html and use the home.css in static file.My code is as follows:

home.html

{% extends 'portfolio/base.html' %} 
{% load static %}
{% block content %}

    <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" />
    <h1>My homepage</h1>

{% endblock content %}

The problem is, the line <link rel="stylesheet" type="text/css" href=" {% static 'portfolio/home.css' %}" /> does not work. I need help.

Upvotes: 0

Views: 3097

Answers (2)

Tomek r
Tomek r

Reputation: 11

It worked for me:

{% extends 'menu.html' %}
    {% load static %}
  
    <body>
    {% block content %}
    
    
    {% block css %}
    <link rel="stylesheet" type="text/css" href="{% static 'moduleone.css' %}">
    {% endblock %}
    
    
    <div class="jumbotron">Test</div>
    
    {% endblock %}
    </body>
    </html>

Upvotes: 0

HollowA
HollowA

Reputation: 110

<link rel="stylesheet" type="text/css" href="{% static 'portfolio/home.css' %}">

This should work, it's syntactically correct. Are you sure you have your .css file in a folder structure like so: "/APPNAME/static/Portfolio/home.css".

As others have mentioned, you are not including your CSS in the head of the HTML document, it is being placed into the body, inside the {% block content %}.

You need to wrap it in a {% BLOCK CSS %} {% ENDBLOCK %}

{% extends 'portfolio/base.html' %} 
{% load static %}
{% block css %}
<link rel="stylesheet" type="text/css" href="{% static 'portfolio/home.css' %}">
{% endblock %}
{% block content %}

etc...

Upvotes: 1

Related Questions