1

I have checked external css file doesn't work in Flask framework etc. other SO questions and my original Udemy source tutorial, but I still can't seem to get my Flask Boostrap app. to pick up my custom CSS file.

From base.jinja2 HTML template file:

    {% include 'html_dependencies.jinja2' %}

</head>
<body>

Entire CSS test file in Source/static/css/style.css:

body {
    background-color: yellow;
}

(This is test file, body does not change to yellow currently, therefore my CSS appears not to be loading.. I don't really want a yellow background if any style police reading!)

Complete HTML Dependencies file below code, which is loading the main bootstrap files fine, my custom CSS is last file, with url_for and static format syntax as I understand should be correct. Maybe I got the order wrong or some interference from one of Bootstrap files here? Also, I have problem with Bootstrap collapsed nav menu not functioning when window minimised, not sure if this is same cause, the standard lines in box icon shows for navigation when window is below cutoff width, but nothing happens when I click on it.:

<!-- Latest versions available at 31-8-17 -->

<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

<!-- Optional theme -->
<!-- link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous" -->

<!--Font Awesome from https://www.bootstrapcdn.com/fontawesome/ on 31/8/17 -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/font-awesome/4.7.0/css/font-awesome.min.css">

<!--Flatly theme from bootstrapcdn.com on 31/8/17 -->
<link href="https://maxcdn.bootstrapcdn.com/bootswatch/3.3.7/flatly/bootstrap.min.css" rel="stylesheet" integrity="sha384-+ENW/yibaokMnme+vBLnHMphUYxHs34h9lpdbSLuAwGkOKFRl4C34WkjazBtb7eT" crossorigin="anonymous">

<!-- Latest compiled and minified JavaScript -->
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>

<!-- do I need jquery as well for the pop-up to work? Maybe already in the JS import -->

<!-- jQuery library -->
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"></script>

<!-- custom changes / over-rides to Boostrap CSS -->
<link rel="stylesheet" href="{{ url_for('static', filename='css/style.css') }}">

I'm quite a Bootstrap newbie, any suggestions grateful.

Will Croxford
  • 373
  • 1
  • 3
  • 20
  • is your css and tags within your you style right? maybe your css is failing or there is no object for it to style? – senaps Oct 08 '17 at 10:28
  • thanks @senaps this website is functioning and running online on CentOS Linux. Top of my answer is an extract of code from the base.jinja2 file, which is HTML base template file. I think full base template probably not relevant to include. This is all running and displaying the Bootstrap CSS, but for some reason it is not picking up my custom CSS file. The CSS body code I have shown is the entire custom CSS file, putting `style="background-color: yellow"` inline in body tag works, but putting it in my custom CSS file currently does not :-( – Will Croxford Oct 08 '17 at 11:32
  • you see, the point i wanted to make was that if everything is alright, then you begin to check if the path is right! so is the css/stryle.css being picked up correctly? be, your static file may contain other custom files too, are they okay?(js and template files within static) and the only file with problem is `style.css`? – senaps Oct 08 '17 at 12:09
  • You should be able to check, using the browser, if your file is getting loaded. Should be 404 error on the .css file if it's not being loaded at all. I think that's what @senaps is trying to convey as well. – BrettJ Oct 09 '17 at 15:22
  • Thanks @BrettJ I think fixed now as per answer below. – Will Croxford Oct 09 '17 at 15:38

1 Answers1

4

I found it is the browser caching that is the problem. On the server this code works fine for me. In both IE and Chrome on my local computer, if I change the custom CSS code, it doesn't pick it up, unless I open code inspector in the browser, click on "Disable cache" option in the code inspector, and keeping code inspector window still open, then reload the localhost website. The below SO question finally sorted me out, and now I am downloading the Chrome extension Cache Killer as per second answer here, otherwise extremely irritating to have to open window and disable cache to check every change in custom CSS! Disabling Chrome cache for website development

I did also fix other mentioned error of collapsed menu issue was due to Bootstrap jQuery import line being below the Bootstrap min.js file. Opening the code inspection in browser showed this error, so moved jQuery line above js line and it loads properly.

Thanks again @senaps pointing me in right direction, confirming to me that posted code itself seems right.

Will Croxford
  • 373
  • 1
  • 3
  • 20