Parameters can be used to change the behavior of a skin. For example, you can make several skins with the same content but different parameters. Parameters are specified by a list of names and values or by a visual form.
Working with parameters
Setting the parameters is done in the "Parameters" tab of your skin. Usually, you will have a table in front of you, in the left column of which the name of the parameter is indicated, in the right - its value. If you are making a skin to order, it is recommended to arrange this section in the form of a beautiful form. This is described below.
You can use parameters directly in your template code. To insert a parameter value into a template, use the following code:
{tpl:cfg-xxx}
Here xxx
is replaced with the name of your parameter. You can also use conditional blocks:
<!-- IFTPL cfg-xxx --> ... <!-- ENDIF --> <!-- IFNTP cfg-xxx --> ... <!-- ENDIF -->
You can paste parameter values in the "Macros" section. The following code is responsible for inserting the xxx
parameter inside the macro value:
{cfg:xxx}
You can also use these options inside the "Settings" section of your skin when specifying CSS and JS files. For example, this way you can implement the choice of a specific style file that will be loaded in the template:
bootstrap-{cfg:skin}
This is an example from the list of Bootstrap template CSS files. It is recommended to study it as an example of the implementation of all the possibilities of skin.
Parameter settings file
You can replace a simple table with a key-value list with a visual form for setting parameters. To do this, you need to add a file called param.json
, which will describe the list of available parameters.
The content of the file is a JSON object. The keys of this object are the names of the parameters, the value is the object that describes these parameters.
"param": { "type": "text|number|textarea|checkbox|select|mselect", "val": "text|int|float|decimal|bool|link|ints|codes", "name": "Param name", "descr": "Description", "options": { "key": "value", "foo": "bar" } }
The parameter description contains the following fields:
type
- controller type: text, number, textarea, checkbox, select, mselectval
- function responsible for converting the value: text, int, float, decimal, bool, link, ints, codesname
- parameter name displayed in the formdescr
- description of the parameter, which is displayed in the formoptions
is a set of key-value pairs that is used forselect
andmselect
fields.
Controller type:
text
- regular text fieldnumber
- test field for entering a numbertextarea
- multiline text fieldcheckbox
- simple checkboxselect
- dropdown list with single value selectionmselect
- multiple choice list
Value conversion:
text
- plain textint
- integerfloat
- floating point valuedecimal
- automatic selection between integer and floatbool
- boolean value, optimal forcheckbox
link
- code that can consist of small letters, numbers, a hyphen and a dotints
- string of integer values separated by commas, for the fieldmselect
codes
- string of codes separated by commas, formselect
field
Example of parameter description:
{ "skin": { "type": "text", "val": "text", "name": "Site footer title", }, "navbar": { "type": "select", "val": "link", "name": "Navigation", "options": { "default": "Default", "inverse": "Inverse" } } }
You can check out the example implementation inside the Bootstrap-3 style.