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.
Related
This is my first time trying to use Github pages. I am able to to get the index.html to work, but the style will not. I am serving from the master branch docs/ folder.
Everything works fine when I run it on my local host. Any ideas?
File tree
Stylesheet
Tried changing my static and templated folder names to 'docs' and 'css' as I thought Github looks in specific folders for HTML and CSS files. Also looked to make sure my href was pointing to the right place. I'm new to this, so I may have made a mistake.
EDIT: I am using Flask, which may be causing the issue, website is still static. IDK if Flask and static contradictory.
Thanks
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
I am writing my first web application using Flask and SQLAlchemy.
My CSS file is currently saved under a static folder and the styling is correctly applied to my webpage
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='main.css') }}">
However when I try to update it (for example changing the fontweight from bold to normal) it will not show.
I could even remove all the content of my css file and my website will still look the same (as if the content was never deleted).
The only way I found to make updates was to create a new file "main2.css" and update the url link from the HTML file which is very inconvenient.
Has anyone found a better way?
It sounds like your CSS file is cached. You can test this by changing 'main.css' to 'main.css?something'. Some people append a date string or other to their CSS file so it busts cache periodically.
It's possible you're getting the cached version of your CSS. After making updates to your CSS file, have you tried doing a hard reload? How you do this depends on the browser, but for Safari this can be done by holding Shift and clicking the Reload button.
I had the same issues and I realised I couldn’t keep asking my users to do a hard reload. Constantly renaming my static folder (where all CSS/JS files were kept) seemed error-prone from a production devops perspective. Then I found this addon called flask-static-digest, which was adding md5 hashes to the file names as well as gzipping them. It is a good fix for my production server.
https://github.com/nickjj/flask-static-digest
Another solution I found was really helpful during testing is to do a full reload in your browser (in my case Google Chrome) by shift-clicking the reload button.
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.
I'm just getting started with Octopress; pretty green on web development, and I'm having the following issue:
When I run rake generate to make my octopress page, it mostly generates everything fine but it's not giving a good reference to the .css file. Here is the link it generates:
<link href="/stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
This leaves my index.html page with bare html formatting. But if I change the link to read:
<link href="stylesheets/screen.css" media="screen, projection" rel="stylesheet" type="text/css">
it works. All I did was take out the forward slash.
My question is this: what do I need to change for rake generate to put the proper reference in the html file?
A slash in front will point to the root directory of the project.
Whereas without slash, it will point to the current directory of the HTML file
So if in your case, project structure is:
Project/something/index.html
Any link with "/stylesheets/" will point to a folder in the Project directory. ie it will look for "Project/stylesheets"
Whereas a link with "stylesheets/" will point to a folder in the something directory, which is the current directory of the project.
You need to edit your Rakefile.
I wrote an article about Rake commands in Octopress here:
http://www.tomordonez.com/blog/2013/03/12/rake-commands-in-octopress-on-github/
Inside your main Octopress directory there should be a file called "Rakefile"
Open this file and look for this line:
desc "Generate jekyll site
task :generate do
In here there is a line that says:
system "compass compile -css-dir #{source_dir}/stylesheets"
The source_dir is assigned toward the top of the Rakefile where it says ## Misc Configs ##.
It should say:
source_dir = "source"
I gave you almost all the solution. Put these together and try it out to see if you can make it work :)
Since you're new, I'll give you some ideas as to how this can work
--
Assets
Firstly, when you make use of the asset piepline in Rails, it does a lot of the work for you. Specifically, the stylesheet feature is very well documented:
<%= stylesheet_link_tag "screen" %>
If your page has hard-coded references to your stylesheets, it's going to cause all sorts of compatibility issues down the line (with production etc).
I know this is not an answer to your question directly, but you need to ensure your HTML files are making use of the Rails helper methods - these create dynamic paths, which your app will automatically follow
--
Generate
As for your generator, I've got no experience with octopress
If the gem is not written by you, I would not worry about the generator too much. Having written my own gems & other software, it's very difficult to create a system which works for every single system
If you have the ability to change the path yourself (after generation), I'd do that, and raise an issue with the author on Github