Question 45686 in CSS Question posted in
Some basic documentation can be found here.

CSS in Flask are confused

I have a problem in python flask and I need everyone’s help. My CSS is not working properly and is completely crooked and out of place. The Front-End did an incredible job, I already put all the settings on static_files and in the terminal it only shows 304 and even opening a new route it doesn’t give a display of 200 in the status code return. And when I open all the pages, all the CSS settings are messed up and disorganized. Is anyone else having a problem with this too?

I tried to open a new route to try to solve the problem and cleared the cache but it still persists.

The folder organization are like this

Organization of folders

 - Main.py 

 -- static_files (folder)
 --- fontes (folder)
 --- icones (folder)
 --- imagens (folder)
 --- js_files (folder)
 -- css_content.css
 -- css_content.css
 -- css_content.css
 -- css_content.css

 --- templates (folder)
 -- html_content.html
 -- html_content.html
 -- html_content.html
 -- html_content.html

The terminal are giving the 304 code and does not apply the CSS correctly on the page

Terminal Image

And all the animations made it by the front end and the buttons, everything are not organized at all but when i open without the Flask application its all good.

The html files are like this to call the CSS

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <link rel="stylesheet" href="/staticFiles/login.css">
    <link rel="stylesheet" href="/staticFiles/stylesheet.css">
    <link rel="stylesheet" href="/staticFiles/style.css">
    <title>login</title>
</head>

And the main flask are setting the static folder like this:

app = Flask(__name__, template_folder='templates', static_folder='staticFiles')

Someone please help me!

Thank you all

Tags:

2

Answers


  1. 0

    Kindly check your name structure.
    I am seeing you type "staticFiles" here

    <link rel="stylesheet" href="/staticFiles/login.css">

    but you have "static_files" here

     - Main.py 

 -- static_files (folder)

    Generally, you really dont have to initialize your flask like this

    app = Flask(__name__, template_folder='templates', static_folder='staticFiles')

    You could just do

    app = Flask(__name__)

    As long as you name the folders "templates" and "static" and they are in the same path as the app.py(or any other file you are using to initialize your flask app)
    Flask will automatically use them.

    For your html file, you can reference the css file in this manner

    <link rel="stylesheet" href="/static/css/xyz.css" media="screen">

    Kindly let me know if this helps you. Or if there’s any adjustment

    Login or Signup to reply.
  2. 0

    Use the template function url_for. Make sure to render the html with render_template.

    <link rel="stylesheet" href="{{ url_for('staticFiles', filename='style.css')">
    Login or Signup to reply.
Please signup or login to give your own answer.

Back To Top
Search