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.

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

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

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 a template up 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">
<?php $yellow->snippet("sidebar") ?>
<div class="main">
<h1><?php echo $yellow->page->getHtml("titleContent") ?></h1>
<?php echo $yellow->page->getContent() ?>
<!-- Add more HTML and PHP code here -->
</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-sidebar shows sub level pages
Navigation: navigation-tree shows all pages
Navigation: navigation-search shows search bar
Navigation: navigation-multilanguage shows language selection

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 the same snippet file with social media icons:

<?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 the same snippet file with social media links:

<div class="footer">
<div class="siteinfo">
<a href="<?php echo $yellow->page->base."/" ?>">&copy; 2017 <?php echo $yellow->page->getHtml("sitename") ?></a>.
<a href="https://twitter.com/datenstromse">Twitter</a>.
<a href="https://github.com/datenstrom">GitHub</a>.
<a href="https://instagram.com/datenstromse">Instagram</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>

Custom sidebar

To show a sidebar add the file sidebar.txt to any 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)

Here's the same sidebar file with search field and social media icons:

---
Title: Sidebar
Status: hidden
---
[search]

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

Next: API for developers →