I am new to Django, I am working in python 3.5, I linked CSS using Jinja but I am not able to see the CSS style within my HTML file, even thought I am getting 200 status in my network and the CSS file is loaded but the style is not working. Can you help me.
here is my html file
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>home</title>
<link rel="stylesheet" type="text/css" href="{%static
'posts/customstyle.css'%}">
</head>
<body>
<div class="container">
<h1>This is the HTML file</h1>
</div>
</body>
and my CSS file is also within 'static' folder within my project folder. I have tried changing the name but nothing is happening.
All I get in the console is:
Resource interpreted as Stylesheet but transferred with MIME type application/x-CSS.
While my network is pretty healthy and I am getting my files uploaded properly.
Here is what I am getting in console:
file uploads sucessfully
style showing but not working
Related
I already have a Django project with many apps and one of them is demo_app. I have some views and templates added to the demo app but I want to start using tailwind in the demo_app templates. I have seen that to add tailwind I need to create the theme app using tailwind but I want to add it to the already existing demo_app. How can I do that?
You can create the theme app just like the documentation says and add the tags to your existing app. I followed the process in this link. The js config in the app already looks for the tailwind tags in other apps. The tags I used are
{% load static tailwind_tags %} and {% tailwind_css %}. I added them to the html template in my existing app.
{% load static tailwind_tags %} at the top of the template and {% tailwind_css %} in the <head>
What I did that worked for me was install tailwind-cli in the static folder of my Django app, check out the tailwind-cli installation guide Tailwind Documentation. And then load the CSS in the HTML template. Below is how I referenced the tailwind CSS.
{% load static %}
<!doctype html>
<html>
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link href="{% static 'main.css' %}" rel="stylesheet">
</head>
<body>
<h1 class="text-3xl font-bold">
Hello, world!
</h1>
</body>
</html>
I have an odd case where I'm trying to serve a static index.html file that holds a javascript bundle from webpack in it for vue.js files, but it is sending the incorrect javascript file contents.
I've tried both sending the html file as a template view and simply reading the file contents and sending it as an html response. It sends the html file itself correctly, but instead of sending the contents of the javascript file it just copies the index.html content into the javascript file.
I checked to make sure that I wasn't accidentally overwriting the javascript file with html content and that's not the case, the javascript is in correct form, but when it is sent to the browser this is what is seen:
index.html:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>testprojsimple</title>
</head>
<body>
<div id="app"></div>
<script src="js/myvuejs.bundle.js"></script>
</body>`
</html>
myvuejs.bundle.js:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<title>testprojsimple</title>
</head>
<body>
<div id="app"></div>
<script src="js/myvuejs.bundle.js"></script>
</body>`
</html>
Any ideas on why it would be re-sending the index.html content as the javascript file as well?
Edit:
I'm in development mode currently, serving by simply saying in views:
def indexView(request):
return HttpResponse(open("file/to/static/html/file/index.html").read())
Settings.py:
STATIC_ROOT = os.path.join(BASE_DIR,'static/')
STATICFILES_DIRS = [os.path.join(BASE_DIR, 'static')]
urls.py:
urlpatterns = [
url(r'^', indexView),
]
My goal is to avoid serverside rendering, using client-side frameworks to reach into a django backend that serves data content, like json, etc...
The regex ^ matches every single URL; it just means "any string that starts", which of course is every string. You should terminate the pattern as well: ^$, so that it only captures the empty string.
I have an angular 2 front-end with already written links between html js, css and other files such as images, that I would like to serve using Django.
The structure from Angular 2 looks like following:
-->index.html
-->test.js
-->test.css
HTML file:
<!doctype html>
<html lang="en">
<head>
<link href="test.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="test.js">
</body>
I wouldn't like to change the given paths from the angular 2 app, instead I would like to know the workaround to serve this files in django without using "/static/< appname>/" or "/static/" prefix or template tags in every link.
Update
Trying to avoid
<!doctype html>
<html lang="en">
<head>
<link href="/static/test.css" rel="stylesheet"/>
</head>
<body>
<script type="text/javascript" src="/static/test.js">
</body>
and avoiding this:
{% load static %} <link href="{% static "example.jpg" %}" rel="stylesheet"/>
In other words, trying to adapt django builtin webserver to serve angular files without adapting ("static" prefix or tag) them to django.
Thank you in advance!
You say you want to "serve your files" from Django, but I think you really want to serve them from something like Nginx. For example,
location = /js/test.js {
root /path/to/js/;
}
in your nginx file. For the purposes of Angular2 URLs, you can pretend that Django doesn't exist.
I'm trying to embed a bokeh plot into a template (home.html), but nothing is displayed after executing the code.
here's the code.
views.py (all packages are imported)
def home(request):
s = [1,4,6,8]
h = [1,5,9,8]
p = figure(plot_width=600, plot_height=600)
p.vbar(x=s, width=0.5, bottom=0,
top=h, color="black")
script, div = components(p, CDN)
return render(request, 'home.html', {'div': div, 'script': script})
home.html
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Experiment with Bokeh</title>
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
</head>
<body>
<h1>hello</h1>
{{ div|safe }}
{{ script|safe }}
</body>
</html>
it displays nothing at the end, there's no error message, but and the page is completely blank
Help, Please!!
You are loading an ancient version of BokehJS from CDN:
<script src="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.js"></script>
<link rel="stylesheet" href="http://cdn.bokeh.org/bokeh/release/bokeh-0.8.1.min.css">
The 0.8.1 release is now several years old. By contrast, the vbar glyph method that you are using was only added quite recently. You need to make sure that the version of the BokehJS resources that you load in your template actually match the version of the Bokeh library that you are using.
Just started to learn Django and Twitter Bootstrap on some project.
I use external links to connect css and js files of bootstrap, but today I found Django-Bootstrap-Toolkit, so I wonder how to switch my project to it.
project folder:
myproject/
/bootstrap_toolkit/
/myproject/
/templates/
/someapp/
/manage.py
settings.py
INSTALLED_APPS = (
...
'someapp',
'bootstrap_toolkit',
...)
templates/base.html
{% load bootstrap_toolkit %}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<!--CSS Bootstrap-->
<link rel="stylesheet"
href="//netdna.bootstrapcdn.com/bootstrap/3.0.1/css/bootstrap.min.css">
<title>{% block title %}{% endblock %}</title>
</head>
<body>
...
</body>
</html>
So, if I'm deleting link tag, all the CSS disappears, so, I wonder what I've done wrong, and my toolkit is not connected?
If you're using bootstrap3, according to the documentation you should instead use this package: https://github.com/dyve/django-bootstrap3
Regarding the CSS files: I have never used either of those packages but you definitely have to have a link to the bootstrap static files somewhere. So just don't remove the link tag and you're fine!