Cannot serve local static CSS file using python package web.py only HTML displays

Question

I am currently taking a python course and when the page loads it will not display with any of the CSS.

I have my Controller.py in the root directory D:\Coding\Python_Projects\Py\CodeWizard

My CSS files are in D:\Coding\Python_Projects\Py\CodeWizard\static\css

My HTML files are in D:\Coding\Python_Projects\Py\CodeWizard\Views\Templates

Controller.py

import web


urls = (
    '/', 'home'
    )

render = web.template.render("Views/Templates", base="MainLayout")
app = web.application(urls, globals())


# Classes/Routes
class home:
    def GET(self):
        return render.home()


if __name__ == "__main__":
    app.run()

MainLayout.html:

$def with (page)
$var css: \\static\css\bootstrap.min.css \\static\css\bootstrap-material-design.min.css

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>CodeWizard</title>

    $if self.css:
        $for style in self.css.split():
            <link rel="stylesheet" href="$style"/>

</head>
<body>
  <div id="app">
    <nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-lg">
      <div class="navbar-header">
        <a class="navbar-brand">CodeWizard</a>
      </div>

      <div class="nav navbar-nav mr-auto mt-2 mt-lg-0">
        <a class ="nav-item nav-link" href="/">Home Feed</a>
        <a class ="nav-item nav-link" href="/discover">Discover</a>
        <a class ="nav-item nav-link" href="/profile">Profile</a>
        <a class ="nav-item nav-link" href="/settings">Settings</a>
      </div>

      <div class="pull-right">
        <a href"/register" class="btn btn-raised btn-default">Register</a>
      </div>
    </div>
      $:page
  </nav>
</body>
</html>

home.html:

<br /> <br /> <br />

<div class="container">
<h1>Hello CodeWizard</h1>
</div>

If I don't put the extra slash in front of static for the css file location I get a few console errors like StaticApp has no attribute directory and invalid literal for int() with base 10

With the extra slash included I get a 200 OK message. When I inspect the page and look at network it shows for the CSS files a status of cancelled.

Not sure how to fix this. I tried searching quite a bit. I created a shortcut for chrome with

"C:\Program Files (x86)\Google\Chrome\Application\chrome.exe" --allow-file-access --disable-web-security --user-data dir="C:\ChromeLocalFileAccess"

That did not work and I also tried the direct path to the css files along with also trying file:/// and numerous other combinations.

If anyone can help me would be greatly appreciated so I can continue on in the course and learn more python :) Thank you in advance.

Not having a windows setup, I suggest: The paths (they're URLs, not Windows paths) should be regular slash, not back slash. Try using $var css: /static/css/bootstrap.min.css /static/.... The files themselves should exist in the "static" subdirectory of your application, for example: D:\Coding\Python_Projects\Py\CodeWizard\static\css\bootstrap.min.css — pbuck
– pbuck, Commented Jan 25, 2019 at 17:09
The slashes don't seem to make a difference, and I have tried all variations including static/css/bootstrap.min.css and I also tried /static/css/bootstrap.min.css Both attempts give me the following: AttributeError: 'StaticApp' object has no attribute 'directory' ValueError: invalid literal for int() with base 10 When I put //static/css/bootstrap.min.css I don't get the errors, but it also doesn't load the css. — Bernie Green
– Bernie Green, Commented Jan 28, 2019 at 7:33
Python 3.7 and most up to date web.py from github (web.py-0.40.dev1-py3.7.egg). — Bernie Green
– Bernie Green, Commented Jan 29, 2019 at 15:33

tromgy · Accepted Answer · 2019-12-12 00:39:51Z

1

This was an issue with web.py running in Python 3.7 environment. It has been fixed by this pull request.

With that fixed your paths should not start with \\:

either

$var css: static\css\bootstrap.min.css static\css\bootstrap-material-design.min.css

or

$var css: static/css/bootstrap.min.css static/css/bootstrap-material-design.min.css

will work

answered Dec 12, 2019 at 0:39

tromgy

5,9134 gold badges23 silver badges23 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Bahlbi · Accepted Answer · 2020-09-01 14:29:46Z

this works for me so try this in the mainLayout.html

$def with (page)
$var css: static/css/bootstrap.min.css

<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>mainlayout</title>
    $if self.css:
        $for style in self.css.split( )
            <link rel ="stylesheet" href="$style" />
</head>
<body>
     <div id="app">
    <nav class="navbar navbar-dark bg-primary fixed-top navbar-expand-lg">
      <div class="navbar-header">
        <a class="navbar-brand">CodeWizard</a>
      </div>

      <div class="nav navbar-nav mr-auto mt-2 mt-lg-0">
        <a class ="nav-item nav-link" href="/">Home Feed</a>
        <a class ="nav-item nav-link" href="/discover">Discover</a>
        <a class ="nav-item nav-link" href="/profile">Profile</a>
        <a class ="nav-item nav-link" href="/settings">Settings</a>
      </div>

      <div class="pull-right">
        <a href="/register" class="btn btn-raised btn-default">Register</a>
      </div>

    </div>
   <div>
       $:page
   </div>


</body>
</html>

Collectives™ on Stack Overflow

Cannot serve local static CSS file using python package web.py only HTML displays

2 Answers 2

Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related