====== Creating customizable themes ======

You can create a theme that can be customized via admin panel without writing CSS - only using predefined customization tools. You can define which settings your theme can have and how they are divided into sections. This will help you create a comprehensive "theme settings" page for anyone without editing CSS directly. 

Imagine that your theme can be customized on a page like this:

FIXME screenshot

This is done by using special variables when defining class properties in your CSS styles file.

===== Available customization variables =====

==== Font size ====
Codeworded: ''fontsize''. Sets CSS ''font-size'' property.

Example:

<code css>{
  ...
  font-size: {$General_FontSize_fontsize|default:"12px"};
  ...
}</code>

==== Font ====
FIXME
Codeworded: ''font''. Sets complete CSS ''font'' property.

Example:

<code css>{
  ...
  font: {$FooterMenu_Font_font|default:""};
  ...
}</code>

==== Color ====
Codeworded: ''color''. Implements selection of hexadecimal CSS color identification.

Example:

<code css>
{
  ...
  background-color: {$Page_BackgroundColor_color|default:"#f0f0f0"};
  ...
}</code>

==== Background image ====
Codeworded: ''image''. Implements CSS ''background-image'' property.

Example:

<code css>
{
  ...
  background-image: {$Header_BackgroundImage_image|default:"url(...) repeat-x scroll top left"};
  ...
}</code>

==== 'Yes/No' special control ====
Codeworded: ''choice''. Allows to implement switches between two options.

Example:

<code css>
div#member_console
{
  position: fixed;
  left: 0px;
  {$Special_MemberConsoleAtTop_choice|default:"top,bottom"}: 0px;
}

div#footer
{
  font-size: {$Footer_SmallFont_choice|default:"8px,12px"};
}
</code>

This control will be a checked checkbox, so the first value will be selected by default.

===== Variables specification =====

As you can see variables consist of the following parts:

{$(pt1)_(pt2)_(pt3):default"(pt4)"};

  - **pt1** - section name where a control is placed.
  - **pt2** - control name.
  - **pt3** - control codeword, from the ones listed above.
  - **pt4** - control variable default value.

Example: Variable ''{$FooterMenu_BackgroundImage_image:default="url('/img/bg.png') repeat-x scroll top left"}'' will place a control with **Background image** name in **Footer menu** section, it will be an **image** control and will have 'url('/img/bg.png') repeat-x scroll top left' as **default value**. 

===== More Examples =====

FIXME screenshots needed

===== Notes =====
  - If you use no variables for your theme it will just not have any customization page.
  - If you are familiar with [[http://www.smarty.net/|Smarty]] template engine you will easily notice that we use it to parse variables in our customization engine. To put it bluntly these are regular smarty variables with default values set. These variables get parsed in a special way to extract desired section, control name and type for your theme customization page.
  - Generally it is not recommended to introduce too many customization for your theme. Users eventually want only basic things changed otherwise they would choose another theme. On the other hand too much controls make your customization page cumbersome and you can easily make errors resulting in malfunctioning controls and theme CSS.