Customising templates

You can customise the source code of your website. See demo.

Templates

Templates generate the source code of your website. Let's see how templates are made. The default template is defined in the system settings. A different template can be defined in the settings at the top of each page, for example Template: default.

Snippets are the building blocks of your website. They are small pieces of HTML and PHP. You can put everything into one template, but it's often more practical to split up a template into multiple snippets and to reuse them. Do what works best for you.

Custom template

The template defines which snippets will be used. To adjust the source code of your website change the template or the corresponding snippets. You can also create a new template, for example Template: custom.

Here's an example template file system/themes/templates/custom.html:

<?php $yellow->snippet("header") ?>
<?php $yellow->snippet("content-custom") ?>
<?php $yellow->snippet("footer") ?>

Here's an example snippet file system/themes/snippets/content-custom.php:

<div class="content">
<div class="main">
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
<?php echo $yellow->page->getContent() ?>
</div>
</div>

Here's an example snippet for showing page content with additional meta data:

<div class="content">
<div class="main">
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
<?php echo $yellow->page->getContent() ?>
<p><?php echo $yellow->page->getHtml("author") ?></p>
</div>
</div>

Here's an example snippet for showing latest blog pages:

<?php $pages = $yellow->pages->index()->filter("template", "blog")->sort("published", false)->limit(5) ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<?php $yellow->page->setHeader("Cache-Control", "max-age=60") ?>
<div class="content">
<div class="main">
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
<?php echo $yellow->page->getContent() ?>
<?php foreach($pages as $page): ?>
<h3><a href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getDateHtml("published") ?> &nbsp; <?php echo $page->getHtml("title") ?></a></h3>
<?php endforeach ?>
</div>
</div>

Custom navigation

At the top is the header with the navigation. There's a default navigation 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 sub level pages
Navigation: navigation-search shows search bar from the search plugin

Here's an example snippet file system/themes/snippets/navigation.php:

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
</ul>
</div>
<div class="navigation-banner"></div>

Here's an example snippet to show additional links in the navigation:

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
<li><a href="https://twitter.com/datenstromse">Twitter</a></li>
<li><a href="https://github.com/datenstrom">GitHub</a></li>
<li><a href="https://instagram.com/datenstromse">Instagram</a></li>
</ul>
</div>
<div class="navigation-banner"></div>

Here's an example snippet to show icons and symbols in the navigation:

<?php $pages = $yellow->pages->top() ?>
<?php $yellow->page->setLastModified($pages->getModified()) ?>
<div class="navigation">
<ul>
<?php foreach($pages as $page): ?>
<li><a<?php echo $page->isActive() ? " class=\"active\"" : "" ?> href="<?php echo $page->getLocation(true) ?>"><?php echo $page->getHtml("titleNavigation") ?></a></li>
<?php endforeach ?>
<li><a href="https://twitter.com/datenstromse"><i class="fa fa-twitter fa-lg"></i></a></li>
<li><a href="https://github.com/datenstrom"><i class="fa fa-github fa-lg"></i></a></li>
<li><a href="https://instagram.com/datenstromse"><i class="fa fa-instagram fa-lg"></i></a></li>
</ul>
</div>
<div class="navigation-banner"></div>

At the bottom is the footer. To adjust the footer change the corresponding snippet. The template defines which snippets will be used. You can either change the available snippet or create a new snippet.

Here's an example snippet file system/themes/snippets/footer.php:

<div class="footer">
<div class="siteinfo">
<a href="<?php echo $yellow->page->base."/" ?>">&copy; 2017 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="<?php echo $yellow->page->get("pageEdit") ?>">Edit</a>.
<a href="<?php echo $yellow->text->get("yellowUrl") ?>">Made with Yellow</a>.
</div>
</div>
</div>
<?php echo $yellow->page->getExtra("footer") ?>
</body>
</html>

Here's an example snippet to show additional links in the footer:

<div class="footer">
<div class="siteinfo">
<a href="<?php echo $yellow->page->base."/" ?>">&copy; 2017 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="<?php echo $yellow->page->base."/sitemap/" ?>">Sitemap</a>.
<a href="<?php echo $yellow->page->base."/feed/page:feed.xml" ?>">Feed</a>.
<a href="<?php echo $yellow->page->get("pageEdit") ?>">Edit</a>.
<a href="<?php echo $yellow->text->get("yellowUrl") ?>">Made with Yellow</a>.
</div>
</div>
</div>
<?php echo $yellow->page->getExtra("footer") ?>
</body>
</html>

Here's an example snippet to divide the footer into left and right:

<div class="footer">
<div class="siteinfo">
<div class="siteinfo-left">
<a href="<?php echo $yellow->page->base."/" ?>">&copy; 2017 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="<?php echo $yellow->page->get("pageEdit") ?>">Edit</a>.
</div>
<div class="siteinfo-right">
<a href="<?php echo $yellow->text->get("yellowUrl") ?>">Made with Yellow</a>.
</div>
<div class="siteinfo-banner"></div>
</div>
</div>
</div>
<?php echo $yellow->page->getExtra("footer") ?>
</body>
</html>

Custom sidebar

To show a sidebar add the file sidebar.txt to a content folder. The sidebar will be shown on all pages in the same folder. A different sidebar can be defined in the settings at the top of each page, for example Sidebar: sidebar.

Here's an example sidebar file content/1-home/sidebar.txt:

---
Title: Sidebar
Status: hidden
---
Links

* [Twitter](https://twitter.com/datenstromse)
* [GitHub](https://github.com/datenstrom)
* [Instagram](https://instagram.com/datenstromse)

Next: API for developers →