I'm creating a django project in pycharm and I'm trying to use bootstrap blog example(https://getbootstrap.com/docs/4.4/examples/blog/). I came across a problem: bootstrap.min.css file is not working properly, when I link it like this it works properly,
<link rel="stylesheet" href="https://stackpath.bootstrapcdn.com/bootstrap/4.4.1/css/bootstrap.min.css" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
but when I download this file then save it in my_app/static/my_app/bootstrap.min.css and link it like this,
<link rel="stylesheet" href="{% static 'blogs/bootstrap.min.css' %}" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
it doesn't work, the django development server is properly loading the css file
[14/Jan/2020 19:04:26] "GET /static/blogs/bootstrap.min.css HTTP/1.1" 304 0
but it just doesn't have any effect on the site apperance, the blog.css file does have effect as I can see fonts and a few thing change but the bootstrap.min.css file just doesn't.
Try to log your path if it return where your bootstrap.min.css file exists.
Then check if your browser's cache is clear if not then give it a try.
I checked the console in browser, as #tao said, turns out the problem was the
integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh"
in
<link rel="stylesheet" href="{% static 'blogs/bootstrap.min.css' %}" integrity="sha384-Vkoo8x4CGsO3+Hhxv8T/Q5PaXtkKtu6ug5TOeNV6gBiFeWPGFN9MuhOf23Q9Ifjh" crossorigin="anonymous">
Thank your for your help
Related
I'm trying to build a website in python and flask however my CSS is not loading I don't see anything wrong with my code and I've tried the same code snippet from a few different sites.
My Link:
<link rel="stylesheet" href="{{ url_for('static', filename= 'css/style.css') }}">
File structure as below:
Error: 127.0.0.1 - - [16/Sep/2021 20:18:34] "GET /static/css/style.css
HTTP/1.1" 404 -
You have written the path to CSS file wrong. It should be:
<link rel="stylesheet" href="{{ url_for('static', filename= 'styles/style.css') }}">
you have written css/style.css. According to the file structure you have attached, it should be styles/style.css.
What is the actual directory your stylesheet is in? I suspect it isn't in /static/css/ under the root directory of your app. This should work if your css file is in /static/css/:
<link href="/static/css/style.css" rel="stylesheet">
I'm experimenting with django-distill (https://github.com/mgrp/django-distill) to generate a static site from a django project. i'm using django 1.10.8 . My main template contains:
<!-- Bootstrap Core CSS -->
{% load staticfiles %}
<link href="{% static "css/bootstrap.min.css" %}" rel="stylesheet" />
<!-- Custom CSS -->
<link href="{% static "css/landing-page.css" %}" rel="stylesheet" />
<link rel="stylesheet" type="text/css" href="//cdn.jsdelivr.net/jquery.slick/1.5.0/slick.css"/>
The paths to the css and js files are correct when I run the project locally on my windows system. However when I look at the source html I see:
on my windows system this works with a running sever, i.e.
http://127.0.0.1:8000/static/css/bootstrap.min.css
but it breaks with static files and I have to change these to
<link href="./static/css/bootstrap.min.css" rel="stylesheet" />
Is there any way to set % static to render to
./static/ instead of /static/
I'm trying to link it in the header of html file in the following path:
main/home/templates/home/index.html
And the style.css lives in
main/main/stylesheet/style.css
And this is my link in the index.html:
<link rel="stylesheet" type="text/css" href="/main/stylesheet/style.css">
Is something wrong?
I guess you should go for:
<link rel="stylesheet" type="text/css" href="main/stylesheet/style.css">
so you need a relative path.
I'm making a bootstrap theme for Trac installation. This is my first time using Genshi so please be patient :)
So I've following:
<head py:match="head" py:attrs="select('#*')">
${select('*|comment()|text()')}
<link rel="stylesheet" type="text/css" href="${chrome.htdocs_location}css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="${chrome.htdocs_location}css/style.css" />
</head>
This loads my custom css, but JS/css that trac needs to use.
So result is this:
<link rel="help" href="/pixelperfect/wiki/TracGuide" />
<link rel="start" href="/pixelperfect/wiki" />
<link rel="stylesheet" href="/pixelperfect/chrome/common/css/trac.css" type="text/css" />
<link rel="stylesheet" href="/pixelperfect/chrome/common/css/wiki.css" type="text/css" />
<link rel="stylesheet" type="text/css" href="/pixelperfect/chrome/common/css/bootstrap.min.css" />
<link rel="stylesheet" type="text/css" href="/pixelperfect/chrome/common/css/style.css" />
All is good, except that I would like to exclude trac.css out of there completely.
So my question is twofold:
1. How does genshi know what to load? Where is the manfest of all css/js files that it displays.
2. Is it genshi or python doing this?
Any help and relevant reading appreciated! :)
Thanks!
On 1:
The information on CSS files is accumulated in the 'links' dictionary of a request's Chrome property (req.chrome['links']), for JS files it is the 'scripts' dictionary. See add_link and add_script functions from trac.web.chrome respectively.
The default style sheet is added to the Chrome object directly. See the add_stylesheet call in trac.web.chrome.Chrome.prepare_request() method.
On 2:
Its part of the Request object, that is processed by Genshi. Preparation is done in Python anyway, but it is in the Trac Python scripts domain rather than in Genshi Python scripts.
I have a simple flask application. I have all my css inside static/css directory. I have created a master template in which I want to include css from that directory. Following is what I have tried so far.
<link rel="stylesheet" href="/static/css/justified-nav.css" type="text/css" media="screen">
<link rel="stylesheet" type="text/css" href="{{ url_for('static', filename='css/justified-nav.css') }}" media="screen">
<link rel="stylesheet" type="text/css" href="http://127.0.0.1/static/css/justified-nav.css" media="screen">
In all the cases the file gets loaded but with mime-type text/plain. I have tried putting the css file directly into the static folder as well but no results.
What am I doing wrong? How can I include a css file in a template?
Flask uses the mimetypes module to determine the MIME type of a file, based on its extension. If you get text/plain for a CSS file it means this module returns the wrong MIME type.
On Windows it uses data from the registry, so if the "Content Type" value in HKCR/.css is not set to the proper MIME type it can cause your problem.
Try this and it should work.
<link rel="stylesheet" href="{{ url_for('static', filename='css/bootstrap.css') }}"/>