Ok I am new to Python, I am using Django here.
I cannot get my Python to see the CSS file and use it. I have tried hardcoding the path, server restarts, nothing works. I can get it to read a Bootstrap CDN however, I am not sure what is wrong.
My File structure is like so:
-migrations
-static
--music
---images
---style.css (the file that i'm trying to get)
-templates
--music
---index.html (where my link attribute is)
I am trying to load the static CSS file in index.html like so:
{% load staticfiles %}
<link rel="stylesheet" type="text/css" href= "{% static 'music/style.css' %}"/>
Here is the CSS:
body {
background-color: red;
}
Thanks in advance!
Add following code in setting.py file
STATIC_ROOT = os.path.join(BASE_DIR,"deploy_to_server")
STATIC_URL = '/static/'
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
And use in your template
<link rel="stylesheet" type="text/css" href= "{% static 'music/style.css' %}"/>
Create static folder in your project
==> static ==> music ==> style.css
==> manage.py
Hope this helps you
Related
I am pretty new to Django and I am trying to link CSS file with my HTML document and I have tried using all possible ways posted on StackOverflow and I am unable to locate what is the issue here.
Here is the directory and file structure:
settings.py
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, '/')
STATICFILES_DIRS = (
os.path.join(BASE_DIR, "static"),
)
index.html
{% load static %}
<link rel="stylesheet" type="css/text" href="{% static 'css/style.css' % }">
Thanks in advance.
Ops. Silly mistake. It was all about indentation and minor type tag changes. Here is what worked out for me.
{% load static %}
<link rel="stylesheet" type="text/css" href="{% static 'css/style.css' %}">
I just got started in Django a few days ago from Ruby and have only run into one really annoying problem that I just can't seem to figure out on my own. I've tried everything I can think of to no avail.
I am trying to serve up two static files, a custom CSS file (style.css) and a bootstrap.min.css file.
While this should be very easy as everybody keeps telling me, I must be staring at the outside of the box because I can't fix it. I would like to note, it does not work in both live (which I don't expect it too because I don't have a root set) or local environments. It currently will only serve up bootstrap.min.css
EDIT:
When collectstatic is run, it passes through. I have set STATIC_ROOT to 'STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
my settings file:
STATIC_URL = '/static/'
STATICFILES_DIRS = [
os.path.join(BASE_DIR, 'static'),
]
My Main Template:
<head>
<meta charset="utf-8">
<title>{% block title %}Django Boards{% endblock %}</title>
<link href="https://fonts.googleapis.com/css?family=Peralta" rel="stylesheet">
<link rel="stylesheet" href="{% static 'css/bootstrap.min.css' %}">
<link rel="stylesheet" href="{% static 'css/style.css' %}">
</head>
My File Structure:
Main Project
boards
project1
static
css
bootstrap.min.css (loads first files)
style.css (wont load second file)
templates
manage.py
db.sqlite3
I am using Saleor and I am trying to add a new static folder called fonts into the static folder. When I add a file to static/images I can reference the file, but if I create a folder called fonts: static/fonts and add the same file to it, the file is not found in the browser.
I have tried "npm run build-assets" and cleared Cached images and files in the browser but the font file is still not found.
Works:
<link href="{% static 'images/font-awesome.css' %}" rel="stylesheet" type="text/css">
Does not work:
<link href="{% static 'fonts/font-awesome.css' %}" rel="stylesheet" type="text/css">
Any idea how to make new folders load into static files?
BTW I feel like this must be a nodejs thing.
Here, i really didn't know this package but it's look like you have to add your folder to STATICFILES_DIRS :
https://github.com/mirumee/saleor/blob/221b101a4517d9e4b409523fcb81649be368af95/saleor/settings.py#L81
So it should look like that i think :
STATICFILES_DIRS = [
('assets', os.path.join(PROJECT_ROOT, 'saleor', 'static', 'assets')),
('images', os.path.join(PROJECT_ROOT, 'saleor', 'static', 'images')),
('dashboard', os.path.join(PROJECT_ROOT, 'saleor', 'static', 'dashboard')),
('fonts' os.path.join(PROJECT_ROOT, 'saleor', 'static', 'fonts'))
]
Have fun !
I'm developing django website and am using bootstrap, I can see the styles on chrome browser but not firefox.
firefox inspection shows 404 error for the bootstrap and chrome doesn't. Thankful for any idea.
Code :-
#settings.py
# Build paths inside the project like this: os.path.join(BASE_DIR, ...)
BASE_DIR = os.path.dirname(os.path.dirname(os.path.abspath(__file__)))
PROJECT_DIR = os.path.dirname(os.path.abspath(__file__))
STATIC_URL = '/static/'
STATIC_ROOT = '%s/coffestatic/' % (BASE_DIR)
STATICFILES_DIRS = ['%s/website-static-default/'% (BASE_DIR),
("bootstrap", '%s/bootstrap' % (BASE_DIR)),]
HTTP file.html
<head>
{% load static %}
<link href="{% static'bootstrap/css/bootstrap.css'%}"rel="stylesheet">
</head>
Files structure
BASEDIR
|--ProjectFolder
|------Apps
|--BootstrapDir
|------css
Work flow
Define static files
python manage.py collectstatic
Define styles in html
run project
Thanks
I'm not sure if your settings.py files are correct as they are different from how I would set things up. That being said, I'm no expert and you may well be running a different version of django to me. What I did notice though is you don't have a file type on your link file. Maybe Chrome is fine without this but maybe Firefox is having a hissy fit without it. Try changing:
<link href="{% static'bootstrap/css/bootstrap.css'%}"rel="stylesheet">
to
<link href="{% static'bootstrap/css/bootstrap.css'%}"rel="stylesheet" type="text/css">
Just a guess....
Using bootstrap starter file in your html file will help; as I have done the same and it helped.
Add these files at the end in body section:
<script src="https://cdnjs.cloudflare.com/ajax/libs/popper.js/1.12.9/umd/popper.min.js" integrity="sha384-ApNbgh9B+Y1QKtv3Rn7W3mgPxhU9K/ScQsAP7hUibX39j7fakFPskvXusvfa0b4Q" crossorigin="anonymous"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/js/bootstrap.min.js" integrity="sha384-JZR6Spejh4U02d8jOt6vLEHfe/JQGiRRS
and add these files at the starting in head section:
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.0.0/css/bootstrap.min.css" integrity="sha384-Gn5384xqQ1aoWXA+058RXPxPg6fy4IWvTNh0E263XmFcJlSAwiGgFAW/dAiS6JXm" crossorigin="anonymous">
I'm a beginner at django so not sure about it but it worked for me.
In project folder create a directory with any name. Let's name __shared__ and put the css and jss folders inside the directory
and in settings.py
at bottom put this code
STATICFILES_DIRS = [
os.path.join(BASE_DIR, "__shared__"),
]
I have tried linking a stylesheet to my template in django and it doesnt do anything:
the template(called base.html)
<!DOCTYPE html>
<html>
<head>
<title></title>
<link rel="stylesheet" type="text/css" href="{{ STATIC_URL }}base.css">
</head>
<body>
<h1>Welcome to {{ page }}</h1>
</body>
</html>
This is the settings about the static files:
STATIC_URL = '/static/'
STATICFILES_DIRS = ('C:/Users/GAL/PycharmProjects/sqvatPreAlpha/static/',)
The way my project is built:
http://i.imgur.com/o44QSEk.png
What should I do to make it work?
You haven't mentioned if this is a dev or production box. If the latter, make sure you run:
python manage.py collectstatic
This will collect all your static files that you have in the Django project root, and copy them to the STATIC_URL directory. If you are still running into problems after trying this, you most likely have something incorrectly defined in your settings file.
You have to add {% load staticfiles %} at the beginning of base.html
Also, it seems you need to add .cssto your css file.