How to customise a layout

Here's how to customise a layout of your website.

Customising HTML

To adjust the HTML code of your website change the layout. Let's see how layouts are made. The default layout is defined in the system settings. A different layout can be defined in the page settings at the top of each page, for example Layout: default.

Here's an example file system/layouts/default.html:

<?php $this->yellow->layout("header") ?>
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>
</div>
</div>
<?php $this->yellow->layout("footer") ?>

Here's an example layout for showing page content and additional HTML code:

<?php $this->yellow->layout("header") ?>
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>
<p>Hello world</p>
</div>
</div>
<?php $this->yellow->layout("footer") ?>

Here's an example layout for showing page content and additional blog pages:

<?php $this->yellow->layout("header") ?>
<div class="content">
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContentHtml() ?>
<?php $pages = $this->yellow->content->index()->filter("layout", "blog")->sort("published", false)->limit(5) ?>
<?php $this->yellow->page->setLastModified($pages->getModified()) ?>
<?php $this->yellow->page->setHeader("Cache-Control", "max-age=60") ?>
<table>
<?php foreach ($pages as $page): ?>
<tr>
<td><a href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("title") ?></a></td>
<td><?php echo $page->getHtml("author") ?></td>
<td><?php echo $page->getDateHtml("published") ?></td>
</tr>
<?php endforeach ?>
</table>
</div>
</div>
<?php $this->yellow->layout("footer") ?>

Themes can have their own layout files, to override the existing layout. Add a theme to the file name. For example the file system/layouts/default.html will be used with any theme, the file system/layouts/stockholm-default.html will only be used with Theme: stockholm.

Do you have questions? Get help.