HTML files

Here's how to adjust the 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 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">
<?php $this->yellow->layout("sidebar") ?>
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContent() ?>
</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">
<?php $this->yellow->layout("sidebar") ?>
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContent() ?>
<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">
<?php $this->yellow->layout("sidebar") ?>
<div class="main" role="main">
<h1><?php echo $this->yellow->page->getHtml("titleContent") ?></h1>
<?php echo $this->yellow->page->getContent() ?>
<?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.

Customising navigation

The installation comes with several navigations and you can create more layout files. The default navigation is defined in the system settings. A different navigation can be defined in the settings at the top of each page, for example Navigation: navigation.

The following navigations are available:

Navigation: navigation shows top level pages
Navigation: navigation-tree shows all pages
Navigation: navigation-sidebar shows pages in sidebar

Next: CSS files →