Parameters

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 as an attractive 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 insert 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 parameters 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 a 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, mselect
• val — function responsible for converting the value: text, int, float, decimal, bool, link, ints, codes
• name — parameter name displayed in the form
• descr — description of the parameter, which is displayed in the form
• options is a set of key-value pairs that is used for select and mselect fields.

Controller type:

• text — regular text field
• number — text field for entering a number
• textarea — multiline text field
• checkbox — simple checkbox
• select — dropdown list with single value selection
• mselect — multiple choice list

Value conversion:

• text — plain text
• int — integer
• float — floating point value
• decimal — automatic selection between integer and float
• bool — boolean value, optimal for checkbox
• link — code that can consist of small letters, numbers, a hyphen and a dot
• ints — string of integer values separated by commas, for the field mselect
• codes — string of codes separated by commas, for the field mselect

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.