Issue
One of my HTML templates that extends the layout.html template has a CSS file linked to it but when I try to style the HTML content through the CSS file, nothing happens even after reloading. There is already a CSS file linked to the layout.html file but that does not style the page either.
How do I make the style.css file style the new.html file (the page that should be styled)? Or should I make a new CSS file to style the new.html file?
layout.html:
{% load static %}
<head>
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css"
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
<link href="{% static 'encyclopedia/styles.css' %}" rel="stylesheet">
{% block style %}{% endblock %}
</head>
<body>
{% block body %}
{% endblock %}
</body>
new.html:
{% extends "encyclopedia/layout.html" %}
{% load static %}
{% block title %}
New Entry
{% endblock %}
{% block style %}
<link href="{% static 'encyclopedia/new.css' %}" rel="stylesheet">
{% endblock %}
{% block body %}
<form action="">
<input type="text" name="title" class="title" placeholder="Title">
<textarea name="content" class="content" cols="30" rows="10" placeholder="Enter Content"></textarea>
<input type="submit" value="Save" class="save">
</form>
{% endblock %}
style.css:
/* styling for the layout page */
body {
margin: 0;
background-color: white;
}
code {
white-space: pre;
}
h1 {
margin-top: 0px;
padding-top: 20px;
}
textarea {
height: 90vh;
width: 80%;
}
.main {
padding: 10px;
}
.search {
width: 100%;
font-size: 15px;
line-height: 15px;
}
.sidebar {
background-color: #f0f0f0;
height: 100vh;
padding: 20px;
}
.sidebar h2 {
margin-top: 5px;
color: red;
}
/* attempt to style new.html */
.title {
border: 2px solid red;
}
new.css:
.title {
border: 2px solid red;
}
.content {
border: 2px solid blue;
}
Solution
some time css file linked properly but it can't update, just try to update your css file using ?{% now "U" %} at the end of href like
<link href="{% static 'encyclopedia/new.css' %}?{% now "U" %}" rel="stylesheet">
I was face same problem and I use update method that's worked
Answered By - Rana Talha
0 comments:
Post a Comment
Note: Only a member of this blog may post a comment.