I am trying to build a project using django. I downloaded a css template to try it .I have tried everything but my css files and js files are not working properly.
My settings is:
STATIC_URL = '/static/'
STATIC_ROOT = os.path.join(BASE_DIR, 'staticfiles')
STATICFILES_DIRS = [
BASE_DIR / "static",
]
HTML page:
link href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" rel="stylesheet">
<link href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.10.0/css/all.min.css" rel="stylesheet">
<link href="{% static 'lib/flaticon/font/flaticon.css' %}" rel="stylesheet">
<link href="{% static '/animate/animate.min.css" rel="stylesheet' %}">
<link href="{% static 'lib/owlcarousel/assets/owl.carousel.min.css' %}" rel="stylesheet">
<!-- Template Stylesheet -->
<link href="/static/css/style.css" rel="stylesheet">
<!-- JavaScript Libraries -->
<script src="https://code.jquery.com/jquery-3.4.1.min.js"></script>
<script src="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/js/bootstrap.bundle.min.js"></script>
<script src="lib/easing/easing.min.js"></script>
<script src="lib/owlcarousel/owl.carousel.min.js"></script>
<script src="lib/waypoints/waypoints.min.js"></script>
<script src="lib/counterup/counterup.min.js"></script>
<script src="lib/parallax/parallax.min.js"></script>
<!-- Contact Javascript File -->
<script src="mail/jqBootstrapValidation.min.js"></script>
<script src="mail/contact.js"></script>
<!-- Template Javascript -->
<script src="/static/js/main.js"></script>
Is this running on a development machine (./manage.py runserver) or is this deployed (apache/nginx) ?
Welcome @Joana-Jopson !
First, a side note: When posting code here, use lines of three backticks - ` to fence off code, not “> blockquote”. This means you’ll have a line of ```, then your code, then another line of ```. (I’ve taken the liberty of modifying your original post for you to fix this.)
Can you be more specific about how they are not working? Are you seeing the requests for the files being issued? Are those requests getting a 404? Is it all files, or just some?
Please describe where these files exist within your directory structure. Are they in a subdirectory in your project base? Or are they within a subdirectory in an app?
Beyond that there are a couple things it see right off-hand.
First:
The rel="stylesheet' doesn’t belong inside the static tag. (Notice how you have the others.) Your quotes (' and ") are also mixed up here.
You generally want to have the type="text/css" attribute in those links as well.
You don’t have your JavaScript libraries using the static tag:
Example:
should probably be:
<script type="text/javascript" src="{% static 'lib/easing/easing.min.js' %}" />
yes py manage.py runserver
Oh thank you for replying.
Yes its 404 error.I have just started so right now only index page.
The file structure is:
-projectname
-applicationname
-templates
-static
-css
-js
-lib
-img
I had downloaded the css from HELPZ Free Website Template | Free CSS Templates | Free CSS
the carousel’s css and js dont work. i tried everything i added mime type but it didnt change anything.The top part not shown if i change
<script src="{% static 'lib/owlcarousel/owl.carousel.min.js' %}"></script>
Based upon your STATICFILES_DIRS setting, that static directory should be in the project directory, not the app directory.
If moving the directory doesn’t help, please show the html that was rendered in the page (not the template) and the http requests from the runserver console. (I’m assuming you’re doing this in a development environment.)
I moved the directory to projectname directory and i made the modification you have told earlier about adding:
<script type="text/javascript" src="{% static 'lib/easing/easing.min.js' %}" />
Now it shows as
The http request while running is shown below in the terminal:
I am unable to understand why the top 3 images overlap with each other and the information below moves up.I checked the css code but it seems fine. I changed all script src to how you had suggessted. Still the error persists
I can see right offhand that neither of the urls starting with /mail/ are right, in that they don’t begin with /static/.
It looks like you have static duplicated in the request for /static/static/js/main.js.
Please identify the complete directory path where animate.min.css resides.
Also, please do not post images when not necessary. For things like the console output, copy/paste the text into the body of your post between lines of three backticks. (Note, you need to use the backtick - `, not the apostrophe - ', and the lines of ``` must be lines by themselves, not part of any other line. Also, if you have just one line or a portion of a line, you can use a single backtick before and after the string.)
If i were to remove the /static/ in main.js the website shows like its loading and no content will be seen. For mail it resides in the static folder in project directory.
<script type="text/javascript" src="{% static '/mail/jqBootstrapValidation.min.js' %}"></script>
<script type="text/javascript" src="{% static '/mail/contact.js' %}"></script>
<!-- Template Javascript -->
<script type="text/javascript" src="/static/js/main.js"></script>
Hi, I made changes like you had said to check the path. Now the developer and the terminal does not show any error. But the website does not show the navigation bar images and the scroll images.
Again, please show the output from these requests from your runserver console.
You are not using the {% static tag here.
Thank You it started working.
1 Like
