PyroCMS » Theme Layouts

Designer Manuals

The basic idea is that most of your pages will share the same header, footer, wrapping navigation, etc and only the actual body of the page will change. Using this logic you can avoid repeating yourself and having lots of similar HTML. By using multiple layout files you can change the layout of your site for each module or for each page.

All layouts exist in addons/themes/<theme-name>/views/layouts/. Every theme should have a layout named "default" in addons/themes/views/layouts/. Additional layout files are optional.

Example Layout

Using the template Tag you can output the title, metadata and body to create the most basic layout possible:

<!DOCTYPE html>
<html>
<head>
	<title>{{ template:title }}</title>
	{{ template:metadata }}
</head>
<body>
	<h1>{{ template:title }}</h1>
	{{ template:body }}
</body>

</html>

Different Layouts

PyroCMS will check for a layout file that has the same name as a module. So if you want the blog module to have a sidebar with some widgets, or a totally different design, then you can create addons/themes/<theme-name>/views/layouts/blog.html. It will automatically be recognized and used instead of the default.html file. For extreme flexibility Pages can also make use of additional layout files. Check in CP > Pages > Page Layouts and select your desired file from the dropdown. This allows you to assign a number of pages to a Page Layout and use a different layout file for that group of pages.

Mobile Layouts

Instead of addons/themes/<theme-name>/views/layouts/default.html try addons/themes/<theme-name>/views/web/layouts/default.html and addons/themes/<theme-name>/views/mobile/layouts/default.html. Same for all your other layout files, they will load the mobile version if you browse to the page with anything CodeIgniter thinks is a mobile phone (not an iPad).