How to add style to base.html: Django framework?

Question

file structure: app/template/base.html app/static/css/base.css

I have created the base.html to contain the header, which I am importing to the other HTML pages to keep it the same throughout the website. And I want to style this header as well, so I am trying to link a base.css to my base.html, but no luck. Things which i have tried are: adding inline css, adding external css,adding internal css, clearing the cache, adding a block.

code in base.html:

    {%load static%}<html>

    <head>
        <meta charset="utf-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <title></title>
        <meta name="description" content="">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <link rel="stylesheet" type="text/css" href="{% static 'static/css/base.css' %}">
   
    </head>
    <body>
    
    <nav>
    
        <button id="myButton" >Home</button>

        <button id="aboutButton" >About</button>

        <button id="contactButton" >Contact</button>
      
</nav>
{% block content %}
{% endblock content %}
<footer>
    <p>this is footer</p>
</footer>

<script type="text/javascript">
    document.getElementById("myButton").onclick = function () {
        location.href = "{% url 'home' %}";
    };
    document.getElementById("aboutButton").onclick = function () {
        location.href = "{% url 'about' %}";
    };
    document.getElementById("contactButton").onclick = function () {
        location.href = "{% url 'contact' %}";
    };
</script>
</body>
</html>

that's my base.html code, which i want to link with base.css:

 .header {
    padding: 60px;
    text-align: center;
    background: #1abc9c;
    color: white;
    
  }
  .button {
    background-color: #4CAF50; /* Green */
    border: none;
    color: white;
    padding: 15px 32px;
    text-align: center;
    text-decoration: none;
    display: inline-block;
    font-size: 16px;
    margin: 4px 2px;
    cursor: pointer;
  }

how i am extending the base.html to other pages is as follows,

home.html which is extending the base.html same navigation bar with other:

{% extends 'base.html' %}
{% load static %}
{% block content %}
<html>
    <head>
        
        <title>Smooth</title>
        
         <link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}"> 
    <!--sample how my other html pages look like-->

I hope i have given a good idea how my file system is, how the code is in my project. now how can i link base.css with the base.html, so that i can style the buttons in header using an external css file.

Answer 1

It depends on your settings, for eg this is how my settings for static files looks like:

STATIC_URL = '/static/'
STATICFILES_DIRS = (
    os.path.join(BASE_DIR, 'static'),
)

and my base.css is located at:

/project_name/static/base.css

So you should check your setting for static files.

You can also try to change your link tag to

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

because if your settings are configured to /app/static/ when u link static like

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

It's looking for /app/static/static/css/base.css instead /app/static/css/base.css

How to add style to base.html: Django framework?

Question

1 answers

solution1
0 2021-05-27 10:27:48

How to add style to base.html: Django framework?

Question

1 answers

solution1 0 2021-05-27 10:27:48

solution1
0 2021-05-27 10:27:48