2

Google Appengine I am working on a Google App engine project but i cannot see my css.The code just appears plain. My styles can not be seen on the html page.

My app.yaml file is as shown below:

application: paymentgateway
version: 1
runtime: python
api_version: 1

handlers:

- url: .*
  script: main.py

- url: /css
  static_dir: css

My main.py file is as below:

from google.appengine.ext import webapp
from google.appengine.ext.webapp import util
from google.appengine.ext.webapp import template



class MainHandler(webapp.RequestHandler):
    def get(self):
       self.response.out.write(template.render('account_type.html',''))


def main():
    application = webapp.WSGIApplication([('/', MainHandler)],
                                     debug=True)
    util.run_wsgi_app(application)


if __name__ == '__main__':
    main()

account_type.html is as shown below:

<html>
<head>
<title></title>
<link href="css/styles.css" rel="stylesheet" type="text/css"/>
</head>
<body>
<div id="formwrap">
<div id="form">
<fieldset><legend><h3>Select Country and Account Type</h3></legend>
<form action="registration_form.html" method="post">
<div class="row">
<div class="label">Select Country </div><!--end .label-->
<div class="input">
<select name="country" class="detail" >
<option>--select country--</option>
<option>Uganda</option>
<option>Kenya</option>
<option>Tanzania</option>
<option>Rwanda</option>
</select>
</div><!--end .input-->
</div><!--end .row-->

<div class="row">
<div class="label">Account Types</div><!--end .label-->
<div class="input">
<input type="radio" name="account" class=""/>
</div><!--end .input-->
</div><!--end .row-->

<div id="submit">
<input id="submit" type="submit" name="submit" value="NEXT">
</div><!-- end #submit -->
</form>
</fieldset>
</div><!--end #form-->
</div><!--end #formwrap-->
</body>
</html>

i have my css in a css folder.

styles.css is as shown below:

body {
background:#E9E9E9;
}


#formWrap {
  width:720px;
  margin-top:30px;
  margin-left:30px;
  background:#FFF;
  border:1px solid #f1f1f1;
   -moz-border-radius:20px;
   -moz-box-shadow:2px 2px 5px #999;
   -webkit-border-radius:20px;
   -webkit-box-shadow:2px 2px 5px #999;
   padding:16px 10px 40px;

}
 #formWrap #form {
border:0px solid #EEE;
width:720px;


}
#form .row {

border:0;
display:block;
line-height:38px;
overflow:auto;
padding:24px 0px;
width:100%;
}
#form .row .label {
font-size:16px;
font-weight:bold;
font-family:Arial, Helvetica, sans-serif;
width:180px;
text-align:right;
float:left;
padding-right:10px;
margin-right:10px;



 }
 #form.row .input {
float:left;
margin-right:10px;
width:auto;
 }

 .detail{
width:260px;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
padding:7px 8px;
margin:0;
display:block;
border-radius: 5px 5px 5px 5px;
  background:#E9E9E9;
border:1px solid #CCC;
}
 .detail:focus{
 background-color:#FFF;
 border: 1px solid #999;
 outline: none;

}

 .message{
width:400px;
max-width:400px;
height:280px;
overflow:auto;
font-family:Arial, Helvetica, sans-serif;
font-size:20px;
padding:7px 8px;
line-height:1em;
margin:0;
display:block;

}

#form .row .context {
color:#000;
font-size:16px;
line-height:14px;
font-family:Arial, Helvetica, sans-serif;
margin-left:5px;

 }
 #formWrap #form #submit {
 font-family:Arial, Helvetica, sans-serif;
 margin-top:25px;
 margin-left:120px;
 color:#000;
font-size:16px;
text-shadow:1px 1px 1px #999;
padding:10px;
width:150px;
height:40px;

 }
span.error{
color:#000;
display:block;
font-family:Arial, Helvetica, sans-serif;
background-image:url(file:///C|/wamp/www/ContactForm/images/x.png);
background-repeat:no-repeat;
background-position:left 6px;
padding-left:25px;


}

So, when i run the project with Python Google Appengine, I can not see my styles on the page.

What is the problem?

Samuel Mugisha
  • 127
  • 2
  • 4
  • 1
    What does your browser say? does it try to load the css? do you get 404? is the path not what you think it should be? – Thilo Feb 22 '12 at 07:54
  • Does this also happen on the development server, or only in production ? Can you share the url where you have deployed your application? – proppy Feb 22 '12 at 12:40
  • This may be an old question, but I used this [solution][1] [1]: http://stackoverflow.com/a/31591467/1665739 – smoothBlue Jul 23 '15 at 15:17

2 Answers2

17

From the docs:

URL handler path patterns are tested in the order they appear in app.yaml

The problem with your app.yaml is that all urls are mapped to the main.py, so your static handler is never reached.

So your app.yaml should look like this:

application: paymentgateway
version: 1
runtime: python
api_version: 1

handlers:

- url: /css
  static_dir: css

- url: .*
  script: main.py

Note that here css static handler is listed before application handler.

Maxim
  • 1,783
  • 2
  • 14
  • 24
  • what if I have index.html static file and /assets directory with multiple sub-directories with many possible levels of directories? the above setup won't work – akkonrad Jun 10 '20 at 21:45
0

If you see this problem only when using chrome or safari you might just be facing the same issue I had which is a bug in AppEngine returning null as the content-type for css files. Upgrading to 1.6.2.1 fixed my problem.

mac
  • 5,627
  • 1
  • 18
  • 21