This document is a developer's reference for creating theme settings. Be sure to read the settings overview for background information on how these are implemented.
Settings types are assigned using the type attribute. Each type is demonstrated below.
select
For displaying a select element containing one or more options. Example:
"settings": { "Layout" { "icon":"layout", "settings": { "img_align": { "label": "Image align", "type": "select", "options": [ { "label":"Top", "value": "top" }, { "label":"Middle", "value": "middle" }, { "label":"Bottom", "value": "bottom" } ], "value": "middle" } } } }
boolean
For displaying a checkbox. Example:
"settings": { "Layout" { "icon":"layout", "settings": { "albums_detail_truncate": { "label": "Truncate caption", "type": "boolean", "value": true } } } }
To output a string value instead of true
or false
you would add a "values" property with replacement values. Example:
"settings": { "Layout" { "icon":"layout", "settings": { "albums_detail_truncate": { "label": "Truncate caption", "type": "boolean", "values": { "true": "uppercase", "false": "none" }, "value": "uppercase" } } } }
color
For displaying a hex color picker and input. Example:
"settings": { "Style" { "icon":"style", "settings": { "background_color": { "label": "Background", "type": "color", "value": "#000000" } } } }
To output RGBA values add a with_alpha property set to "true" and a value that uses RGBA formatting. When displayed in the Settings panel a second alpha setting will automatically be created underneath the color setting.
"settings": { "Style" { "icon":"style", "settings": { "background_color": { "label": "Background", "type": "color", "with_alpha": "true", "value": "rgba(0,0,0,.85)" } } } }
slider
For editing a numerical value within a defined range using a horizontal slider. Example:
"settings": { "Layout" { "icon":"layout", "settings": { "title_size": { "label": "Size", "type": "slider", "min": 10, "max": 50, "step": 1, "value": 19, "suffix": "px" } } } }
number
For editing a numerical value within a defined range using a form input. Example:
"settings": { "Layout" { "icon":"layout", "settings": { "title_size": { "label": "Columns", "type": "number", "min": 1, "max": 5, "step": 1, "value": 3 } } } }
string
For editing a string of text. Example:
"settings": { "Layout" { "icon":"layout", "settings": { "footer_number": { "label": "Phone number", "type": "string", "value": "555-404-1212" } } } }