Create a Custom Style

If the provided styles are not sufficient for your needs it is rather simple to create your own style. To create a new style carefully follow the steps listed below. Lets assume that the new style is called myStyle:

1. Create the Style Folder

Make sure to create the new folder in the path server/component/style/ and also make sure to give the new folder the name of the style:

mkdir sever/component/style/myStyle

2. Create the Style Classes

A style which is only used to represent simple data (no json) and has no input form fields only requires a view class. Such a simple style uses a generic model and component class and has no need for a controller class.

The view class must be defined in a separate file which must be placed in the style folder. Make sure that the class file uses the name of the style (with a capital first letter), postfixed with View.php:

touch server/component/style/myStyle/MyStyleView.php

It is recommended to use an already existing style view class (e.g. server/component/style/button/ButtonView.php) and change it according to your needs.

It is a good practice to separate html and php as much as possible. Therefore, all existing views use separate "template" files (files that are prefixed with tpl_) which contain pure html structures, enriched with simple php echo statements or simple php function calls. It is certainly possible to output html directly from php but such code is getting very hard to read and maintain very quickly.

If your style is more complex (i.e. some complex data manipulation or handling of user input) you will also need to create a component, a model, and a controller class:

touch server/component/style/myStyle/MyStyleComponent.php
touch server/component/style/myStyle/MyStyleController.php
touch server/component/style/myStyle/MyStyleModel.php

As an inspiration refer to the user validation style located in server/component/style/validate/ and familiarize yourself with the Model-View-Controller (MVC) concept.

3. Add the Style to the Database

For being able to access the style myStyle from the CMS it has to be added to the database. This can be done with a simple query (in phpmyadmin or via command line):

INSERT INTO `styles` (`name`, `id_type`) VALUES ('myStyle', '1');

If the style only provides a view class set the column id_type to '1'. If the style provides its own component class set the column id_type to '2'.

4. Create new Style Fields in the Database

There are already several fields defined and it is always a good thing to consider reusing an already existing field instead of creating a new one. However, if none of the fields match your needs a new field has to be created:

INSERT INTO `fields` (`name`, `id_type`, `display`) VALUES ('myField', '3', '1');

The column id_type is a foreign key of the table fieldType and must, therefore, match one of the existing types. The column display is a flag that is either set to 1 or 0. If set to '1', the CMS will render a form field for every available language and gender for this field. If set to '0' the CMS from will only render one form field.

5. Associate Style Fields with the Style in the Database

Finally, fields have to be associated to the new style:

INSERT INTO `styles_fields` (`id_styles`, `id_fields`) VALUES ('id_style', 'id_field_1'), ('id_style', 'id_field_2'), ...,  ('id_style', 'id_field_n');

The column id_styles must be set to the id of the newly created style and the column id_fields to the id of the field which will be associated with the new style.