Error getting web.py to render html page that calls a css file

Question

Ok so I have the web.py file called app.py. app.py references index.html and foo.html.

Both of these html files call just fine, what I mean is when I run app.py and go to http://localhost:8080/ and http://localhost:8080/Foo both of them display a webpage just fine, the issue is with the foo.html file tho. I have a large section in there that is supposed to use the rotate.css file and make the text in the section spin. The problem is the text doesn't even show up.

Files are below:

app.py

import web

urls = (
    '/', 'Index',
    '/Foo', 'Foo'
)

app = web.application(urls, globals())

render = web.template.render('templates/')

class Index(object):
    def GET(self):
        greeting_Index = "Hello World"
        return render.index(greeting = greeting_Index)

class Foo(object):
    def GET(self):
        greeting_Foo = 'FooBAR'
        return render.foo(greeting = greeting_Foo)

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

foo.html

$def with (greeting)
$var cssfiles: static/rotate.css

<html>
    <head>
        <meta charset="UTF-8">
        <title>Foobar</title>
    </head>

<body>
$if greeting:
    <em style="color: red; font-size: 5em;">Welcome to the Foo bar. $greeting.</em>
$else:
    Herro world!

    <section class="rw-wrapper">
        <h2 class="rw-sentence">
            <span>Real poetry is like</span>
            <span>creating</span>
            <div class="rw-words rw-words-1">
                <span>breathtaking moments</span>
                <span>lovely sounds</span>
                <span>incredible magic</span>
                <span>unseen experiences</span>
                <span>happy feelings</span>
                <span>beautiful butterflies</span>
            </div>
            <br />
            <span>with a silent touch of</span>
            <div class="rw-words rw-words-2">
                <span>sugar</span>
                <span>spice</span>
                <span>colors</span>
                <span>happiness</span>
                <span>wonder</span>
                <span>happiness</span>
            </div>
        </h2>
    </section>

</body>

</html>

rotate.css

.rw-wrapper{
    width: 80%;
    position: relative;
    margin: 110px auto 0 auto;
    font-family: 'Bree Serif';
    padding: 10px;
}

.rw-sentence{
    margin: 0;
    text-align: left;
    text-shadow: 1px 1px 1px rgba(255,255,255,0.8);
}

.rw-sentence span{
    color: #444;
    white-space: nowrap;
    font-size: 200%;
    font-weight: normal;
}

.rw-words{
    display: inline;
    text-indent: 10px;
}

.rw-words span{
    position: absolute;
    opacity: 0;
    overflow: hidden;
    width: 100%;
    color: #6b969d;
}

.rw-words-1 span{
    animation: rotateWordsFirst 18s linear infinite 0s;
}

.rw-words-2 span{
    animation: rotateWordsSecond 18s linear infinite 0s;
}

.rw-words span:nth-child(2){
    animation-delay: 3s;
    color: #6b889d;
}

.rw-words span:nth-child(3){
    animation-delay: 6s;
    color: #6b739d;
}

.rw-words span:nth-child(4){
    animation-delay: 9s;
    color: #7a6b9d;
}

.rw-words span:nth-child(5){
    animation-delay: 12s;
    color: #8d6b9d;
}

.rw-words span:nth-child(6){
    animation-delay: 15s;
    color: #9b6b9d;
}

@keyframes rotateWordsFirst {
    0% { opacity: 1; animation-timing-function: ease-in; height: 0px; }
    8% { opacity: 1; height: 60px; }
    19% { opacity: 1; height: 60px; }
    25% { opacity: 0; height: 60px; }
    100% { opacity: 0; }
}

@keyframes rotateWordsSecond {
    0% { opacity: 1; animation-timing-function: ease-in; width: 0px; }
    10% { opacity: 0.3; width: 0px; }
    20% { opacity: 1; width: 100%; }
    27% { opacity: 0; width: 100%; }
    100% { opacity: 0; }
}

it looks like you dont have a route that specifies the css file, so when the client requests that css file the server doesnt know what todo, if your using a modern browser check the network tab in the develop console and see if your getting a 404 or 200 — Mouseroot
– Mouseroot, Commented Feb 24, 2014 at 21:40
I am getting a 200, is that bad, my apologies I am fairly unfamiliar with html. Also, i was under the impression that the $var cssfiles: static/rotate.css in the foo.html file is what pointed to the css file — user3221870
– user3221870, Commented Feb 24, 2014 at 21:43
I havent touched web.py since Arron died, but i belive that if you have the files in the static folder they are automatically served, and a 200 means the request is OK and a 404 means Not Found theyre called HTTP Response codes — Mouseroot
– Mouseroot, Commented Feb 24, 2014 at 21:50
so you are thinking that I am missing some type of reference in the app.py file about the rotate.css file? — user3221870
– user3221870, Commented Feb 24, 2014 at 21:52
yea that would be my best guess, I created an answer to better explain what i think may be the issue. — Mouseroot
– Mouseroot, Commented Feb 24, 2014 at 21:59

Mouseroot · Accepted Answer · 2014-02-24 21:56:44Z

1

According to http://webpy.org/cookbook/staticfiles you may have to alter your apache.conf file to allow apache to serve up those files.

And I did notice that nowhere in your html file do you actually link to the css file

<link rel="stylesheet" href="static/rotate.css" type="text/css">

somewhere in the head is missing or since your using it as a variable it should be

<link rel="stylesheet" href="$cssfiles" type="text/css">

answered Feb 24, 2014 at 21:56

Mouseroot

1,0742 gold badges9 silver badges13 bronze badges

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

1 Comment

user3221870 Over a year ago

i have added <link rel="stylesheet" href="$cssfiles" type="text/css" /> to the foo.html file and it seems that now I am getting an internal server error, think the web.py server is having trouble calling the css file, still working

Collectives™ on Stack Overflow

Error getting web.py to render html page that calls a css file

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related