I'm using custom fonts from Pixeden, which are similar to FontAwesome. For some reason, the custom font-faces are not rendering, though I've placed all of the necessary files in my static folder. How do you get custom fonts working on Heroku with Python?
I'm using Django Storages, Django Pipeline, and Amazon S3.
I'll reply because I have had this problem lately and I resolved it. If you are using a font for example from googleapis in your html page, just remove http: at the beginning, so inside <head> instead of:
<link href="http://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
use:
<link href="//fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
This is an old question, but it might benefit someone who stumbles upon it:
The issue here is that you cannot import the fonts with good old insecure http. It will work for your local enviroment, but not on Heroku.
You should use https instead!
Do it like this:
<link href="https://fonts.googleapis.com/css?family=Lobster&subset=latin,latin-ext" rel="stylesheet" type="text/css">
Related
I copied a HTML page with many images and javascript codes.
I created the static folder and did everything that is needed, and when I'm tying to load the source with static tag such as:
<link rel="stylesheet" type="text/css" href="{% static 'styles/bootstrap4/bootstrap.min.css' %}">
I'm still getting an error:
GET http://127.0.0.1:8000/static/styles/bootstrap4/bootstrap.min.css net::ERR_ABORTED 404 (Not Found)
All it did is to add static in the url and I dont understand why?
I cant find how to load jinja in pycharm so my tags are white.
Have you looked at the Django Documentation?
Serving the files
In addition to these configuration steps, you’ll also need to actually serve the static files.
During development, if you use django.contrib.staticfiles, this will be done automatically by runserver when DEBUG is set to True (see django.contrib.staticfiles.views.serve()).
This method is grossly inefficient and probably insecure, so it is unsuitable for production.
See Deploying static files for proper strategies to serve static files in production environments.
I'm trying to make my views.py point to a HTML page I've made that has embedded CSS, is this the best approach? I'm also running Django locally for testing purposes until it is moved to a production server how would I make local links to point to my HTML ?
https://docs.djangoproject.com/en/1.10/ref/settings/#templates
The default includes app/templates/ to your template paths and i would recommend to store your template files there.
Static files like .css and .js are served in similiar way
https://docs.djangoproject.com/en/1.10/howto/static-files/
The django test server also serves static files like css and js for you.
I would also recommend to move your css in one or more seperate .css files.
It helps you on the long run to keep your project clean.
1) In your views.py should be something like:
def my_view(request):
return render(request, 'my_html_page.html', {})
2) You should put 'my_html_page.html' to folder "templates/"
3) You should make folder "static" and put there you css file (i.e. styles.css)
4) in "my_html_page.html" you should link your css like this:
<link rel="stylesheet" href="***{% static 'styles.css' %}***" rel="stylesheet">
5) you should run command
python manage.py collectstatic
p.s. on production server you should install whitehoise
pip instal whitenoise
I am trying to implement the front-end of a very large Python project with React.
It seems that most of the tutorials ask that we use Node to access the packages, is there any way to get around without them?
Initially I thought I could use it similarly to bootstrap or jquery where I just download the files or use the CDN and tag them in the HTML file, but it is not working.
Where do I go from here? Is there an easy way for me to install React?
Thanks!
Edit: I should probably add the code of what I am currently doing. I have tried to access the files which are on react's website, but nothing seems to be working, and from what I read in other questions and tutorials, they always ask to install via npm to make it all work, or so it seems...
<div id='app'></div>
<script type="text/javascript" src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.1.0/jquery.js"></script>
<script type="text/javascript" src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script>
<script src="https://unpkg.com/react#15.3.1/dist/react.js"></script>
<script src="https://unpkg.com/react-dom#15.3.1/dist/react-dom.js"></script>
<script type="text/babel" src="//cdnjs.cloudflare.com/ajax/libs/babel-core/5.8.23/browser.min.js"></script>
<script type="text/babel">
var React = require ('react');
var ReactDOM = require ('react-dom');
var Test = React.createClass({
render: function(){
return(<h1>it is working! </h1>);
}
});
ReactDOM.render(<Test />, document.getElementById('app'));
You can certainly use React with your own flavor of Python framework (Tornado, Flask, Django, etc.). In the final deploy, you don't have to have any Node dependencies. I've run Tornado with React and just used NPM and webpack locally to manage package dependencies and trans-compile.
Closed. This question needs to be more focused. It is not currently accepting answers.
Want to improve this question? Update the question so it focuses on one problem only by editing this post.
Closed 8 years ago.
Improve this question
I am new to Python programming and just started Django, I have a small task to use build a bootstrap blog. I have done some work with jinja templates in django. But i want to know how would i use bootstrap 3 in django because django templates work on jinja style like blocks statements and inheritance.
lot of confusion, any one here who have done this sort of work, kindly help.
also google it and found a lot of libraries, but the structure is confusing me, keep in mind that i am at beginner level.
You can download the static files and copy them in your project's static library, or you can use them via CDN, that is putting in your template's header links to the Bootstrap CDN:
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap.min.css">
<!-- Optional theme -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/css/bootstrap-theme.min.css">
<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.1/js/bootstrap.min.js"></script>
in django, you have static folder which contains css, js and image folders normally.
you put bootstrap css files into css folder, js files into js folder and fonts into images.
and you link to them in template this way:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}css/bootstrap.css">
or if you activated staticfiles app, then
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href="{% static 'css/bootstrap.css' %}">
the same goes for js files. just read django docs, it is the best docs ever!
I'll echo what the other answers have said, but for a succinct and easy to follow example see:
http://www.tangowithdjango.com/book/chapters/bootstrap.html
for a step by step instruction on how to bootstrap your django app.
I am working with google app engine for a class, and while working on a project, I came across something strange that I can't figure out. When I load a site with multiple arguments, such as www.something.com/something/1, the css file doesn't affect the page. It does this even if I copy and paste the exact code from another working html file. I am guessing it has to do with the multiple arguments and maybe me not defining something in the app.yaml file, but I am not sure really. Any help would be appreciated, let me know if you need any code, I didn't figure it would be useful in this case.
WWaldo
Edit:
<head>
<meta http-equiv="Content-Type" content="text/html;charset=iso-8859-1"/>
<title>Google App Engine</title>
<link rel="stylesheet" type="text/css" href="stylesheets/page.css"/>
</head>
You're not showing any code so it's hard to tell for sure, but my guess is that you are using relative references to your CSS files:
<link rel="stylesheet" href="styles.css">
these will break when you're in a different directory. /something/1 will be interpreted by the browser as a different directory, so it will search for
/something/1/styles.css
the best solution is usually to use absolute paths:
<link rel="stylesheet" href="/stylesheets/styles.css">