Skip to first unread message
Austin Taylor
Mar 7, 2014, 7:55:10 PM3/7/14
to web...@googlegroups.com
Hello,
I purchased this CSS template and I want to integrate web2py with it (because I love web2py).
It has multiple html files it references, js files, and css sheets.
Index.html located here: http://pastebin.com/zbnWjs1v
How would I be able to normalize this enough to where I can extend the "layout.html" into other sheets and use all of the .js/css that comes with it?
I've tried for 2 days now and I keep running into issues. Even when I try to just return locals() (if I put the index.html in views) it still doesn't apply the css sheets. I've tried using {{=URL('static','css/style.css')")}} with no luck either.
Please help me find the best way to make this page normal.
Paolo Caruccio
Mar 8, 2014, 9:08:29 AM3/8/14
to web...@googlegroups.com
It's just a demo. The code is not tested. You should consider this only as a very basic reference. The filenames here reported are only conventional you should use yours.
1) put the css files of the template in static/css folder of your web2py application;
2) put the js files of the template in static/js folder of your web2py application. Please note that jquery is already shipped with web2py (check web2py_ajax.html);
3) assuming that the index.html located to http://pastebin.com/zbnWjs1v is the main file of the template, you should modify it in order to get advantage of the web2py features and save it in the views folder as layout_custom.html (check the layout_custom.html here attached). Please note the {{include}} that replaced the main content and the changes in the <head> section;
4) create in views/default folder a file named intro.html (here attached) containing the main content from the index.html of the template and extending layout_custom.html;
5) in controller/default.py add the following:
def intro():
return locals()6) in the browser see http://ipserver/appname/default/intro page (of course you have to replace ipserver and appname with real values).
As said this is only a basic guide. You should make other adjustments in order to obtain a full working layout based on the template but we are here to help you in case of necessity.
Jim S
Mar 8, 2014, 12:31:47 PM3/8/14
to web...@googlegroups.com
Yes, web2py is still the right choice. I'm using templates from wrapbootstrap.com for a couple apps. You have to adjust your layout.html and then realize that web2py's form generation might be a little funky. I'm not using any of the default forms generated by web2py, I override them with my own custom forms. But, this allows you a great amount of control over the layout of your site.
Jim
Austin Taylor
Mar 8, 2014, 2:31:03 PM3/8/14
to web...@googlegroups.com
Thank you so much, Paolo!! This is wonderful! It certainly helped my understanding. However, whenever I try to use this code: Only web2py.css and calendar.css work.
{{
response.files.insert(0,URL('static','css/web2py.css'))
response.files.insert(1,URL('static','css/bootstrap.min.css'))
response.files.insert(2,URL('static','css/bootstrap-responsive.min.css'))
response.files.insert(3,URL('static','css/web2py_bootstrap.css'))
response.files.insert(4,URL('static','css/style.css'))
response.files.insert(5,URL('static','css/style-desktop.css'))
}}
After a little troubleshooting I figured out the calendar.css was being pulled from web2py_ajax.html
Any idea on why the code above wouldn't work in the layout_custom.html? I REALLY appreciate your help. This has made such a difference!
Austin Taylor
Mar 8, 2014, 3:19:39 PM3/8/14
to web...@googlegroups.com
Okay figured that part out. Sorry about that. I was accidentally
editing the custom_layout.html which I had in my views/default folder
instead of just views. This layout references some of the pictures in
java scripts. For example: var settings = {
// Images
images: {
/*
Your slides, in this format:
'path/to/image.jpg': 'position',
where 'position' is the vertical/horizontal position (eg. 'center
center', 'top left').
Use wide/short images for best results.
*/
'images/slide01.jpg': 'bottom center',
'images/slide02.jpg': 'top center',
'images/slide03.jpg': 'bottom center'
},
// Transition speed (in ms)
speed: 3000,
// Transition delay (in ms)
delay: 4500
};
Is there a way for me to point to my pictures while in javascript? Can
I do {{URL('static','images/slide01.jpg')}} ?
> --
> Resources:
> - http://web2py.com
> - http://web2py.com/book (Documentation)
> - http://github.com/web2py/web2py (Source code)
> - https://code.google.com/p/web2py/issues/list (Report Issues)
> ---
> You received this message because you are subscribed to a topic in the
> Google Groups "web2py-users" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/web2py/_uG8b8zwdDk/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> web2py+un...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
editing the custom_layout.html which I had in my views/default folder
instead of just views. This layout references some of the pictures in
java scripts. For example: var settings = {
// Images
images: {
/*
Your slides, in this format:
'path/to/image.jpg': 'position',
where 'position' is the vertical/horizontal position (eg. 'center
center', 'top left').
Use wide/short images for best results.
*/
'images/slide01.jpg': 'bottom center',
'images/slide02.jpg': 'top center',
'images/slide03.jpg': 'bottom center'
},
// Transition speed (in ms)
speed: 3000,
// Transition delay (in ms)
delay: 4500
};
Is there a way for me to point to my pictures while in javascript? Can
I do {{URL('static','images/slide01.jpg')}} ?
> Resources:
> - http://web2py.com
> - http://web2py.com/book (Documentation)
> - http://github.com/web2py/web2py (Source code)
> - https://code.google.com/p/web2py/issues/list (Report Issues)
> ---
> You received this message because you are subscribed to a topic in the
> Google Groups "web2py-users" group.
> To unsubscribe from this topic, visit
> https://groups.google.com/d/topic/web2py/_uG8b8zwdDk/unsubscribe.
> To unsubscribe from this group and all its topics, send an email to
> web2py+un...@googlegroups.com.
> For more options, visit https://groups.google.com/d/optout.
Paolo Caruccio
Mar 8, 2014, 3:26:04 PM3/8/14
to web...@googlegroups.com
The following files are useful only if your template is based on bootstrap 2 (like the web2py scaffolding template):
- css/bootstrap.min.css
- css/bootstrap-responsive.min.css
- css/web2py_bootstrap.css
otherwise you should omit them.
What do you mean with "Only web2py.css and calendar.css work" ? Are you able to see if the browser gives errors by using its developers tools?
If you are not able then you could read:
for firefox https://developer.mozilla.org/en-US/docs/Tools
Anyway the simplest and trivial check is to verify if all the files are in the static/css folder.
Austin Taylor
Mar 8, 2014, 3:46:05 PM3/8/14
to web...@googlegroups.com
Thanks Paolo! I used firebug to check which css forms were pulling through and Calendar.css and web2py.css were being shown. However, when I started editing the proper custom_layout.html the other css files came through. It was a complete mistake on my end.
Paolo Caruccio
Mar 8, 2014, 4:09:56 PM3/8/14
to web...@googlegroups.com
About the javascript issue, if the script is in a view
should work.
should work but please test it.
"{{=URL('static', 'images/slide01.jpg')}}": 'bottom center'Instead, if the 'settings' variable is in an external javascript file and assuming that the javascript file is in the static/js folder
"../static/images/slide01.jpg": 'bottom center'should work but please test it.
Austin Taylor
Mar 8, 2014, 4:14:41 PM3/8/14
to web...@googlegroups.com
YOU'RE THE MAN!! The "{{=URL('static', 'images/slide01.jpg')}}": 'bottom center' didn't work, but the "../static/images/slide01.jpg": 'bottom center' did because the js file is in the js folder. THANK YOU THANK YOU THANK YOU!
Reply all
Reply to author
Forward
0 new messages