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