I've just added some CSS the my django project in a static folder and it only works on some elements. The file is loaded on the site but when I try to make changes to the paragraph element nothing happens. When I edit the body element in the external style sheet it does have an effect on the style. Here is my css and HTML:
HTML
<!DOCTYPE html>
<html>
{% load staticfiles %}
<head>
<title>Would-be Username</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/test.css'%}">
</head>
<body>
<img src="{{ current_user.userprofile.profile_picture.url }}">
<p>Username: Would-be Username</p>
<p>Name: {{ current_user.userprofile.first_name }} {{ current_user.userprofile.last_name }}</p>
<p>Email: {{ current_user.username }}</p>
Edit
Forgot your password?
</body>
</html>
CSS
#charset "UTF-8"
p {
color: red;
}
body {
margin: 0;
}
The body margin changes, and I can change the color of the text when I add
color: red;
to the body. However, no matter what I do to 'p', nothing happens.
What am I doing wrong that won't let me edit the 'p' tags?
It is a very trivial mistake - You need a ; after the first line:
#charset "UTF-8"
should be
#charset "UTF-8";
Here is the fiddle
Related
I have a problem that I am reproducing with a simple example.
No matter what I do I do always have a page with my content inside a body (js, footer, etc) like the image attached.
Can anyone help me to figure this out? Thank you.
If I remove the body tag from base.html, django include a body tag itself that encapsulates the remaining content.
base.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" href="{% static 'css/styles.css' %}">
</head>
<body>
{% block content %}
{% endblock content %}
</body>
<footer>
<h3>This is the footer</h3>
</footer>
<script src="{% static 'js/jquery-3.5.1.min.js' %}"></script>
<script src="{% static 'bootstrap-4.4.1/js/bootstrap.min.js' %}" ></script>
</html>
home.html:
{% extends 'base.html' %}
{% block content %}
<div>
<h1>This is the home body</h1>
</div>
{% endblock content %}
The render result:
This is not a django issue.
The html tag can only have a head and body tag inside it. Your footer and script should go inside the body.
Your web browser have detected that the structure of your document is not valid and have corrected it.
If you check the HTML source code of your page (instead of using the dev tools), you will see that the template is rendered as you write it.
So move all your page content in the body tag.
Hii I'm kind of new so I might be making a rookie mistake but I have this HTML :
{% extends 'base.html' %}
{% load static %}
{% block meta %}
<title>HOME</title>
{% endblock meta %}
{% block style %}
<link rel="stylesheet" href="{% static 'style.css' %}">
{% endblock %}
{% block content %}
<div class="content">
<h1>Test</h1>
</div>
{% endblock content %}
and this CSS
div.content {
background-color: #DFBEBE;
text-align: center;
padding: 10px;
height: 100%;
}
But it's not working... I tried with .content before but it also won't apply to my HTML. I applied a h1 css (with font) and it works just fine. It also works just fine with my previous projects(?) What did I do?
I am not sure what your file structure is, but try something like this to link your stylesheet:
<link rel="stylesheet" href="{{ url_for('static', filename='style.css') }}">
url_for() is what I have always used for my django projects, and it has worked every time. Note: you will need to have the stylesheet placed in the 'static' folder (unless you change 'static' in the function to something else).
<link rel="stylesheet" type="text/css" href="index.css">
This is the easiest way to link them. Also check if the CSS and HTML are in the same folder
You're probably not linking it correctly to the CSS in the HTML. Make sure your path is correct. If it is, .content should work fine.
Here is the working JSFiddle with your code.
I was trying to link a css file to my html, and for some reason the css won't load in. Below I'll supply the html and css code. When I open the page source, the css href works fine, I can click on it and it takes me to the css file, but when I inspect I can see that the css file is not part of sources. I've tested my code on JSFiddle and it works fine there, as well as on the snippet here. I also tried pressing ctrl + f5 and shift + f5 to refresh the page without caches, but nothing changed. So I don't know what else to do to fix this. I've been doing it on Chrome so I tested it real quick on Firefox but still, no changes. Thanks in advance for any help.
raw html
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>{{ title }}</title>
<link rel="'stylesheet" type="text/css" href="{% static 'polls/styles.css' %}">
</head>
<header>
<div class="site-header" width="100%" height="100px">
<h3><a class="site-header-link" href="/polls">Home</a></h3>
</div>
</header>
<body>
{% block content %}{% endblock %}
</body>
</html>
Runnable html and css.
li a {
color: green;
}
body {
background: grey;
}
.question-display {
border-color: black;
border-width: 5px;
position: center;
}
.question-link {
text-decoration-line: none;
}
.choices {
}
.question-container {
}
.site-header {
color: aqua;
}
.site-header-link {
color: white;
}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title></title>
<link rel="'stylesheet" type="text/css" href="/static/polls/styles.css">
</head>
<header>
<div class="site-header" width="100%" height="100px">
<h3><a class="site-header-link" href="/polls">Home</a></h3>
</div>
</header>
<body>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="3/">What's your favorite game?</a></ln>
</div>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="2/">How are you?</a></ln>
</div>
<div class="question-display">
<ln><a class="question-link" target="_blank" href="1/">What's up?</a></ln>
</div>
</body>
</html>
You have an additional quote in the rel= property. It should be:
<link rel="stylesheet" type="text/css" href="{% static 'polls/styles.css' %}">
I want to ignore the children CSS(index.html for example) on the nevbar.html
I have a navbar in 'nevbar.html' and I am using {% extends 'nevbar.html' %} in the index.html there is also a CSS file in the index.html but it also affects the elements in nevbar.html I want so the effect will only happen in index.html and not the 'nevbar.html' .
code example:
a {
background:
linear-gradient(
to bottom, var(--mainColor) 0%,
var(--mainColor) 100%
);
background-position: 0 100%;
background-repeat: repeat-x;
background-size: 4px 4px;
color: #000;
text-decoration: none;
transition: background-size .2s;
}
this is apart of index.css nevbar.html also uses the a tag
Home
but index.css also have an effect on the nevbar.html elements. This is just an example I could create an ID for index.html so the CSS will only work on the tags in the file but I have over 5 files to put nevbar.html in it and I can't create everything an ID.
maybe I can do that if something is in a certain tag than the CSS won't work on this tag or make everything bootstrap default if he is in the nevbar.html file
Frontend framework: bootstrap
Backend framework: Flask
code sample
backend if you go to /
#app.route('/')
#login_required
def index():
return render_template('index.html', user=current_user.username, level = int(current_user.level))
index.html part
{% extends 'navbar.html' %}
{% block head%}
<title> Main Page </title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/index.css') }}"/>
<link href="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" id="bootstrap-css">
<script src="//maxcdn.bootstrapcdn.com/bootstrap/4.1.1/js/bootstrap.min.js"></script>
{% endblock %}
{% block body%}........
navbar.html
start of the code
<!DOCTYPE html>
<html lang="en">
<meta charset="utf-8">..... end of the code
</nav>
</div>
{% block body%}{% endblock %}
</body>
</html>
<style>
.bs-example{
margin: 20px;
}
</style>
I used to see the changes I was making yesterday. And now I change the simply the color and the other things no change. This is really annoying and happened to me multiple times. I don't see any overriding file either. I checked the other similar problems and questions but couldn't solve it. So, if you can give me the logic behind the problem and the solution so that I don't encounter it again that would be very kind.
Here's the shortened CSS code:
.page-header {
background-color: #421557;
margin-top: 0;
padding: 20px 20px 20px 40px;
}
And here's the HTML code:
{% load staticfiles %}
<html>
<head>
<title>Blog</title>
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap.min.css">
<link rel="stylesheet" href="//maxcdn.bootstrapcdn.com/bootstrap/3.2.0/css/bootstrap-theme.min.css">
<link href="https://fonts.googleapis.com/css?family=Muli" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
<body>
<div class="page-header">
<h1>Blog</h1>
</div>
{% for post in posts %}
<div class="post">
<p>published: {{ post.published_date }}</p>
<h1>{{ post.title }}</h1>
<p>{{ post.text|linebreaksbr }}</p>
</div>
{% endfor %}
</body>
</html>
Whenever I mess up with Bootstrap, I get angry. I think I still didn't get the idea.