Skip to navigation

Themes, Layouts and Templates

Themes are stored in /usr/share/pyplate/themes. Each theme consists of a folder named after the theme. The folder contains a file called theme.css and a file called layouts.py. The CSS file contains all the styling information for the theme. Colours, visual effects and fonts are all defined in the CSS file.

Layouts.py contains strings of HTML defined as Python variables. Each string represents a layout for a type of page or part of a page. There is a layout for pages in the admin section, a layout for pages with individual posts, a layout for pages with several posts (pages showing all the posts in a category) and a layout for uncategorized pages. Layouts.py also contains layouts for the sidebar and the page header.

In Pyplate's database, each record has a field for the layout that should be used to display that page. When a page is generated, a function named getlayout is called, and the layout name from the database is passed to it as an argument. For each layout, there's a section of code in getLayout that formats the layout string.

For example, a theme's post_layout string may be defined in layouts.py as follows:

post_layout=""" <body> {banner} {navbar} <div id="container"> {bannerad} <div id="midpage"> {sidebar} {post_header} {breadcrumbs} {posts} {section_menu} {comments} </div><!-- midpage --> </div><!-- end_container --> {footer} <script src="/js/jquery-1.7.2.min.js"></script> <script src="/js/lightbox.min.js"></script> </body> </html> """

The strings contained in braces are fields that will be replaced when the layout is formatted. In getLayout, the post_layout string can be formatted like this:

if layout == "post_layout": return post_layout.format( banner=pyplate.getFile(pyplate.getCMSRoot() + "/template/banner.html"), navbar=pyplate.getFile(pyplate.getCMSRoot() + "/template/navbar.html"), sidebar=pyplate.getSidebar(), post_header=pyplate.getFile(pyplate.getCMSRoot() + "/template/post_header.html"), breadcrumbs=pyplate.get_breadcrumbs(dbase, page.posts[0]), posts=page.doPosts(dbase), section_menu=pyplate.get_category_menu(dbase, page.category), comments=pyplate.getFile(pyplate.getCMSRoot() + "/template/comments.html"), footer=pyplate.getFile(pyplate.getCMSRoot() + "/template/footer.html"))

The formatted layout string is returned to index.py, and then printed to the user's browser. Some fields are filled in with the contents of files from the template directory, such as the banner, navbar and footer. Other parts of the page are generated using the Pyplate API, such as the sidebar, breadcrumbs, and the posts for that page.

The code in the layout string and getLayout can be customized to change the way pages are formatted.

Symbolic links

When pyplate needs to access the current theme's CSS file, it uses a symbolic link in the web server's root directory called default_theme.css. This link points to the CSS file in the current theme. There is also a symbolic link for the current themes' layouts file in /usr/lib/cgi-bin/layouts.py. So if the current theme is named Edge, the symbolic link in /var/www/default_theme.css points to /usr/share/pyplate/themes/Edge/theme.css, and the link in /usr/lib/cgi-bin/layouts.py will point to /usr/share/pyplate/themes/Edge/layouts.py.

The template directory

In most web sites, there are some page components that are the same across the entire site. These page components usually include the banner, footer, sharing widgets, and parts of the sidebar. The code for these page components is stored in HTML files in /usr/share/pyplate/template. The templates for the banner, navbar and footer can be edited in the Site Setting's page in Pyplate's Admin area.

Share this page:

Follow me