Custom .css not loading into Flask HTML template - html

I am having a nightmare getting custom css to load into a Flask HTML template. I have tried everything I can think of, and haven't really had this issue before but am stumped now. File tree as follows:
/static
/css
styles.css
/templates
index.html
main.py
Index.html is rendering correctly, but css is not applied or loaded. index css link as follows:
<head>
<meta charset="UTF-8">
<title>Title</title>
<link rel="stylesheet" type="text/css" href="{{ url_for('static',filename='css/styles.css') }}">
</head>
Any help is appreciated!

Try adding css externally without using 'url_for'.
In your case try the following:
<link rel="stylesheet" type="text/css" href="./static/css/styles.css">

Related

Why I can't load CSS file or images

I'm learning how to make websites, and I'm stuck on a problem that I can't find a solution to, I hope you can help me.
I can't connect either a CSS file or an image for the site icon, but if I use it works.
I'm using Node.Js for backend with EJS for frontend.
That's how I connect image:
<!DOCTYPE html>
<html lang="eng">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<link rel="icon" type="image/png" sizes="32x32" href='src/images/favicon-32x32.png'>
<title>Title</title>
And that's for CSS file:
<link rel="stylesheet" type="text/css" href="./style.css">
</head>
<body>
<h1 class="ws_title">Title</h1>
My css file and html template are in the same directory: src/views/project
And all the images are in the src/images
I've tried using different browsers but it's not working
Do you know what's the problem might be?
Updated: I’ve just found that with EJS I must use express.static, but I don’t understand what should I do with it, can you explain?
I cloned Your project and made some adjustments.
Rename images directory to public directory.
Move style.css file from /views/pocketsage/ to public directory.
Add in server.js file Serving static files, this line of code app.use("/", express.static(path.join(__dirname, "public")));
server.js add path, const path = require("path");
main.ejs change href to <link rel="icon" type="image/png" sizes="32x32" href="favicon-32x32.png" />
main.ejs change src <img src="avatar.png" alt="" class="info-card__photo" />
Restart the Server and browser ctrl+f5 and Voila.
Folder&file server.js and main.ejs code snippets and output in terminal of VScode:
Output in browser
http://127.0.0.1:3002/pocketsages
and console with AVATAR and FAVICON:

How to get CSS to show in HTML

I'm having trouble linking CSS to an HTML page. Both files are in the same directory but I'm getting this in the terminal when I run on local port in Chrome ('test3' is the html file):
Not Found: /test3/sidebar.css
[15/Apr/2020 17:57:52] "GET /test3/sidebar.css HTTP/1.1" 404 8233
No matter how I alter the href path get some variation of this issue unless I include the directory name:css file name, but even then the HTML file doesn't inherit the CSS styling.
I'm working on a sidebar nav, which is why the names are the way they are but I just included a test line I'm using below:
.html file:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Testang</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link href="sidebar.css" rel="stylesheet" type="text/css">
</head>
<body>
<h1> Test </h1>
</body>
</html>
If I input the href like
<link href="requests:sidebar.css" rel="stylesheet" type="text/css">
I don't get the error but I still don't see the CSS changes ('requests' is the name of the directory).
.css file:
h1 {
color: red;
font-size: 50px;
}
I just switched from PyCharm. Once I got Atom set up I opened the project in Atom from the PyCharm folders. Everything else seems to work fine.
The code looks good, there is no typo in it. Make sure you have the CSS file and the HTML file in the same folder and they are not text files and they have extensions and, of course, that the files are saved.
test3 is the parent directory?
Is it just HTML and CSS or is it a Django project?
Since the CSS file is in the same folder, you could try something like this:
<link href="./sidebar.css" rel="stylesheet" type="text/css">
The dot tells the browser to search in the same folder as the HTML.
At the very beginning of your HTML file add:
{% load static %}
and change
<link href="sidebar.css" rel="stylesheet" type="text/css">
to something like this:
<link href="{% static 'sidebar.css' %}" rel="stylesheet" type="text/css">
I created a folder in the main project directory called "static", then created a directory within that called "css". Then, and this was the big thing missing for me, went into the project's settings.py and created the STATICFILES_DIRS path to that new folder.
From what I've read I'll need some additional work when I push this to production.
# Static files (CSS, JavaScript, Images)
https://docs.djangoproject.com/en/3.0/howto/static-files/
STATIC_URL = '/static/'
STATICFILES_DIRS = [
"full folder path to static folder"
]
Then in the HTML file I entered:
{% load static %}
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Test</title>
<link rel="stylesheet" href="https://getbootstrap.com/docs/4.0/dist/css/bootstrap.min.css">
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.3/jquery.min.js"></script>
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.4/js/bootstrap.min.js"></script>
<link rel="stylesheet" type="text/css" href="{% static 'css/sidebar.css' %}">
</head>
The key parts are the load static at the top and the href to {% static 'css/sidebar.css' %}.

Unable to link CSS file in HTML

I am trying to link my CSS and HTML. My CSS file is in static folder where as index file in templates folder.
code : Header of index.html
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>BMI App</title>
<link href="C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
</head>
Even after providing it's proper path, I am unable to link them.
Try using below way, it is almost similar of what you've used but you need to know how to locate the external file.
If you have a file in a location which is outside from the project folder then you can try something like this:
<link href="file:///C:\Users\Shweta\MFRTPPython\static\main.css" rel="stylesheet" type="text/css">
OR
if you know about how absolute and relative path works then below is what you can try:
<link rel="stylesheet" type="text/css" href="./yourDirectory/yourFile.css"
My advice to you is to create a folder in your project and add that stylesheet file into that folder and refer that path in the html.
Kindly go through this path for better understanding of absolute and relativepath.

CSS not linked to HTML page

Good morning guys,
I am playing around building a small website. In the html I have my link to my CSS file but for some reason the CSS is not being shown on the page.
The link tag looks as follows:
<link rel="stylesheet" href="./styles/style.css" type="text/css">
The site does not contain any styles that I have built. Am I doing something wrong here?
Folder Structure 1
index.html
styles (folder)
style.css
If this the folder structure then your link tag should be
<link rel="stylesheet" href="styles/style.css" type="text/css" />
Folder Structure 2
index.html
style.css
If your folder structure is like the above then the link tag should be
<link rel="stylesheet" href="style.css" type="text/css" />
Folder Structure 3
HTML (folder)
index.html
styles (folder)
style.css
If your folder structure is like above then the link tag should be
<link rel="stylesheet" href="../styles/style.css" type="text/css" />
This might help you. For any error check the browser console.
<head>
<link rel="stylesheet" type="text/css" href="mystyle.css">
</head>
Try to include the code to head as I show above for mystyle.css rewrite your own css file make sure to have the same name as your css file is check if a letter is capital .
I saw also you write text/css instead of test.css which is correct .

External CSS file is not loading with link tag

I'm starting a new project with Angular and facing an issue.
When I am trying to load an external CSS file with <link> it doesn't work but when I am using internal style with #import it does work!
Doesn't work with :<link rel="stylesheet" type="text/css" src="transmission.min.css">
Works with :<style>#import url('transmission.min.css');</style>
My files are located in the same directory (root of the app) :
/
/index.html
/transmission.min.css
/transmission.min.js
My CSS and JS files are concatenated and minified with grunt but I tried without it and same result.
Here is my index.html file :
<!doctype html>
<html>
<head>
<title>Transmission</title>
<meta name="viewport" content="width=device-width, initial-scale=1">
<link rel="stylesheet" type="text/css" src="transmission.min.css">
<style>
#import url('transmission.min.css');
</style>
<base href="/">
</head>
<body ng-app="transmission">
<div ng-view=""></div>
<script src="transmission.min.js"></script>
</body>
My CSS file just contain body{background-color: red;}
I checked my nginx configuration twice, and everything seems to be just fine.
I also checked with Safari inspector, I can access the CSS file at http://transmission.dev/transmission.min.css.
But it doesn't appears in the resources tab.
Moreover my Angular application loads perfectly.
If you have any idea ? :-D
Thank you
link tag uses href attribute as opposed the the src as you have specified. Please change and check.
It should be
<link rel="stylesheet" type="text/css" href="transmission.min.css">
link tag uses href and not src
Hope it helps!