old web2py blog

How to convert a Joomla 1.x template to a web2py layout:

1) Download a Joomla template and unzip it. You will find

 index.php
 css (folder)
 images (folder)
 template_thumbnail.png
 templateDetails.xml

2) Move the css and images folders, and the template_thumbnail.png file into yourapp/static/

3) edit the index.php file and:

Replace

 <?php echo _LANGUAGE; ?>

with

 {{=response.language or 'US-en'}}

Replace

 <?php mosShowHead(); ?>

with

 <title>{{=response.title}}</title>
 <meta name="title" content="{{=response.title}}" />
 <meta name="author" content="{{=response.author}}" />
 <meta name="description" content="{{=response.description}}" />
 <meta name="keywords" content="{{=response.keywords}}" />
 <meta name="robots" content="index, follow" />
 {{include "web2py_ajax.html}}

Replace

 <link href="templates/<?php echo $cur_template; ?>/css/template_css.css" rel="stylesheet"
     type="text/css" media="screen" />

with

 <link href="{{=URL(r=request,c='static',f='css/template_css.css')}}" rel="stylesheet"
     type="text/css" media="screen" />

Replace

 <?php mospathway()?>

with

 {{=response.pathway or ''}}

Replace

 <?php echo $mosConfig_sitename;?>

with

  {{=response.title}}

Replace

 <?php mosLoadModules('left');?>

with

 {{if response.menu:}}
 <div id="mainlevel">
     <ul>
        {{for _name,_active,_link in response.menu:}}<li>
          <a href="{{=_link}}" {{if _active:}}id="active_menu"{{pass}} class="mainlevel">{{=_name}}</a>
        </li>{{pass}}
     </ul>
 </div>
 {{pass}}

Replace

 <?php mosMainBody();?>

with

 {{if response.flash:}}<div id="flash">{{=response.flash}}</div>{{pass}}
 {{include}}

Remove every other <?php ....?>.

4) Move the edited file index.php into yourapp/views/layout.html

5) Add the following lines to yourapp/static/css/template_css.css

#flash { margin: 0 auto; text-align: center; clear: both; border: 1px #000000;
         background-color: #FF5C1F; color: white; margin-top: 0.0em; 
         margin-bottom: 1.0em; padding-top: 1.0em; padding-bottom: 1.0em; 
         cursor: pointer; }
div.error { background-color: red; color: white; padding: 3px}

Notes

To repackage your newly created web2py layout simply tar together:

views/layout.html
static/css/*
static/images/*
static/template_thumbnail.png

If you repackage it, also add a file template.readme.license with a copy of the original license a notice that says you have modified it. Make sure you comply with the original license.

The value of id in line

 <div id="mainlevel">

may have to be different. Look in the css file if the menu does not look ok.