Sorry for asking such a basic question, but I'm stuck and can't figure out what I am doing wrong. I am developing a small website using Flask, teaching myself web coding along the way.
I have the following file structure:
mathsoc
mathsoc.py
mathsoc/templates
mathsoc.css
mathsoc_main.html
My mathsoc.py looks like this:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('mathsoc_main.html')
if __name__ == "__main__":
app.run(debug=True)
Then mathsoc_main.html looks like this:
<!DOCTYPE html>
<html lang="en">
<head>
<link rel="stylesheet" type="text/css" href="mathsoc.css"/>
<title>Some Title</title>
</head>
<body>
<div id="content">
Hello World!
</div>
</body>
</html>
And mathsoc.css looks like this:
#content {
width:46em;
background-color: yellow;
}
But mathsoc_main.html cannot find the stylesheet, it appears: it does not apply either of the defined properties to the content. I'm guessing that I'm doing something wrong with <link rel="stylesheet" type="text/css" href="mathsoc.css"/>, but I don't know what. It seems so blindingly obvious, yet no style is loaded!
Change your folder structure to include a static folder.
mathsoc
mathsoc.py
templates
mathsoc_main.html
static
mathsoc.css
See http://flask.pocoo.org/docs/0.10/tutorial/folders/
Related
Hi i am trying to host a server my raspberry pi with flask but css does not work. It shows plain html. when i try the same thing with same file names, location and same code it works but from my raspberry pi it does not work?
To Fix I Tried (so don't bother saying):
Tried using static or normal way
Tried doing cmd+shift+R
Tried changing file names
HTML:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel="stylesheet" href="{{ url_for('static', filename='styles.css') }}">
</head>
<html>
FLASK:
from flask import Flask, render_template
app = Flask(__name__)
#app.route("/")
def main_page():
return render_template('learn.html')
TREE VIEW:
Thank You So Much If You Can Fix It.
turns out i have made a typo i didnt notice it for hours my looked like this
<link rel="stylesheet" href=""{{ url_for('static', filename='styles.css') }}>
This is how it works:
<!DOCTYPE html>
<html>
<head>
<title>THD</title>
<link rel= "stylesheet" type= "text/css" href= "static/styles.css">
</head>
<html>
You have to call the relative path to the css file
Do this:
<link rel="stylesheet" href="../static/styles.css/">
You need to get out to templates folder with .. and then put path to styles.css
Hope this helps!
I was following a tutorial on YouTube for flask web app creation and now am stuck...Does anyone know why the CKEditor CDN script doesn't work for me?
Code:
<!DOCTYPE html>
<html lang="en">
<head>
<script src="https://cdn.ckeditor.com/4.14.1/standard/ckeditor.js"></script>
</head>
<body>
<script type="text/javascript">
CKEDITOR.replace('editor')
</script>
</body>
</html>
So the problem was, that the CKEditor CDN script got tangled in another self-closing script
Well, the problem is that you don't define Textarea in HTML tags so where from CKEditor find id which name is the editor.
like
<textarea id="editor"></textarea>
I have a server in Flask and I try created PWA with React. I am totally new in web development.
I created a Flask server, REST api too and something like a react projects but when I tried create something for front-end its not working. In my opinion file index.html have not included React.
This is my server.py:
api = Api(app)
#app.route('/')
def index():
return render_template("roos/public/index.html")
if __name__ == '__main__':
app.run(port='8080')
I run server with command: python server.py
And it's works - when I use webbrowser -> 127.0.0.0:8080 I have a white page
This is works.
In roos I have this directories, with files:
-ROOS
|-node_modules
|-(many hundred directory)
|-public
|- favicon.ico
|- index.html
|-manifest.json
|-src
|-App.css
|-App.js
|-App.test.js
|-index.css
|-index.js
|-logo.svg
|-serviceWorker.js
-package.json
-package-lock.json
My file, index.html look like:
<html lang="en">
<head>
<meta charset="utf-8" />
<link rel="shortcut icon" href="%PUBLIC_URL%/favicon.ico" />
<meta name="viewport" content="width=device-width, initial-scale=1" />
<meta name="theme-color" content="#000000" />
<link rel="manifest" href="%PUBLIC_URL%/manifest.json" />
<title>ROOS</title>
</head>
<body>
<noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root"></div>
</body>
</html>
And file index.js
import React from 'react';
import ReactDOM from 'react-dom';
import './index.css';
import App from './App';
import * as serviceWorker from './serviceWorker';
ReactDOM.render(<App/>, document.getElementById('root'));
serviceWorker.unregister();
And this not working - I can't run any scripts which I created in this file. In my opinion index.js is not call when I run the server. I don't have idea how I can start this .js scripts
This question already has answers here:
CSS file not refreshing in browser
(15 answers)
Closed 5 years ago.
Here is my project hierarchy:
Project
Here is my HTML file :
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Hello World</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='custom.css') }}"/>
</head>
<body>
<h1>Hello World</h1>
</body>
</html>
My .py flask file :
from flask import Flask, render_template, redirect, json, url_for, request, abort
from pymongo import MongoClient
client = MongoClient()
db = client.web_zoo
app = Flask(__name__)
#app.route('/')
def index():
return render_template('home.html')
if __name__ == "__main__":
app.run(debug=True)
And my CSS file :
body {
color: green;
}
h1 {
color: orange;
}
The HTML and .py files work fine and the HTML is rendered and displayed on the page. However the CSS doesn't change. It just displays it in normal black text.
NOTE : All those imports are there as I was doing something else. I stripped off everything else and still have this problem.
I can link bootstrap to it, and the CSS works, but not for my own CSS files.
I have looked at and tried these following solutions :
CSS Problems with Flask Web App
Application not picking up .css file (flask/python)
best way to override bootstrap css
It's probably quite obvious but I'm stuck. Any help? Thanks in advance!
EDIT - I have added a picture of the project hierarchy now instead of just a list. As you can see there are some other HTML files in there too, but none are used nor referenced.
Try
CTRL+SHIFT+R
in Chrome to reload the CSS.
On Mac try:
CMD+SHIFT+R
Otherwise right-click on the page in Chrome, select Inspect and select the Console tab to see what errors you get.
I'm using webfaction as a webhost. I'm trying to serve my cherrypy application a css file but something isn't working. I've got my python application in
home/webapps/spotipy
and my css file in
home/webapps/spotipy/css
At the top of my python code I've got
#!/usr/local/bin/python3.2
import cherrypy
class Root(object):
#cherrypy.expose
def index(self):
return '''<html>
<head>
<title>Spoti.py</title>
<link rel="stylesheet" href="css/my_css.css" type="text/css" />
</head>
<p> hi </p>
<body>
<p> hi joey </p>
%s
</body></html>''' %text
And this at the bottom
cherrypy.quickstart(Root(),config={
'/css':
{ 'tools.staticdir.on':True,
'tools.staticdir.dir':"home/webapps/spotipy/css"
},
'/my_css.css':
{ 'tools.staticfile.on':True,
'tools.staticfile.filename':"home/webapps/spotipy/css/my_css.css"
}
})
This is a complete working example below in addition to zero323 answer. Change the shebang and run it in your /home/webapps/spotipy directory.
If it does not work, there may be browser cache issue so refresh your page with Ctrl+F5.
You can check if the css file is loaded correctly by pressing Ctrl+U to see the page source and click to see the pointing css links. If everything seems normal and still your css file does not apply on your page, it may be a css issue.
#!/usr/bin/python
import os
import cherrypy
class Root(object):
#cherrypy.expose
def index(self):
text="dummy text"
return '''<html>
<head>
<title>Spoti.py</title>
<link rel="stylesheet" href="/css/my_css.css" type="text/css" />
<link rel="stylesheet" href="/joey_css.css" type="text/css" />
</head>
<p> hi </p>
<body>
<p> hi joey </p>
%s
</body></html>''' %text
conf={"/css": {"tools.staticdir.on": True,
"tools.staticdir.dir": os.path.abspath("./css"),},
'/joey_css.css':
{ 'tools.staticfile.on':True,
'tools.staticfile.filename': os.path.abspath("./css/my_css.css"),
}
}
cherrypy.quickstart(Root(),config=conf)
Try using absolute paths instead of relative. I suppose you are messing things up by trying to access home/webapps/spotipy/css. Try this in config:
cherrypy.quickstart(Root(),config={
'/css':
{ 'tools.staticdir.on':True,
'tools.staticdir.dir': "/home/webapps/spotipy/css"
},
'/joey_css.css':
{ 'tools.staticfile.on':True,
'tools.staticfile.filename': "/home/webapps/spotipy/css/my_css.css"
}
})
and this in html:
<link rel="stylesheet" href="/css/my_css.css" type="text/css" />