Creating Multi-Style Themes: Difference between revisions From Online Manual

Jump to: navigation, search
(specific version)
No edit summary
 
(5 intermediate revisions by 2 users not shown)
Line 1: Line 1:
{{Specific version|version=2.0
{{Version specific|version=2.0
|content=The following guide is for SMF 2.0 only. This guide was made for SMF2beta 4 and may not work with other versions.}}
|content=The following guide is for SMF 2.0 only. This guide was made for SMF2beta 4 and may not work with other versions.}}


Line 5: Line 5:




Setting up a Theme to use Multiple CSS Style Sheets
==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.
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:
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');
<code>$settings['theme_variants'] = array('purple', 'red', 'green', 'blue');</code>


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.  
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 folder inside the theme.
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:
For example, following the code of the above example:<br/>
$txt['variant_purple'] = 'Purple Style';
$txt['variant_purple'] = 'Purple Style';<br/>
$txt['variant_red'] = 'Red Style';
$txt['variant_red'] = 'Red Style';<br/>
$txt['variant_green'] = 'Green Style';
$txt['variant_green'] = 'Green Style';<br/>
$txt['variant_blue'] = 'Blue Style';
$txt['variant_blue'] = 'Blue Style';<br/>


With this setting added, users will be able to select the style from the Choose a theme section in their profiles.
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
==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.
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.


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


Code: [Select]
{{code|1=<nowiki>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?b4" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style.css?b4" /></nowiki>}}
To enable multiple styles to be selected for the one theme, the following should be used instead:
To enable multiple styles to be selected for the one theme, the following should be used instead:


Code: [Select]
{{code|1=<nowiki>
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style', $context['theme_variant'], '.css?b4" />
<link rel="stylesheet" type="text/css" href="', $settings['theme_url'], '/style', $context['theme_variant'], '.css?b4" /></nowiki>}}


Using Different images for each Style
==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.  
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 folder. 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 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:
To enable the theme to use them, open the BoardIndex.template.php file and find the code which shows on.gif image:


Code: [Select]
{{code|1=<nowiki>
<img src="', $settings['images_url'], '/on', $board['new'] ? '' : '2', '.gif" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" border="0" />
<img src="', $settings['images_url'], '/on', $board['new'] ? '' : '2', '.gif" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" border="0" /></nowiki>}}
Change it to this:
Change it to this:


Code: [Select]
{{code|1=<nowiki>
<img src="', $settings['images_url'], '/on', $board['new'] ? '' : '2', $context['theme_variant'], '.gif" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" border="0" />
<img src="', $settings['images_url'], '/on', $board['new'] ? '' : '2', $context['theme_variant'], '.gif" alt="', $txt['new_posts'], '" title="', $txt['new_posts'], '" border="0" /></nowiki>}}


Setting a Default Style for the Theme
==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.
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.


Line 63: Line 59:




Using Different Thumbnails for each Style
==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.
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.  
For example: thumbnail_purple.gif, thumbnail_red.gif, thumbnail_green.gif, thumbnail_blue.gif.  




Changing the Style via URL
==Changing the Style via URL==
--------------------------------------------------------------------------------
As themes can be changed via URL, so can theme variants.
As themes can be changed via URL, so can theme variants.


Line 78: Line 72:


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.
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.
[[Category:Developing Themes]]

Latest revision as of 12:06, 17 June 2013

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.



Advertisement: