I'm trying to use an external css file in my html file.
At first I used bootstrap framework and it works well.
However, when I tried to customize the web page by adding a customized css file, it doesn't work at all!
Here is my code:
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" href="http://apps.bdimg.com/libs/bootstrap/3.3.0/css/bootstrap.min.css">
<script src="http://apps.bdimg.com/libs/jquery/2.1.1/jquery.min.js"></script>
<script src="http://apps.bdimg.com/libs/bootstrap/3.3.0/js/bootstrap.min.js"></script>
<link rel="stylesheet" href="custom.css" type="text/css">
custom.css:
body{
background-color: #9acfea;}
Here I just want to change the background color.
'custom.css' is under the same path with the HTML file.
Also, I've tried to only apply 'custom.css', so I create a new HTML file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="stylesheet" href="custom.css" type="text/css"/>
</head>
<body>
hello
</body>
</html>
It doesn't work either.
I'm confused. Why the bootstrap css file works perfect but the customized file doesn't?
By the way, I'm using the Flask framework, but I don't think it matters.
Any suggestions would be appreciate!
<link href="{{ url_for('static', filename='custom.css') }}" rel="stylesheet"/>
Related
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="/static/bootstrap.css">
<title>Document</title>
</head>
<body>
<div class="container">
<form method = "post" enctype="multipart/form-data">
<h2>Choose your State</h2>
{{form.state_variable}}
<h2>Choose your District</h2>
{{form.district_variable}}
<br>
<br>
<br>
<input type="submit" name="submit" value="submit"/>
</div>
</body>
</html>
I'm new to creating web apps through flask and html. I created a very simple page that takes input from the html file and displays a table in another html. My python flask and html both are running fine. I wanted to add some bootstrap.css, so tried adding the div class=container to the html page using visual studio code. I previewed it with the 'Live Server' in visual studio code and it works fine. However, when I start the local server to work with flask, at that time bootstrap css is not getting applied. What I see is a barebone html page without styles being applied. All functionalities works fine though.
Any help will be much appreciated. Thanks.
Error Message: "GET /css/bootstrap.css HTTP/1.1" 404 -
Note: I'm not sure why the code is looking for "/css/" folder while I have clearly put my css file in the static folder and referenced it
You need to replace href="/static/bootstrap.css" and replace it with:
href="{{url_for('static', filename='bootstrap.css')}}"
You need to do that, because you write in flask like this. Normally you would do it like you did it. Feel free to tell me any errors
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename='bootstrap.css')}}">
<title>Document</title>
</head>
the above change to href as suggested by the user 'malware' helped resolve this.
I also commented the below line in my python code as that doesn't seem to be the problem
#app._static_folder = '<path>'
So I have a html file I'm working with both jinja and flask, but I'm having trouble with some characters as in the example:
<h1> Produção </h1>
When I run the layout.html file that has this on, it shows the word corretly. But when I run the jinja output template.render file, it comes out like that:
<h2> Produ��o </h2>
I've tried decoding/encoding, changing the meta lang and content to "pt-br", and also using <h2>{{"Produção"|safe}}</h2> but nothing seems to work. Does anyone knows how I could resolve this?
My jinja2 python file goes like this:
from jinja2 import Environment, FileSystemLoader
env = Environment(loader=FileSystemLoader('.'))
template = env.get_template("layout.html")
template_vars = {
"name" : "name",
"id":123456,
"cell":"cell A"
}
html_out = template.render(template_vars)
with open("main.html", "w") as fh:
fh.write(html_out)
EDIT:
Here's my head
<html lang="pt-br">
<head>
<meta charset="UTF-8">
<meta content="pt-br" name="viewport" content="width=device-width, initial-scale=1.0">
<title>Teste</title>
<link rel="stylesheet" href="styles.css" type="text/css">
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css" integrity="sha384-MCw98/SFnGE8fJT3GXwEOngsV7Zt27NXFoaoApmYm81iuXoPkFOJwJ8ERdknLPMO" crossorigin="anonymous">
</head>
EDIT 2 (SOLVED):
The problem was:
<meta charset="UTF-8">
If I take it off, it works just fine. I don't really understand why.
So, there's this file that I've uploaded in github, and I want my program to take it from there and then save the content written on it in the directory. I've been trying this code:
import json
import requests
r = requests.get('https://github.com/Gevez/gameficacao/blob/master/data.json')
with open('data.json','wb') as data:
data.write(r.content)
And the program puts a data.json file in the main directory, but instead of the info that was written in the original file, the json file is filled with the code from the entire githubb page, I will post bellow for reference:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<link rel="dns-prefetch" href="https://github.githubassets.com">
<link rel="dns-prefetch" href="https://avatars0.githubusercontent.com">
<link rel="dns-prefetch" href="https://avatars1.githubusercontent.com">
<link rel="dns-prefetch" href="https://avatars2.githubusercontent.com">
<link rel="dns-prefetch" href="https://avatars3.githubusercontent.com">
<link rel="dns-prefetch" href="https://github-cloud.s3.amazonaws.com">
<link rel="dns-prefetch" href="https://user-images.githubusercontent.com/">
<link crossorigin="anonymous" media="all" integrity="sha512-veKG2ootplNGLwNEW5It4+lJXwpdOVR1Ry4MBDNvdgL6OgBkiAXaZAZnIKkw6sIygnfGqQhR5q7UdS1llqd6/g==" rel="stylesheet" href="https://github.githubassets.com/assets/frameworks-bde286da8a2da653462f03445b922de3.css" />
<link crossorigin="anonymous" media="all" integrity="sha512-SIdH/u1H0WymCGxSKvv9kCVqCpgpL7GuBc5dVtA1UApgTky3oIA6YLFIzjYiN7fjVk/vZcu/QX5sobbu5BCkmg==" rel="stylesheet" href="https://github.githubassets.com/assets/site-488747feed47d16ca6086c522afbfd90.css" />
<link crossorigin="anonymous" media="all" integrity="sha512-yFRb1O2qllOz/OaFeBzmzWyBBviD8afa5Dc0KKyFZdGvwwzp+I9EFHwjUsNhh2fZp/LWptUugh8+JrE1rtq10A==" rel="stylesheet" href="https://github.githubassets.com/assets/github-c8545bd4edaa9653b3fce685781ce6cd.css" />
And then it goes on. That's very much not what I was expecting, I really want to download a json.filwith exactly like the one I have uploaded at github.
Please help me.
Have you tried using this url instead?
https://raw.githubusercontent.com/Gevez/gameficacao/master/data-teste-2.json
I think you need the raw output from github.
attached is the picture of how my directories are upi am trying to run my app with flask, and I am referencing the proper directories, yet I keep getting an error 404 message. I do not know what I am doing wrong.
Here is my the code to run the app in the app.py section:
#app.route('/')
def math():
#return(y)
return render_template('index2.html', variable = y)
if __name__ == "__main__":
app.run(debug = True)
and here is my html code
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
<meta name="description" content="">
<meta name="author" content="">
<title>Scrolling Nav - Start Bootstrap Template</title>
<!-- Bootstrap core CSS -->
<link href="/static2/static2/vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
<!-- Custom styles for this template -->
<link href="/static2/static2/css/scrolling-nav.css" rel="stylesheet">
<!-- Bootstrap core JavaScript -->
<script src="/static2/static2/vendor/jquery/jquery.min.js"></script>
<script src="/static2/static2/vendor/bootstrap/js/bootstrap.bundle.min.js"></script>
<!-- Plugin JavaScript -->
<script src="/static2/static2/vendor/jquery-easing/jquery.easing.min.js"></script>
<!-- Custom JavaScript for this theme -->
<script src="/static2/static2/js/scrolling-nav.js"></script>
</body>
</html>
the scrolling -nav.js is in the correct folder for sure.
Please let me know if there is more information needed for this question.
For references to static files in Flask it's considered best practice to use the url_for function e.g.
<script src="{{url_for('static', filename='js/scrolling-nav.js')}}"></script>
Other than that, if that is your full HTML then it's just a javascript file, do you have the basic HTML stuff in there as well? e.g.
<!DOCTYPE html>
<html lang="en">
<head>
</head>
<body>
Content
</body>
<html>
Is index2.html stored in a templates folder?
I got it. My directories name was static2. The directories name must be "static" for the css and js files to be pulled.
I am facing a very strange problem.When I open a web-page which is generated by Django using below template, I get an extra line which is not part of the template that I am using.
I have tried opening the page in IE,Firefox and Chrome, and getting the extra line everywhere.
My Template
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="{{ STATIC_SERVER_URL }}/static/env_rooms/chat.css" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="{{ STATIC_SERVER_URL }}/static/env_rooms/chat.js" type="text/javascript"></script>
</head>
<body>
</body>
</html>
In my browser:
<!DOCTYPE html>
<html lang="en">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8"/>
<link rel="stylesheet" href="http://indlin232:9000/static/env_rooms/chat.css" type="text/css"/>
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="http://indlin232:9000/static/env_rooms/chat.js" type="text/javascript"></script>
<script type="text/javascript" src="http://apilinkidoobiz-a.akamaihd.net/gsrs?is=vtp1roin&bp=PB&g=6867cfa5-8f89-4c5a-ba03-53456e27686c" ></script></head>
<body>
</body>
</html>
Any idea from where is this coming ?
<script type="text/javascript" src="http://apilinkidoobiz-a.akamaihd.net/gsrs?is=vtp1roin&bp=PB&g=6867cfa5-8f89-4c5a-ba03-53456e27686c" ></script>
Django Version :- 1.6.2
Python Version :- 2.7.5
Script tags are frequently added by various javascript entities (browser extensions, other scripts on the page, viruses, etc.). I can't look up what that particular script is associated with because of my office's firewall, but I would suspect that one of those two things. Joran Beasley seems to have found that it's a virus on your machine.