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" />
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'm using flask framework, to make some website but when i try to write css style it apply only for body tag and ignores all next
index.html content
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="{{url_for('static', filename = 'css/style.css')}}">
</head>
<body>
<h2>some text</h2>
</body>
</html>
style.css content
body {
background: #222;
}
h2 {
color: #fff;
}
when i check website source i see this
body {
background: #222;
}
Here is my code. I have a static folder in which i have all css and js files
{% load static %}
<!DOCTYPE html>
<html>
<head>
<meta charset="UTF-8">
<title>template is working</title>
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}"/>
<link rel="stylesheet" type="text/css" href="{% static 'style.css' %}">
<script href="{% static 'js/jquery.js' %}"></script>
<script href="{% static 'js/bootstrap.js' %}"></script>
<script>
var jQuery = django.jQuery;
var $ = jQuery;
$(document).ready(function () {
alert("Hello");
})
</script>
</head>
Here is the screenshot of directory structure
enter image description here
I don't know what you are trying to do but those line are not necessary:
var jQuery = django.jQuery;
var $ = jQuery;
I, as #Stéphane also have no idea what are you trying to do, because as I know, jQuery ready statement defined like this:
$( document ).ready(function() {
console.log( "ready!" );
});
or...
// Shorthand for $( document ).ready()
$(function() {
console.log( "ready!" );
});
Also, I think this question even don't related to Django framework. If you want use jQuery, you should read its documentation.
I tried to integrate this(having a layout.html and index.html) into my app. Before starting I only had index.html with all of my css/javascript includes at the top.
Current file struct
/app
- app_runner.py
/templates
- layout.html
- index.html
/static
/styles
- mystyle.css
Layout.html (mostly css and javascript CDN and my stylesheet)
<!doctype html>
<!-- Latest bootstrap compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">
<!-- Optional bootstrap theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">
<!-- jquery -->
<script
src="https://code.jquery.com/jquery-3.1.1.min.js"
integrity="sha256-hVVnYaiADRTO2PzUGmuLJr8BLUSjGIZsDYGmIJLv2b8="
crossorigin="anonymous"></script>
<!-- Latest bootstrap compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
<!-- jstree -->
<link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/themes/default/style.min.css" />
<script src="https://cdnjs.cloudflare.com/ajax/libs/jstree/3.2.1/jstree.min.js"></script>
<!-- my stylesheet -->
<link rel='stylesheet' type='text/css' href="{{url_for('static',filename='styles/mystyle.css')}}" />
<script type="text/javascript">
var $SCRIPT_ROOT = {{ request.script_root|tojson|safe }};
</script>
{% block body %}{% endblock %}
The page, for the most part, renders the same: The jstree appears, bootstrap works, and the rest of my styling is applied. In my css file I have a line that doesn't get applied:
td {
padding: 5px;
}
The developer console shows padding:0, which comes from a bootstrap script. If I change it in the developer console I can get it to change to 5px.
I've heard using !important is bad practice but I tried it anyway with no change. I tried adding a class to all my td so it'd have higher precedent (based on this answer) and have that style (.my_row{padding:5px;}) apply but again it doesn't change. So it seems my css isn't being applied to my table. Other parts of mystyle.css work though.
Any thoughts on why the padding isn't being applied to my table?
So it turns out my stylesheet wasn't refreshing in the cache. I found an answer on this site.
I added these lines of code to my python (app-runner.py)
#app.context_processor
def override_url_for():
return dict(url_for=dated_url_for)
def dated_url_for(endpoint, **values):
if endpoint == 'static':
filename = values.get('filename', None)
if filename:
file_path = os.path.join(app.root_path,
endpoint, filename)
values['q'] = int(os.stat(file_path).st_mtime)
return url_for(endpoint, **values)
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/