Support Center

About Koken

This Help Center provides support for Koken, a free content management system designed for photographers, artists and designers.

Setting types

Setting types

Last Updated: May 14, 2014 03:49PM EDT

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"
      }
    }
  }
}
support@koken.me
http://assets1.desk.com/
false
koken
Loading
seconds ago
a minute ago
minutes ago
an hour ago
hours ago
a day ago
days ago
about
false
Invalid characters found
/customer/en/portal/articles/autocomplete