So, i am literarily one week into learning web development and i'm following this Django tutorial, i got the index page that i swiped from online to compile properly with it's static elements also. Ran the "python3 manage.py collectstatic" command and everything.
So now i'm linking a registration page which i setup up as a new app in the project and when i try and put the css styling file it doesn't work. i've tried just puting in the same directory as the html templates, then i've moved it to styles and rerun the earlier python command so it's also present in assets, also made use of the "{% static 'abcde.css' %}" as well as {% load static %} in the register.html (only did it in the index initially) and i'm still having no luck with styling the page, any help would be appreciated
Edit:
I previously said i moved the css file but i meant the static file and run gatherstatics again so theres a copy in assets as well.
So now i'm linking a registration page which I setup up as a new app in the project and when i try and put the css styling file it doesn't work.
You should not put it in the same directory as the templates, nor in the directories for templates at all. It should be in a directory you use for static files, so the path is relative to the static root.
This thus means that if /static/ is the directory you marked with the STATIC_ROOT setting [Django-doc], and the file is located at /static/foo/bar.css, you use {% static 'foo/bar.css' %}.
I figured it out but I don't think I should be deleting my stack overflow question. It was just a simple syntax problem
what i had: {% static 'styles/style.css' % }
what you need: {% static 'styles/style.css' %}
that gap between the percentage and bracket was the problem
Related
When I make the website outside of Django it works perfectly fine. However, when I integrate everything in and put the CSS file in static files, it fails to load. The JavaScript file in the same folder loads perfectly fine. The files being used are: base.html, adminDash.html, admin.js, main.css, and admin.css. The admin.css file is the one specific to adminDash.html and is the one failing to load. Attached are images of all files, what the site should look like, and what it currently looks like.
admin.js
main.css
admin.css
adminDash.html
base.html
What it looks like outside Django:
What it looks like inside Django:
I have tried running it outside of the Django project, changing the file location, getting some friends to have a go at it, and getting chatGPT to try rewriting it.
In settings.py include your static file details:
STATIC_URL = '/static/'`
STATICFILES_DIRS=[os.path.join(BASE_DIR, 'static'),]`
Then run collect the static file.
➜ python manage.py collectstatic
Then load the below statement in base.html file:
{% load static %}
Hope this will help
I am new to GitPages and have successfully built and ran my page. However, the {% include %} and {% static %} methods in my index.html aren't being registered. As you can see here. Additionally, my two static files referenced in this file (circleselfie.png and home.css) have weird characters in their static paths when inspecting the page. Here is my project: https://github.com/jishli113/JSite/tree/master. What is causing this?
Gitpages, unfortunately, doesn't support a django backend. It's primarily for static/clientside sites, so your templates are just being treated as normal HTML.
I want to know why static CSS files in Django always don't work as expected? I tried to include CSS styles in HTML style tag, and load static files in HTML. Only adding styles directly in tag attributes worked.
Some CSS code worked well in the static folder, some don't. I can't even style an h1's color through CSS files, which is one of the simplest styling things.
Still can't find a perfect way that can solve this problem.
Please help me with this ><
This is the 'base.html' file, where I extend all stuff from
This is 'index.html', extended from 'base.html'
In the second image, you can see there are no link tags that attach my CSS static files because it's not worked for me, so I took it off. And added a style tag instead.
The thing is, how to include CSS files is the accurate way??
Seems like the range which I extended is from the body tag of 'base.html', so the stuff in the head tag(where link tags should be placed) is also extended. And I guess that's the problem why my CSS files aren't correctly loaded?
If it is, can someone help me with some solutions please>< ?
In firefox and I think in chrome pressing F12 can show console, then we can see if all .css files are loaded properly and what is the problem, if they aren't. Can also pick element and see what css styles are applied to it and where they come from. Django has specific way of managing static files that may be misconfigured, if tags in the template work, then the problem is most likely in the static files.
Django will likely produce error message in the console if it can't provide a static file.
In any case, we may need some code from the template to see what is happening. If configured properly it can load static files, without problems, but there are steps to it. (explained here https://docs.djangoproject.com/en/4.0/howto/static-files/)
Can you use .js static files?Or any static files at all?
2 Important parts that may be missing. One is to use:
python manage.py collectstatic
Command after every change of static files.
https://docs.djangoproject.com/en/4.0/ref/contrib/staticfiles/#django-admin-collectstatic
The other is to start templates using staticfiles with:
{% load static %}
Then to remember the syntax for the files themselves like:
<link href="{% static 'introjs.min.css' %}" type="text/css" rel="stylesheet">
So django knows to load a static file instead.
Reply / Edit 2:
The tags seems ok(load static part). I think you don't need to repeat them in the same template, even if it extends other stuff, can just set it once every template that uses static files.
So there are 3 things you need. One is to have the tags in templates, as you do, the other is to have the static files in your static directory(specified in STATIC_URL in your settings file), and lastly to use collectstatic command after each change.
So lets say we look at
<link rel="stylesheet" href="{% static 'css/index.css' %}">
It looks good. That suggests you have 2 things for it to work. One is in your static files directory(defined in your settings file), you have:
static(or whatever name)/css subdirectory and then you have index.css file in there.
Also after you added the css file in there, to have done python manage.py collectstatic at least once.
The rest seems to be from CDNS(basically other hosting sites) Django should load them by itself, if the hosting there allows it.
Basically that is the idea,yea. All in here seems good. If there are still problems, check the static directory in settings py and make sure you used collectstatic after changes.
Errors will show in the terminal, so you can see if something isn't loading, why. : )
For errors in static files that are the 2 places to check. One is the terminal where python is providing info(or log files on the server if you can't see terminal), the other is the browser itself - it will show why it isn't loading a static file.
One time I spent a ton of time on the same problem. I deleted the !DOCTYPE html from the top of the html page and suddenly it worked as expected.
So, I'm using Django and pythonanywhere in order to setup an webpage, but I'm facing some issues when retrieving static files.
I've followed the tutorial for static files (which is great btw) and everything works for the index.html page. However, when trying to go to a second page, it throws an error which fits one of the issues described in this other link: https://help.pythonanywhere.com/pages/DebuggingStaticFiles/
The path to the file and the path in the URL don't quite match (eg, there's an extra level of folder hierarchy in one and not the other)
However, I don't know how to fix it... What is happening is that my log info shows that I'm loading:
/static/pgbfiles/medicine.png -- this is working for the index.html
/publicacoes/static/pgbfiles/img.css -- for the second page named publicacoes.html
What I would like to have is all the static files in one single folder. They are already there but I don't know how to tell Django that they are all there for both html files...
I think I could add an additional folder for the "publicacoes" files, but that is not what I would like to do atm.
And this is how I'm loading the info on both index and publicacoes.html:
{% load static %}
And then on the particular places where I need: href="{% static 'pgbfiles/bootstrap.min.css' %}"
Thank you for any help!
EDIT:
index.html is using: {% static 'pgbfiles/bootstrap.min.css' %} and working;
publicacoes.html was using {% static 'pgbfiles/img.css' %} but I changed it to {% static '/pgbfiles/img.css' %} and it is still not working -> still requests for "GET /publicacoes/static/pgbfiles/img.css".
Static info are:
STATIC_URL = 'static'
STATIC_ROOT = '/home/guideo/pgbadvogados/blog/static'
WORKING:
Now I've changed STATIC_URL to '/static' and it worked! So thanks a lot for the two comments and answer down below.
(only had to change it on settings.py, and not on publicacoes.html as I was doing before).
You're specifying a relative path (no preceding forward slash), so the request is going relative to the location of the page that contains it. Add a preceding slash to your href.
I have a few new templates in my pelican theme (a growing number of them, really). They are html files that hold simple web maps. I use these by {% include %}ing them after the content of a blog post. I place the path to the webmap1.html template in the markdown metadata, and then in article.html I {% include %} the web map html at the bottom of the file.
Thing is, I really would like to have these html files available as standalone html in my output as well. Initially I thought I'd be able to do this by placing webmap1.html in my content directory and using STATIC_PATHS to copy it to the output. However, I was unable to get the include statement to find an html file that is not within the theme/templates directory.
I also found that adding /theme/templates/maps or ../theme/templates/maps to STATIC_PATHS didn't work.
Of course, one way to do this would be to include identical files in both the content directory and the template directory, but that seems sloppy. Alternatively, I could add a command to pelican to copy the files from one place to another before the generation happens. Looking for an alternative solution though.
Thanks!
Well, turns out I was outsmarting myself with this. All I needed to do was use the
DIRECT_TEMPLATES = [
r'maps/webmap1',
]
setting in pelicanconf.py. That way, I can {% include 'maps/webmap1.html' %} in a separate template, and also write it to its own standalone location in the output directory.