MyBB

• Article
• Discussion
• Edit
• History

Contents 1 Introduction 2 Requirements 2.1 Templates 2.2 Variables 2.3 XHTML 2.4 CSS 2.5 Table Classes 3 Themes 4 Good Ideas

[edit] 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.

[edit] Requirements

There aren't really any requirements for making templates; however, there are certain variables you must know.

[edit] Templates

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

Once there click "Expand" to view the various templates.

Some templates are grouped, to view those templates inside a group you must click the "Expand" button next to it's name.

To edit a template click The name of the template, if the template has already been edited before you must click "Full Edit".

If you messed up, it is possible to revert back to the original by clicking "Revert To Original"

[edit] 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.

Note: The variables in MyBB 1.2.0 have been changed. They will look like this:

{$variable}

[edit] 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.

[edit] 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.

[edit] Table Classes

Tables are used extensively in MyBB. 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 further info - MyBB 1.4 CSS Guide

[edit] 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.

[edit] Good Ideas

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.