Why isn't CSS working with apache2+mod_wsgi+python3+bottle?

Background: I am trying to stand up an Amazon EC2 instance using the ubuntu server. I have installed Python3.3.2, mod_wsgi-3.5, apache2, and bottle and jinja2 for python3. I can get a regular webpage to load using all of these components, e.g. it recognizes the jinja2 templates, and correctly interpolates variables passed in the python code to the html files. Furthermore, if I change the html in views/home.tmpl to have <body bgcolor="#b0c4de"> then I get the appropriate color.

Problem: I want to implement a good level of abstraction (and learn CSS in general), so I want my pages to have an external CSS to manage the HTML page attributes, etc. But I can't get things to work properly and I can't seem to figure out why.

Minimum (non)working example of the code:

My directory structure is:

ubuntu@ip-172-31-47-7:/var/www/helloworld$ ls -lrtR
.:
-rw-rw-r-- 1 ubuntu   ubuntu    162 Feb  4 23:55 adapter.wsgi
-rwxrwxr-x 1 www-data www-data 1044 Feb  5 04:10 helloworld.py
drwxrwxr-x 3 www-data www-data 4096 Feb  5 04:14 views

./views:
drwxrwxr-x 2 ubuntu   ubuntu   4096 Feb  5 04:04 css
-rw-rw-r-- 1 www-data www-data  431 Feb  5 04:14 home.tmpl

./views/css:
-rw-rw-r-- 1 ubuntu ubuntu 34 Feb  5 04:04 homestyle.css

adapter.wsgi is just a wrapper to launch bottle.default_app():

import sys, os, bottle
sys.path = ["/var/www/helloworld/"] + sys.path
os.chdir(os.path.dirname(__file__))
import helloworld
application = bottle.default_app()

helloworld.py is pretty simple as well:

from bottle import default_app, debug, get, post, request, route, run
from bottle import jinja2_template as template
from bottle import jinja2_view as view

@route("/hello")
def hello(name=None):
    return template('home.tmpl', name=name)

views/home.tmpl has some jinja2-specific code, but is short. note the <link ...> line; I feel like this is where I'm having the trouble:

<!DOCTYPE HTML PUBLIC "-//W3C//DTD HTML 4.01//EN">
<html lang="en">
<head>
    <link rel="stylesheet" type="text/css" href="views/css/homestyle.css">
    {% block head %}
    <title>{% block title %} {% endblock %}Jinja2-Templated Webpage!</title>
    {% endblock %}
</head>
<body>
    {% if name is string: %}
    Hello {{ name.title() }}
    {% else: %}
    Hello world...
    {% endif %}
</body>

and my views/css/homestyle.css is as simple as could be:

body {background-color: #b0c4de;}

I have tried moving the placement of homestyle.css to be in the views directory, or in the "top-level" directory (/var/www/helloworld here); I've also tried using different links in my href=, including an absolute path. All to no avail, I cannot get this CSS to color my webpage. Any help is greatly appreciated!

Answers


If possible, let Apache serve your css file; don't put it under views. And remember that your stylesheet's href is relative to your web page's URI, not to the directory where Bottle runs.

So, if you hit the page at http://myhost/hello, then use this:

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

and put homestyle.css in /var/www/helloworld/css/.

Hope that helps!


Need Your Help

Need help about softwares for managing both php & mysql on Mac OS X

php mysql osx-lion mamp wampserver

I need help about softwares like MAMP, Wamp Server &amp; ... to managing both php &amp; mysql on mac os x. can u share me somthing like a list that will do this to me? it's to important for me caus...

Highlight menu and submenu in MVC 3?

asp.net asp.net-mvc-3 menu highlight

I am trying to create a menu that highlights the current page. I have found a few answers here, but the problem is I can't see that anyone handles submenus.