CODEWITHSUNDEEP
pythonhtmlcssdjango
Yamin Himani
Yamin Himani

Reputation: 77

How to change some stuff from the css file for my form?

I have a file that extends my base HTML file and this file contains a form. I want to create a margin for the form and also change the color of the submit button and form text box to match the theme of my website. How do I go about doing this in my CSS file? As of now, the margin does not seem to be working and I am also not sure how I would change the color as I mentioned earlier.

search.html file

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

  <body>

    {% block content %}

        <container >  
        <center>
            <form action="/searchoutput/" method="post">
              {% csrf_token %}
              Input Text:
              <input type="text" name="param" required> <br><br>
              {{data_external}}<br><br>
              {{data}}
              <br><br>
              <input type="submit" value="Check for Service">

              </form>
        </container>
        </center>
    {% endblock %}


  </body>

form.css file

form {
 margin-top: 200px;
}

base.html

{%load static%}
<!DOCTYPE html>
<html>
<head>
<title>TweetyBird</title>


    <meta charset="utf-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
    <link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/css/bootstrap.min.css" integrity="sha384-ggOyR0iXCbMQv3Xipma34MD+dH/1fQ784/j6cY/iJTQUOhcWr7x9JvoRxT2MZw1T" crossorigin="anonymous">
    <link rel="stylesheet" type= "text/css"  href="{% static 'css/main.css' %}" >
    <script src="https://code.jquery.com/jquery-3.3.1.slim.min.js" integrity="sha384-q8i/X+965DzO0rT7abK41JStQIAqVgRVzpbzo5smXKp4YfRvH+8abtTE1Pi6jizo" crossorigin="anonymous"></script>
    <script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.14.7/umd/popper.min.js" integrity="sha384-UO2eT0CpHqdSJQ6hJty5KVphtPhzWj9WO1clHTMGa3JDZwrnQq4sF86dIHNDz0W1" crossorigin="anonymous"></script>
    <script src="https://stackpath.bootstrapcdn.com/bootstrap/4.3.1/js/bootstrap.min.js" integrity="sha384-JjSmVgyd0p3pXB1rRibZUAYoIIy6OrQ6VrjIEaFf/nJGzIxFDsf4x0xIM+B07jRM" crossorigin="anonymous"></script>



  </head>
 
</head>
<body>
  <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
    <a class="navbar-brand" href="/">TweetyBird</a>
    <button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarText" aria-controls="navbarText" aria-expanded="false" aria-label="Toggle navigation">
      <span class="navbar-toggler-icon"></span>
    </button>
    <div class="collapse navbar-collapse" id="navbarText">
      <ul class="navbar-nav mr-auto">
        <li class="nav-item active">
          <a class="nav-link" href="/search">Search by Tweet <span class="sr-only">(current)</span></a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">Twitter Bot</a>
        </li>
        <li class="nav-item">
          <a class="nav-link" href="#">To be added</a>
        </li>
      </ul>
    </div>

  </nav>
  {% block content %}
  {% endblock %}

</body>
</html>

main.css

body 
{
background-color: lightblue;
}

Upvotes: 0

Views: 50

Answers (1)

Sarthak
Sarthak

Reputation: 1168

Add a block tag in your base.html ({%block staticfiles%}) just below your head tag.

Now in search.html add your css inside the staticfiles block.

Since you have extended base.html only the block content of search.html would be replaced with the content inside base.html's block

Since your link tag is outside the block hence that css would not even be picked up.

Also its better to use the body tag in base.html instead of search.html

Upvotes: 1

Related Questions