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, 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 - test 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 mselect
  • 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.