You can activate/deactivate Modules in config/config.php

$modules = array(

If you want to customize the layout, you can do so by writing a plugin. The easiest way is to clone the YawikDemoSkin into your modules directory.

cd modules
git clone

To activate the plugin you can either simply add 'YawikDemoSkin' to your modules array in config/config.php, or if you don’t want to touch any code from git at all, simply put a file named eg. config/autoload/MyModule.module.php in your autoload directory. Files named .module. are read to include additional Modules.

return array("YawikDemoSkin");

This will add the module dynamically.

If modules contain data like images, javasript or css, which should be directly accessable by the Webserver, these data should be placed into a directory named public. To make this directory accessible to the Webserver place a symbolic link into the YAWIK/public directory, pointing to the modules public directory.

cd YAWIK/public
ln -s ../modules/YawikDemoSkin/public YawikDemoSkin

It is a good practice to name the link with the modules name. This way, you can reference objects of the module by using the ModulesName within the URL.

Example: The YawikDemoSkin references its css in the layout.phtml

$this->headLink()->prependStylesheet($this->basePath() . '/YawikDemoSkin/YawikDemoSkin.css');

Next thing you propably want is to change the name of the Module. Search and replace all “YawikDemoSkin” with “MyModule” in the sources and rename the Directory “YawikDemoSkin” into “MyModule”. Do not forget to change the name in your “autoload/MyModule.module.php” file.

Now you have a module which you can use as a starting point for modifications.

customize your Skin by mapping more templates to your own views scripts.

If you want a completely own customized startpage, add a ‘startpage’ to your viewmap. It will be automatically picked, when you enter the name of the domain and have no session. But be aware, there is no login-box, unless you integrate it yourself.


YAWIK comes with bootstrap. Glyphicons are replaced by awesome fonts. The sources for for the main CSS is currently build with lessc. Bootstrap and awesome font sources are symlinked to the vendor directory. CSS files are build by grunt tasks. You can compile the main CSS file by:

$ ./node_modules/.bin/grunt less:core
Running "less:core" (less) task
>> 1 stylesheet created.

Our YawikDemoSkin can be seen as an example, how to modify the CSS. The Skin needs a different height for the fixed footer. This is achieved by creating a new less file, which can import our module/Core/public/less/yawik-core.less. You can overwrite all less variables.

@import "yawik/yawik-core.less";
@footer-height:                     39px;

Formular Fields

Name description
Editor Editor element
FileUpload FileUpload Form element
InfoCheckbox InfoCheckbox Form element. Adds a Link like to the description Text.
Location autocomplete a location and adds additional Geo data, see: Once Click Apply
Phone adds Validation for a phone number
Rating Star rating Element
SpinnerSubmit a spinner icon is added during form validation. While sending data, the submit button is inactivated

View Helper Scripts

Name description
Alert displays notification like error or success
Services can access Services within view view scripts
jobUrl displays the link to a job posting.
applyUrl displays the link to an application form of a job posting.
applyButton displays application buttons. see: Geo Module
languageSwitcher renders a language switcher select box. see: Language Switcher