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:

screenshot

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

Codeworded: fontsize. Sets CSS font-size property.

Example:

{
  ...
  font-size: {$General_FontSize_fontsize|default:"12px"};
  ...
}

Codeworded: font. Sets complete CSS font property.

Example:

{
  ...
  font: {$FooterMenu_Font_font|default:""};
  ...
}

Codeworded: color. Implements selection of hexadecimal CSS color identification.

Example:

{
  ...
  background-color: {$Page_BackgroundColor_color|default:"#f0f0f0"};
  ...
}

Codeworded: image. Implements CSS background-image property.

Example:

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

Codeworded: choice. Allows to implement switches between two options.

Example:

div#member_console
{
  position: fixed;
  left: 0px;
  {$Special_MemberConsoleAtTop_choice|default:"top,bottom"}: 0px;
}
 
div#footer
{
  font-size: {$Footer_SmallFont_choice|default:"8px,12px"};
}

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

As you can see variables consist of the following parts:

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

1. pt1 - section name where a control is placed.
2. pt2 - control name.
3. pt3 - control codeword, from the ones listed above.
4. 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.

screenshots needed

1. If you use no variables for your theme it will just not have any customization page.
2. If you are familiar with 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.
3. 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.