All of my html and css and files are in the same templates folder so i don't think that is the problem. I am brand new to frontend development and deeply confused... please help, this is not a good start lol!
-- My base.html file --
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<meta http-equiv="X-UA-Compatible" content="ie=edge">
<title>{% block title %}{% endblock %}</title>
<link rel="stylesheet" type="text/css" href="main.css"/>
</head>
<body>
<nav class="navigation_bar">
<ul>
<li>
<b>about page</b>
</li>
</ul>
</nav>
{% block content %}{% endblock %}
</body>
</html>
-- main.css --
#import url('https://fonts.googleapis.com/css?family=Montserrat:400,600');
body {
text-align: center;
font-family: 'Montserrat';
}
.navigation_bar a {
text-decoration: none;
}
Maybe it is an issue with my css? Thank you!
I think the problem here is in your server, I assume you are using Flask since you are writing Jinja syntax in your html file, I think the problem is that Flask can't find your css file. you need to tell it exactly where to look for your static file, or you can just make a router to deal with file requests, read the files and send them back to the browser.
The first way
from flask import Flask, render_template
app = Flask(__name__,
static_url_path='',
static_folder='static',
template_folder='templates')
#app.route('/')
def main_page():
return render_template("index.html")
so now Flask will look for your static files inside the folder "static" you need to create it and then put your static files there including your css file, and leave your html file like it is, don't change the path of your css file to include the folder name since Flask will serve it as if it were in the current directory of the script.
The second way
from flask import Flask, render_template, request, Response
app = Flask(__name__)
#app.route('/')
def main_page():
return render_template("index.html")
#app.route('/css')
def giveCSS():
fileContent = ""
file_name = request.args.get("name")
if(file_name):
file = open("css/" + file_name + ".css", "r")
for line in file:
fileContent += line
return Response(fileContent, mimetype='text/css')
I assume you have other css files, you need to change the path of the css file inside the html file to include the query /css/name=main and the css file inside maybe a folder named "css" of course you can change whatever names you don't like but make sure to take care.
Related
I cant load css file in my web page it just gives me a simple page without css elements as shown in the screenshot and says it cant load local resource Page and inspect elememt
I've loaded the static files in settings
STATIC_URL = '/static/'
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'assets')
]
STATIC_ROOT=os.path.join(BASE_DIR,'assets')
added url
static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
used this in html
{%load static%}
<head>
<meta charset="UTF-8">
<title>LOGIN</title>
<link rel="stylesheet" href="{% static 'assets/styles/style.css' %}">
</head>
also did manage.py collectstatic
followed the docs dont know where i went wrong
You should use a link tag:
<link rel="stylesheet" href="{% static 'assets/styles/style.css' %}">
That is enough to load the file; so you don't need the following:
{% include "assets/styles/style.css" %}
and also, you should change your settings like below if your css file is in BASE_DIR/assets/style.css:
STATICFILES_DIRS=[
os.path.join(BASE_DIR,'assets')
]
I have a full website with HTML and need to add an interactive piece that I could easily write with python (or even c/c++). What can I can use/do to accomplish this? The script will take user input do some calculations and display the output. I am completely lost on where to start, any help is appreciated!
If you want to embed Python in your HTML page the you will have to use a Python based web server which will have HTML form for data input and execute provided Python code as server side script and return you the desired result.
You could start by using Django.
If you want to build a web application with python back-end, then you need to do with a web framework, like Django or Flask. Flask is more easy to use and understandable for beginning level.
Jinja2 is a popular templating engine for Python. A web templating system combines a template with a certain data source to render dynamic web pages.
Flask code:
app.py
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def home():
return render_template("home.html")
if __name__ == "__main__":
app.run(debug=True)
home.html
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="utf-8">
<title>Flask Tutorial</title>
</head>
<body>
<h1> My First Try Using Flask </h1>
<p> Flask is Fun </p>
</body>
</html>
For Run Your First App:
python3 app.py
One way would be to embed Python into a html file using <py-script> tag.
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<title>Hello World!</title>
<!-- linking to PyScript assets -->
<link rel="stylesheet" href="https://pyscript.net/alpha/pyscript.css" />
<script defer src="https://pyscript.net/alpha/pyscript.js"></script>
</head>
<body>
<!-- Put Python code inside the the <py-script> tag -->
<py-script>
print("Hello World!")
input("Enter your name:")
</py-script>
</body>
</html>
Another way could be to embed Python script as a child process (eg: in Node.js):
const { spawn } = require('child_process');
var child = spawn("python", ["-c",`
print("Hi")
print(int(input("Enter a number:")))
`]);
child.stdout.pipe(process.stdout);
child.stderr.pipe(process.stderr);
process.stdin.pipe(child.stdin);
child.on('exit', () => process.exit());
my django project wont find my css file. Spelling is correct, path is correct, lower and upper cases are correct, its linked in the head part. ive been searching for 2 hours now.
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="../src/Templates/style.css">
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<!-- <meta http-equiv="X-UA-Compatible" content="ie=edge">
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.1.1/css/bootstrap.min.css" rel="stylesheet" integrity="sha384-WskhaSGFgHYWDcbwN70/dfYBj47jz9qbsMId/iRN3ewGhXQFZCSftd1LZCfmhktB" crossorigin="anonymous">
-->
<title>Document</title>
<style>
.form-control{
width: 50%;
}
</style>
</head>
<body>
<div class="container" id="thisone">
<h3 class="">BlaBlaBla!</h3>
<h5>{{ message }}</h5>
<form action="" method="post">
{% csrf_token %}
{{ form.as_p }}
<button type="submit" class="btn btn-primary">Submit</button>
</form>
</div>
</body>
is this a stupid fail of mine?
Greetings
Check Your path again,
If it's correct
Follow the Guidelines to Include CSS in Django Project
Static files are intended to wrap CSS files and your images, Django automatically identifies this file.
Create static folder in your app folder, same directory as of migrations and template folder
Create css Folder and insert it into static Folder
Now put your styles.css into css folder
Now in your HTML File where you want to include CSS, add {% load static %} On the top of HTML File and Your Path should be like this <link rel="stylesheet" href="{% static 'css/styles.css' %}"> in HTML file.
Then Make Change To Your settings.py in projectfoldername with-
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR,'static')
]
STATIC_ROOT = os.path.join(BASE_DIR, 'assets')
Then Run this command
python manage.py collectstatic
You static file will be copied to New file created by django as assets.
If it does not reflect changes Refer here If it does not work
According to the official statement "Generally, the templates folder is created and kept in the sample directory where manage.py lives. This templates folder contains all the templates you will create in different Django Apps."
As a Django projects grow in size it's often more convenient to have all the templates in one place rather than hunting for them within multiple apps.
Just as an additional information for the accepted answer's 1."Statement"
Besides, yes you should have your static folder at App-level and it should work!.
I have started a Flask project and to stay organized I would like to have a css file per html file. A lot of the tutorials online have one css file in the /static/styles.css file. When I run the following code, the css does not seem to be used and the terminal of the flask connection gives:
127.0.0.1 - - [01/Nov/2019 20:49:30] "GET /%7B%7B%20url_for('static',%20filename='css/index.css')%20%7D%7D HTTP/1.1" 404 - but it does load the page, just no css. Is there a standard way to have multiple css files in the static directory.
My project structure is:
Dockerfile
docker-compose.yml
venv
app
-> main.py
-> templates
-> index.html
-> static
-> css
-> index.css
My main.py file is :
from flask import Flask, render_template
app = Flask(__name__)
app.config.from_object(__name__)
# Set-up Flask routes.
#app.route('/')
def index():
return render_template('index.html')
My index.html file is:
<!DOCTYPE html>
<html lang="en">
{% block head %}
<head>
<meta charset="utf-8"/>
<title></title>
<link rel="stylesheet" type="test/css" href="{{ url_for('static', filename='css/index.css') }}"/>
</head>
{% endblock %}
<body>
<header>
<div class="container">
<strong><nav>
<ui class="menu">
<li>Home</li>
<li>About</li>
</ul>
</nav></strong>
</header>
My index.css file is:
.menu li {
display: 'inline-block";
border: 2px solid green;
}
A little later, I found the solution for this:
In my/your base.html define a jinja template for the stylesheet so all pages have that as a default but can be overridden.
{% block stylesheet %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/base.css') }}"/>
{% endblock stylesheet %}
Then in another html file say posts.html, the stylesheet tag can be used to change it,
{% block stylesheet %}
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/posts.css') }}"/>
{% endblock stylesheet %}
This allows use of multiple css files. However, this means all css will be overridden and used from the new css so there will be a lot of duplication across files. However, to me this makes it more organized and readable. It is a matter of preference. Good luck
I am creating a website with Django and for some reason my CSS file is having no effect on the page. I have checked to make sure my STATIC_URL is defined but still no luck.
My settings.py:
# Static files (CSS, JavaScript, Images)
# https://docs.djangoproject.com/en/1.11/howto/static-files/
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'static')
Inside of my blog app I have a static directory
blog
|
static
|
css
|
blog.css
My HTML doc:
{% load staticfiles %}
<!DOCTYPE html>
<html lang="en">
<head>
<title>Medicare Supplemental info</title>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1">
<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">
<!-- This is where I'm loading the CSS file -->
<link rel="stylesheet" href="{% static 'css/blog.css' %}">
</head>
I checked to make sure that I have the required app installed in the settings.py:
INSTALLED_APPS = [
'django.contrib.admin',
'django.contrib.auth',
'django.contrib.contenttypes',
'django.contrib.sessions',
'django.contrib.messages',
'django.contrib.staticfiles',
'blog',
]
I have also tried changing the way I load static files from:
{% load staticfiles %}
to:
{% load static %}
Still no luck. What is it I'm doing wrong?
I think you miss this in urls.py:
from django.conf import settings
from django.conf.urls.static import static
urlpatterns = [
# ... the rest of your URLconf goes here ...
] + static(settings.STATIC_URL, document_root=settings.STATIC_ROOT)
This work in dev, in production you must collectstatic with manage.py and serve statics with nginx(or apache).
for django==2.0.2 none of the urls.py changes are necessary, just get STATIC_URL in settings.py right
Run into the same issue, after searching without any solution, I casually pressed Enter in CMD window, and python runserver continued and I found /static/css/blog.css was successfully found.
I had the some problem and the solution that works for me was stop the server using CRTL-BREAK and start again. I am using Django v.3.0.7.
If you are not extending from other html file as in your case then the first entry in your html file should be !DOCTYPE html and then the load template tag i.e {%load staticfiles%}.
For anyone who this after django removed the import of os in the settings file.
Use STATIC_ROOT = BASE_DIR / 'static' instead of os.path......