Contents 1 Introduction 2 Templates 3 Structure 4 Variables 5 XHTML 6 CSS 6.1 Table Classes 7 Themes 8 Guidelines

Introduction

Authoring Templates and Themes is similar to creating website layouts, with the addition of MyBB Internal Variables. This will require knowledge of (X)HTML and CSS. Variables are used with the following syntax: {$variable}.

Templates

In order to change how MyBB looks you must edit the templates. To access the templates go to your Admin CP > Templates & Style> Templates> [Your theme].

Once there click "Expand" to view the various template groups.

To edit a template, click its name. Templates you have edited will appear in a different color. You can restore the original version of a template by clicking "Revert To Original".

Structure

Unfortunately, the MyBB template system doesn't have a simple hierarchical structure; template can't include other templates. This makes following the structure of a page somewhat difficult. For example, if you start from the index page (the index template), you'll see that it uses a few variables:

{$headerinclude}
{$header}

{$forums}

{$boardstats}
{$footer}

{$header} and {$footer} are easy enough to locate, in the Footer Templates and Head Templates groups. {$headerinclude} is somewhat counter-intuitively in the group UngroupedTtemplates. But where is {$forums}? It's not in Forum Bit Templates or Forum Display Templates. In fact, there's no "{$forum}" template. {$forums} is a variable, and so were {$header} and {$footer}. It was an intended coincidence that there are templates with the same name.

To correctly identify how a variable like {$forums} is set, you must search in the MyBB PHP files for the following MyBB idiom: eval("\$forums. Turns out {$forums} is defined in forumdisplay.php:

eval("\$forums = \"".$templates->get("forumdisplay")."\";");

Variables

Variables are used to define MyBB-specific functions inside the templates.

There are various variables that can be used throughout the templates but most of them are template specific.

To determine which variable to use for which template just view the template you're trying to edit and uses of it are guaranteed to be there.

Here's a list of a few variables used:

$mybb->user

(Shows the person who's viewing it's information. EX: {$mybb->user['postnum']} shows the user his post count)

$post

(Same functionality as $mybb->user, however, it's only used in the postbit templates. It shows the user who authored the post info, and also contains the post subject and message)

$users

(Again, same as $mybb->user but used in many other template to show the users info who's in that row)

$user

(Same as $users except more page specific, rather than row specific)

$theme

(This variable is used inside HTML (such as table, tr, and td tags) to define theme specific attributes related to the current users theme of choice)

There are many more variables but it would be a huge long list. Also, not all variables work on all templates.

If you plan on making and releasing template modifications be sure to use $theme variables instead of regular HTML because of the differences in different administrators themes.

XHTML

MyBB uses XHTML 1.0 Transitional as the coding standard. It is important to code in this standard so that all browsers will view the same way.

CSS

MyBB also uses CSS (Cascading Style Sheets) to define most of its theme attributes. You can change these by going to your MyBB's Admin CP > Themes > Modify / Delete. Once there select "Edit Theme Style" and hit go.

Here you will view various different attributes related to the theme you are editing.

You can change various things like:

• Which Templates Set to Use
• Image Directory Location
• Logo Image Location
• Table Spacing
• Content Table Width
• Inner Border Width
• And various colors and font and additional CSS styles.

The Theme Editor also includes an Additional CSS field, where you can add your own custom CSS.

Table Classes

Tables are used extensively in MyBB (MyBB was designed back in the day, before CSS-based layouts became the norm). There are many CSS classes that are used to style different parts of these tables.

• thead - This is used for Table Headers, to display them properly using CSS.
• tcat - Used to properly display Table Sub Headers using CSS.
• trow1' - This uses the first Alternating Table Row used by pages that show rows of information.
• trow2 - This is the same as trow1 except it uses the second Alternating Table Row.
• tfoot - Same as thead, but for Table Footers
• tborder - This uses CSS to properly display Table Borders.
• trow_shaded - This is used to shade a row in a table (for example moderated threads and posts) and uses the Shaded Table Row CSS in the Theme Editor
• trow_sep - This uses the Table Row Separator CSS in the Theme Editor.

For example, a sample table may look like this:

<table border="0" cellspacing="$theme[borderwidth]" cellpadding="$theme[tablespace]" width="100%">
<tr>
<td class="thead" colspan="2"><strong>Title of My Table</strong></td>
</tr>
<tr>
<td class="tcat" colspan="2"><strong>Sub-category</strong></td>
</tr>
<tr><td class="trow1">What: </td><td class="trow1">My Content</td></tr>
<tr><td class="trow2">Where: </td><td class="trow2">At MyBB Wiki</td></tr>
</table>

See this thread for a visual diagram of CSS classes and ids for the main MyBB pages - MyBB 1.4 CSS Guide

Themes

Using MyBB Templates and Themes you can create various different styles. You can completely alter the way MyBB looks and feels through various HTML changes in the templates.

Guidelines

Here are several hints so you can get started making your own themes.

1. Use lighter colors over darker. This puts less strain on your viewer's eyes, and also looks more professional.
2. Always use light font over dark colors. Never ever use dark colors over even darker colors. If users can't read your site, why should they bother viewing?
3. Always keep Dial-up viewers in mind. Yes, there are still many people who use Dial-up. So it's always a good idea to not have themes that have too many images, as it will slow down loading of your site for 56k users.

Edit this page on GitHub