The following guide is for SMF 2.0 only. This guide was made for SMF2beta 4 and may not work with other versions.

Creating multi-style themes is fairly easy with SMF's built-in theme variants feature. This feature allows you to define an unlimited number of variants for themes. This variant information can be used in every theme template file.

Setting up a Theme to use Multiple CSS Style Sheets

To add different styles to a theme, theme variant options must be set. Theme variants are set by defining the theme_variants index for the $settings variable in the template_init function. This function can be found in the index.template.php file. All theme styles defined here should be put into an array.

For example, if we wanted a theme with CSS style sheets for purple, red, blue, and green we would use the following array: $settings['theme_variants'] = array('purple', 'red', 'green', 'blue');

All styles should have labels. To create labels language strings should be added to the theme in this format: $txt['variant_style_name'] = 'Style name'; where style_name is the name used in the array, and Style name is the actual styles name.

Create a ThemeStrings.english.php file for these strings, for detailed information on this please see: Theme Strings in Themes). The file with the strings should be placed in a languages directory inside the theme.

For example, following the code of the above example:
$txt['variant_purple'] = 'Purple Style';
$txt['variant_red'] = 'Red Style';
$txt['variant_green'] = 'Green Style';
$txt['variant_blue'] = 'Blue Style';

With this setting added, users will be able to select the style from the Choose a theme section in their profiles.

Creating the Style Sheets

To change the style according to users' selection, the forum must use a different CSS file for each style. In order to make the forum use the correct CSS file for a style, add $context['theme_variant'] variable to the CSS filename.

Before setting this, the CSS style sheets should be named appropriately, for example: style_purple.css, style_red.css, style_green.css, style_blue.css. This will enable the use of each style.

Normally, CSS files are called from the index.template.php file, like so:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?b4" />

To enable multiple styles to be selected for the one theme, the following should be used instead:

<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style', $context['theme_variant'], '.css?b4" />

Using Different images for each Style

As the $context['theme_variant'] variable will change for different styles (depending on the users selection) different images can be used for different styles.

To use a different new post indicator (on.gif) for different styles, create different on.gif images for each style and save them inside the themes images directory. These should be named as on_style_name.gif, where style_name is the name of the style. For example: on_purple.gif and on_red.gif etc.

To enable the theme to use them, open the BoardIndex.template.php file and find the code which shows on.gif image:

<img src="', $settings['images_url'], '/on', $board['new'] ? '' : '2', '.gif" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" border="0" />

Change it to this:

<img src="', $settings['images_url'], '/on', $board['new'] ? '' : '2', $context['theme_variant'], '.gif" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" border="0" />

Setting a Default Style for the Theme

Unless it is set by an administrator, the first index of the theme_variants array is used as the default variant. That means that the first style defined will be the default style for the theme. In our example the purple style will be the default style.

Once the theme is installed, administrators can change the default style with the Default theme variant option in the theme settings (Administration Center > Current Theme). Also, if the Disable user variant selection option is checked, users will only be allowed to use the default style for theme.

Using Different Thumbnails for each Style

Create different thumbnail images the same way the on.gifs were created in the previous example, remembering to name them like so: thumbnail_style_name.gif, where style_name is the name of the style. For example: thumbnail_purple.gif, thumbnail_red.gif, thumbnail_green.gif, thumbnail_blue.gif.

Changing the Style via URL

As themes can be changed via URL, so can theme variants.

For example, to select the theme with the ID of 5: http://www.yourdomain.com/forum/index.php?theme=5

To change the variant, you should set variant in url instead of theme. If theme has a variant named as red, the variant can be accessed with the following URL: http://www.yourdomain.com/forum/index.php?theme=5;variant=red

Note: accessing themes, and theme variants will only be saved for the session it was set on. When the session is over the setting will be lost, and the setting set in the profile will be used again. In order to change theme permanently, it should be changed in the profile.