0

I am building a flask based website, but I can't seem to figure out how to point to css files (as opposed to embedding them in the html file).

This arrangement works as expected:

directory structure like this:

.
├── controller.py
└── templates
    ├── private
    │   └── bio.html
    ├── public
    │   └── index.html
    └── structure.html

and structure.html with the css included in the file, like this:

<!DOCTYPE html>
<html lang="en">
<style type="text/css">


/* IMPORTED FONTS GET EMBEDDED HERE, SELECT IMPORT OPTION FROM FONT PAGE
site : https://fonts.google.com/?selection.family=Montserrat|Oswald 
add font-family CSS info below, add to style for page element
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Oswald&display=swap');

* 
{
    margin: 0px;
    padding: 0px;
}

body{
   font-family: '',serif;
   background-color: grey;

}



.title {
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    margin-left: 20px;
}

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    nav ul li {
      float: left;
    }

    nav ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    nav ul li a:hover {
      background-color: #111;
    }


/* TITLE STYLES */

    #titlediv {
        background-color:cornflowerblue;
        width: 100%;
        height: 100px;
        padding-top: 20px;
    }

    h3{color: black;
    text-shadow: #e0e0e0 1px 1px 0;
    }

nav {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
z-index: 2;
}




/* BODY STYLES */

    #bodydiv {
        background-color:grey;
        width: 100%;
        height: auto;

        padding-left: 20px;
        padding-top: 20px;
   padding-bottom: 20px;
   height: 2000px;
   z-index: 1;


/* BODT GRADIENT GOES HERE  :    https://www.colorzilla.com/gradient-editor/      */

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* 
*/


    }
input, td {
padding: 5px;
}

</style>


    <head>
        <!-- This is NOT displayed in the browser's VIEWPORT -->
        <meta charset="utf-8">
        {% if METADATA["page_title"] %}
            <title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
        {% else %}
            <title>{{ METADATA["website_title"] }}</title>
        {% endif %}

    </head>


    <body>

        <div id="titlediv">
        <h3 class="title">My website</h3>
        </div>
        <!-- This is displayed in the browser's viewport -->
        {% block viewport %}
            <nav>
                <ul>
                    <li>
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <a href="/gallery"> Gallery</a>
                    </li>
                </ul>
            </nav>

<div id="bodydiv">

            {% block main_section %}
                <!-- Everything not in the navigation, right now -->
                <p>this is from `main_section`</p>
            {% endblock %}

        {% endblock %}

</div>

    </body>
</html>

However, if I try to point to a css file from structure.html, the css does not load:

file structure:

.
├── controller.py
├── styles
│   └── main_style.css
└── templates
    ├── private
    │   └── bio.html
    ├── public
    │   └── index.html
    └── structure.html

structure.html:

<!DOCTYPE html>
<html lang="en">
<link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='styles/main_style.css') }}">


    <head>
        <!-- This is NOT displayed in the browser's VIEWPORT -->
        <meta charset="utf-8">
        {% if METADATA["page_title"] %}
            <title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
        {% else %}
            <title>{{ METADATA["website_title"] }}</title>
        {% endif %}

    </head>


    <body>

        <div id="titlediv">
        <h3 class="title">My website</h3>
        </div>
        <!-- This is displayed in the browser's viewport -->
        {% block viewport %}
            <nav>
                <ul>
                    <li>
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <a href="/gallery"> Gallery</a>
                    </li>
                </ul>
            </nav>

<div id="bodydiv">

            {% block main_section %}
                <!-- Everything not in the navigation, right now -->
                <p>this is from `main_section`</p>
            {% endblock %}

        {% endblock %}

</div>

    </body>
</html>

main_style.css


/* IMPORTED FONTS GET EMBEDDED HERE, SELECT IMPORT OPTION FROM FONT PAGE
site : https://fonts.google.com/?selection.family=Montserrat|Oswald 
add font-family CSS info below, add to style for page element
*/

@import url('https://fonts.googleapis.com/css?family=Montserrat&display=swap');
@import url('https://fonts.googleapis.com/css?family=Montserrat|Oswald&display=swap');

* 
{
    margin: 0px;
    padding: 0px;
}

body{
   font-family: '',serif;
   background-color: grey;

}



.title {
    font-family: 'Oswald', sans-serif;
    font-size: 50px;
    margin-left: 20px;
}

    nav ul {
      list-style-type: none;
      margin: 0;
      padding: 0;
      overflow: hidden;
      background-color: #333;
    }

    nav ul li {
      float: left;
    }

    nav ul li a {
      display: block;
      color: white;
      text-align: center;
      padding: 14px 16px;
      text-decoration: none;
    }

    nav ul li a:hover {
      background-color: #111;
    }


/* TITLE STYLES */

    #titlediv {
        background-color:cornflowerblue;
        width: 100%;
        height: 100px;
        padding-top: 20px;
    }

    h3{color: black;
    text-shadow: #e0e0e0 1px 1px 0;
    }

nav {
    -webkit-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
-moz-box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
box-shadow: 0px 1px 5px 0px rgba(0,0,0,0.75);
z-index: 2;
}




/* BODY STYLES */

    #bodydiv {
        background-color:grey;
        width: 100%;
        height: auto;

        padding-left: 20px;
        padding-top: 20px;
   padding-bottom: 20px;
   height: 2000px;
   z-index: 1;


/* BODT GRADIENT GOES HERE  :    https://www.colorzilla.com/gradient-editor/      */

/* Permalink - use to edit and share this gradient: https://colorzilla.com/gradient-editor/#cedce7+0,596a72+100;Grey+3D+%231 */
background: #cedce7; /* Old browsers */
background: -moz-linear-gradient(top, #cedce7 0%, #596a72 100%); /* FF3.6-15 */
background: -webkit-linear-gradient(top, #cedce7 0%,#596a72 100%); /* Chrome10-25,Safari5.1-6 */
background: linear-gradient(to bottom, #cedce7 0%,#596a72 100%); /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#cedce7', endColorstr='#596a72',GradientType=0 ); /* 
*/


    }
input, td {
padding: 5px;
}

As far as I can tell based on answers like this: Application not picking up .css file (flask/python) I am doing it right. What am I doing wrong?

edit:

This is my controller.py

#!/usr/bin/env python3
import os
from flask import Flask, render_template, request, session

app = Flask(__name__)
app.secret_key = SECRET_KEY = os.urandom(28)
METADATA = {'website_title':'My Site\' Application',
            'page_title': '',
            'post_title': ''}


@app.route('/', methods=['GET'])
def frontpage():
    METADATA['page_title'] = 'Are you loving it?'
    return render_template('public/index.html',
                            METADATA=METADATA)

@app.route('/bio')
def choose_file():
    METADATA['page_title'] = "My bio"
    return render_template('/private/bio.html',
                           METADATA=METADATA)





if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5002, debug=True)

According to the command line, the css file is being looked for at the correct path, but returning 404.

$ python controller.py
 * Serving Flask app "controller" (lazy loading)
 * Environment: production
   WARNING: This is a development server. Do not use it in a production deployment.
   Use a production WSGI server instead.
 * Debug mode: on
 * Running on http://0.0.0.0:5002/ (Press CTRL+C to quit)
 * Restarting with stat
 * Debugger is active!
 * Debugger PIN: 157-650-631
127.0.0.1 - - [28/Dec/2019 19:36:07] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [28/Dec/2019 19:36:08] "GET / HTTP/1.1" 200 -
127.0.0.1 - - [28/Dec/2019 19:36:08] "GET /static/css/main_style.css HTTP/1.1" 404 -
127.0.0.1 - - [28/Dec/2019 19:36:08] "GET /favicon.ico HTTP/1.1" 404 -
Stonecraft
  • 860
  • 1
  • 12
  • 30

1 Answers1

0

OK, got it using this answer: How to serve static files in Flask I think from now on I will define static and template paths explicitly in order to avoid confusion.

Here is what worked for me:

controller.py

#!/usr/bin/env python3
import os
from flask import Flask, render_template, request, session

app = Flask(__name__)

app = Flask(__name__,
            static_url_path='', 
            static_folder='static',
            template_folder='templates')


app.secret_key = SECRET_KEY = os.urandom(28)
METADATA = {'website_title':'My Site\' Application',
            'page_title': '',
            'post_title': ''}


@app.route('/', methods=['GET'])
def frontpage():
    METADATA['page_title'] = 'Are you loving it?'
    return render_template('public/index.html',
                            METADATA=METADATA)

@app.route('/bio')
def choose_file():
    METADATA['page_title'] = "My bio"
    return render_template('static/private/bio.html',
                           METADATA=METADATA)





if __name__ == '__main__':
    app.run(host='0.0.0.0', port=5002, debug=True)

directory structure:

.
├── controller.py
├── static
│   └── css
│       └── main_style.css
└── templates
    ├── private
    │   └── bio.html
    ├── public
    │   └── index.html
    └── structure.html

structure.html:

<!DOCTYPE html>
<html lang="en">

    <head>
        <meta charset="utf-8">
        {% if METADATA["page_title"] %}
            <link rel= "stylesheet" type= "text/css" href= "{{ url_for('static',filename='css/main_style.css') }}">
            <title>{{ METADATA["page_title"] }} - {{ METADATA["website_title"] }}</title>
        {% else %}
            <title>{{ METADATA["website_title"] }}</title>
        {% endif %}

    </head>


    <body>

        <div id="titlediv">
        <h3 class="title">My website</h3>
        </div>
        {% block viewport %}
            <nav>
                <ul>
                    <li>
                        <a href="/">Home</a>
                    </li>
                    <li>
                        <a href="/bio"> Bio</a>
                    </li>
                </ul>
            </nav>

<div id="bodydiv">

            {% block main_section %}
                <!-- Everything not in the navigation, right now -->
                <p>this is from `main_section`</p>
            {% endblock %}

        {% endblock %}

</div>

    </body>
</html>
Stonecraft
  • 860
  • 1
  • 12
  • 30