css class using jinja2 does not work

Asked

Viewed 46 times

0

I’m trying to put css styles but just took the first block of code in my css style.
css style.

  h1 {
    color: blue;
}

.login {
  display: inline-block;
  padding: 15px;
  border-radius: 4%;
  text-decoration: none;
  margin: 12px;
  color: white;
  background-color: #34ADFB;
  transition: background-color 400ms ease-out;
}

.login:hover {
  background-color: #2B96DA;
}

.login:active {
  background-color: #34ADFB;
}

hello.html

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Hello from flask</title>
    <link rel="stylesheet" href="{{ url_for('static', filename='style.css')}}">
</head>
<body>
    {%- if name %}
        <h1>Hello {{ name }}!</h1>
    {% else %}
        <h1>Hello World!</h1>
    {% endif -%}
    <a class="login" href="{{ url_for('login') }}">Fazer login agora!</a>
</body>
</html>

When I give run in flask, only this block appears:

  h1 {
    color: blue;
}

Obs: I’ve tried my css on jsbin site, and it worked normally.

Edit:

project structure

flask-test 
   /static 
      style.css 
   /templates 
      hello.html 
      login.html 
   run.py

Obs2: I’m using pycharm to do the project

html css python web-application flask

  • Maybe it’s just a detail. You tried to change )}} for ) }} (adding a space) in the css line?

  • I tried to change yes, but it’s still the same thing. thanks for the help!

  • update your post with the project’s directory structure.

  • Could put an output of the console, and one of loading the browser page of the network tab ?

  • everything you are showing there is correct - in my experience, this kind of "ghost" happens when we are saving the changes in a file, thinking we are modifying another - in case: check if you are really saving the style.css in the right place, and did not give a "save as..." and forgot at some point.

  • Hello, I opened and reopened by pycharm, and is saving right(pycharm has auto save). I have already tested go in the explorer directory and open the . css in notepad, and it’s normal. I also tried to run by VS code, but nothing happened...

  • I managed to solve, I realized that when I first start the server, it gives the get in my style.css, and when I restart it, it only gives get in html, and nothing else, even giving F5. found the solution in the browser dar CTRL + SHIFT + R, based on this question of stackoverflowi: https://stackoverflow.com/questions/45567877/why-wont-my-flask-app-connect-to-my-css-files/45588180

Show 2 more comments

1 answer

-1

Hello, You can do a test using a relative path instead of a dynamic css URL.

<link rel="stylesheet" href="../static/style.css">

Abs.

Browser other questions tagged html css python web-application flask

You are not signed in. Login or sign up in order to post.