How to customise a theme

Here's how to customise the appearance of your website.

Customising CSS

To adjust the CSS of your website change the theme. Let's see how themes work. The default theme is defined in the system settings. A different theme can be defined in the page settings at the top of each page, for example Theme: custom.

Here's an example file system/themes/custom.css:

.page {
    background-color: #fc4;
    color: #fff;
    text-align: center; 
}

Customising JavaScript

To adjust your website even more you can use JavaScript. This allows you to create dynamic features for websites. You can save JavaScript into a file which has a similar name as the CSS file. Then it will be automatically included.

Here's an example file system/themes/custom.js:

var ready = function() {
    console.log("Hello world");
    // Add more JavaScript code here
}
window.addEventListener("DOMContentLoaded", ready, false);

Customising images and files

The system/themes folder contains all theme files. You can store your images and font files here, which are used in themes. Each website has a small icon, sometimes called a favicon. The web browser displays this icon for example in the address bar.

Do you have questions? Get help.

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.

How to customise a language

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

Customise language settings

To adjust the language of your website change the language settings. The language settings contain the settings of all installed extensions. You can also add your own language settings to the configuration file, for example image captions.

Single language mode

The default language is defined the system settings. A different language can be defined in the page settings at the top of each page, for example Language: en.

An English page:

---
Title: About
Language: en
---
Birds of a feather flock together.

A German page:

---
Title: Über
Language: de
---
Wo zusammenwächst was zusammen gehört.

A Swedish page:

---
Title: Om
Language: sv
---
Lika barn leka bäst.

Multi language mode

For multilingual websites you can use the multi language mode. For example if you translate an entire website. Open file system/extensions/yellow-system.ini and change CoreMultiLanguageMode: 1. Go to your content folder and create a new folder for each language. Here's an example:

├── content               
│   ├── 1-en              
│   │   ├── 1-home        = http://website/
│   │   ├── 9-about
│   │   └── shared    
│   ├── 2-de              
│   │   ├── 1-home        = http://website/de/
│   │   ├── 9-about
│   │   └── shared    
│   └── 3-sv              
│       ├── 1-home        = http://website/sv/
│       ├── 9-about
│       └── shared    
├── media                 
└── system                

The first screenshot shows the folders 1-en, 2-de and 3-sv. This gives you the URLs http://website/ http://website/de/ http://website/sv/ for English, German and Swedish. Here's another example:

├── content               
│   ├── 1-en              
│   │   ├── 1-home        = http://website/en/
│   │   ├── 9-about
│   │   └── shared    
│   ├── 2-de              
│   │   ├── 1-home        = http://website/de/
│   │   ├── 9-about
│   │   └── shared    
│   ├── 3-sv              
│   │   ├── 1-home        = http://website/sv/
│   │   ├── 9-about
│   │   └── shared    
│   └── default           = http://website/       
├── media                 
└── system                

The second screenshot shows the folders 1-en, 2-de, 3-sv and default. This gives you the URLs http://website/en/ http://website/de/ http://website/sv/ and a home page http://website/ that automatically detects the visitor's language.

To show a language selection, you can create a page that lists available languages. The language selection can be integrated into the navigation of your website. This allows visitors to choose the language.

Make a translation

When you install a website you are greeted with a hello. You can make a translation if a language is missing. Start with the English language file or one of the available languages. This will show you which text lines and text fragments are available. It is enough if you translate the English language file. A maintainer can take care of everything else. Learn more about translations.

Do you have questions? Get help.