Themes make up the style and design of your board, and are also frequently called styles or skins. They stylize the layout of your forum. Themes use CSS and are stored in both the database and as files.

The base page in the themes section lists all of your themes. You can edit, force on users (select this theme for all users), set as default (if not already default), export the theme, or delete the theme. Each theme contains stylesheets, as well. Note: The MyBB Master Style is the master theme for your forum, and cannot be edited.

Contents 1 Import Theme 1.1 Advanced Options 2 Edit Theme 2.1 Stylesheets 2.1.1 Add Stylesheet 2.1.2 Editing a Stylesheet 2.1.2.1 Simple Mode 2.1.2.2 Advanced Mode 2.1.2.3 Default Elements in global.css 2.1.3 Editing Stylesheet Properties 2.2 Edit Theme Properties 3 Export Theme 4 Create New Theme 5 Using Simple Mode 5.1 Primary CSS Attributes 5.1.1 Background 5.1.2 Color 5.1.3 Width 5.1.4 Font Family 5.1.5 Font Size 5.1.6 Font Style 5.1.7 Font Weight 5.1.8 Text Decoration 5.2 Extra CSS Attributes

Import Theme

Importing a theme can be done by clicking on the "Import a Theme" link near the top of the base page in the themes section.

Import From 

Select the file to import. You can either upload the file from your computer or import from a URL. If importing from a file, select the file on your computer. If importing from a URL, enter in the URL to the file.

Parent Theme 

The theme this theme will be a child of, inheriting all stylesheets that are not customized.

New Name 

Name for the imported theme. If this field is left blank, the name specified in the theme file will be used.

Advanced Options

Ignore Version Compatibility 

Import the theme regardless of whether or not it is compatible with your current version.

Import Stylesheets 

If the theme contains custom stylesheets, should they be imported?

Import Templates 

If the theme contains custom templates, should they be imported?

Edit Theme

The edit theme page lists all of the stylesheets in your theme and allows you to edit the theme properties.

Stylesheets

For each stylesheet, you can see whether or not the theme is inherited (if it is, you will see a message next to the stylesheet name saying what theme it is inherited from), what files the stylesheet is attached to, and you can Edit the stylesheet or edit the stylesheet's properties.

Add Stylesheet

You can add a stylesheet from the Edit Theme page by selecting the "Add Stylesheet" button near the top of the page.

File Name 

The file name for this stylesheet. This typically ends with .css

Attached to 

Stylesheets can either be attached Globally (to all files) or to specific files. Select "Specific files" and then click on "Add another" if you wish to specify specific files for this stylesheet. For each file you specify, you can either have the stylesheet attached to the file globally or to specific actions. To attach the stylesheet to specific actions within the page, select "Specific actions" and then enter the actions, separated by a comma.

Import from 

You can either import the content for the new stylesheet from another existing stylesheet within the theme or write the content directly for this stylesheet.

Click "Save Stylesheet" when you are ready to add the stylesheet to the theme.

Editing a Stylesheet

When you edit a stylesheet, the Simple Mode is loaded first. From here, you can either continue to edit in Simple Mode, or switch to Advanced Mode, where you will be able to edit the stylesheet's raw CSS.

Simple Mode

Simple mode is the default stylesheet editing mode, and allows you to edit stylesheets quickly, in a mode similar to the theme editor in MyBB 1.2 and earlier.

Above the editing table, there is a selector that allows you to select the CSS element you wish to edit. If you have not yet saved your changes for the element you are currently editing, you will be prompted to do so.

When you are editing a CSS element, you are able to edit the background, color, width, font family, font size, font style (italics), font weight (bold), and text decoration (underline, strikethrough, etc) attributes. You can edit all other attributes in the large text area to the right.

More information on using Simple Mode

Advanced Mode

Advanced mode allows you to edit the CSS directly, in raw form. Advanced mode also can be used to add new CSS elements to your stylesheets. Advanced mode will also be loaded by default when the MyBB parser cannot handle the stylesheet in simple mode.

You can learn the basics of Cascading Style Sheets (CSS) at W3Schools.

Default Elements in global.css

body 

Body: General body of the page.

a:link 

Default, unvisited link

a:visited 

Default, visited link

a:hover, a:active 

Default link being hovered over / clicked on

#container 

Page Container: The container that contains all the other elements. This is the white box that contains the entire page, by default.

#content 

Content Container: Box that contents page content.

.menu ul 

Top Links Menu: The links in the menu: Search, Members List, Calendar, Help

.menu ul a:link 

Unvisited link in the top links menu

.menu ul a:visited 

Visited link in the top links menu

.menu ul a:hover, .menu ul a:active 

Link being hovered over / clicked on in the top links menu

#panel 

Welcome Panel: The gray box (by default) that contains the "Welcome back, Username," last visit, current time, buddy list, etc.

table 

Tables: Usually sets the font within tables

.tborder 

Table Border: Specifies border (and any other attributes) for any tables using this class.

.thead 

Table Headers: Header class for most tables, such as the blue bars (by default) on the forum home that contains the category name for each category table.

.thead a:link 

Unvisited links in the table headers

.thead a:visited 

Visited links in the table headers

.thead a:hover, .thead a:active 

Links being hovered over / clicked on in the table headers

.tcat 

Table Subheaders: Subheader class for most tables, such as the light blue bar (by default) beneath the table header saying "Forum," "Threads," "Posts," and "Last Post" for each category on the forum home.

.tcat a:link 

Unvisited links in the table subheaders

.tcat a:visited 

Visited links in the table subheaders

.tcat a:hover, .tcat a:active 

Links that are being hovered over / clicked on in the table subheaders

.trow1 

Alternating Table Row 1: Used in conjunction with .trow2 (Alternating Table Row 2) for the alternating colored rows seen on the forum list on the forum home and thread list inside forums.

.trow2 

Alternating Table Row 2: Used in conjuction with .trow1 (Alternating Table Row 1).

.trow_shaded 

Shaded Table Row: Typically used to highlight unapproved threads/posts.

.trow_selected td 

Selected Table Row: Typically used for inline moderation to highlight selected threads or posts.

.trow_sep 

Table Row Separator: Separates announcements, important threads, and normal threads on thread listing.

.tfoot 

Table Footers: Used for the information bar at the bottom of a table, such as the bar at the bottom of the thread listing or at at the bottom of a thread.

.tfoot a:link 

Unvisited links in the table footers

.tfoot a:visited 

Visited links in the table footers

.tfoot a:hover, .tfoot a:active 

Links that are being hovered over / clicked on in the table footers

.bottommenu 

Bottom Links Menu: Container for the links used in the forum footer, such as "Contact Us," "Lite (Archive) Mode," "RSS Syndication," and language selection (when enabled).

.navigation 

Navigation Breadcrumb: Text that shows where you are inside the forum, such as "Forum / My Category / My Forum / My Thread / New Reply"

.navigation a:link 

Unvisited links within the navigation breadcrumb

.navigation a:visited 

Visited links within the navigation breadcrumb

.navigation a:hover, .navigation a:active 

Links being hovered over / clicked on within the navigation breadcrumb

.navigation .active 

Active Breadcrumb Item: The active element in the navigation breadcrumb, such as the text "New Reply" in the following example: "Forum / My Category / My Forum / My Thread / New Reply"

.smalltext 

Small Text: Defines the styling of small text.

.largetext 

Large Text: Defines the styling of large text.

input.textbox 

Text Input Boxes: Smaller text boxes (only one line)

textarea 

Text areas: Larger textboxes (multiple lines), such as those on the new thread or new reply page.

select 

Select boxes: Drop down select boxes.

.editor 

Message Editor: The box surrounding the message editor.

.editor_control_bar 

Editor Control Bar: The control bar that appears below the quick reply box when you have posts selected through multi-quote, the new reply/new thread page when you have posts selected through multi-quote, and beneath the quick edit text area, where you can either save or cancel your edits.

.autocomplete 

Auto Complete Popup Window: The styling for the auto complete / auto suggest popup that appears when you are typing a username for private messages, buddy/ignore list, searches, etc.

.autocomplete_selected 

Auto Complete Selected Result: The currently selected result in the auto complete window. This is either the most likely result or the one you are hovering over.

.popup_menu 

Popup Menu: The popup menu itself.

.popup_menu .popup_item 

Popup Items: Individual menu items when not hovered over.

.popup_menu .popup_item:hover 

Hovered Items: Menu items that are currently being hovered over.

.trow_reputation_positive 

Positive Reputation Row: The row used on the reputation page when a positive reputation is given.

.trow_reputation_negative 

Negative Reputation Row: The row used on the reputation page when a negative reputation is given.

.reputation_positive 

Positive Reputation Count: The reputation count used throughout the board (in the profile and in posts), used to signify a positive reputation count.

.reputation_neutral 

Neutral Reputation Count: Same as above, but used to signify a neutral reputation count.

.reputation_negative 

Negative Reputation Count: Same as above, but used to signify a negative reputation count.

.invalid_field 

Invalid Field: For forms using AJAX error checking, the styling of a text box whose contents do not meet the requirements for that field.

.valid_field 

Valid Field: For forms using AJAX error checking, the styling of a text box whose contents do meet the requirements for that field.

.validation_error 

Validation Error Message: The error message for fields in AJAX error checking that are invalid.

.validation_success 

Validation Success Message: The success message for certain fields in AJAX error checking that are valid.

.validation_loading 

Validation Loading Message: The message used in AJAX error checking to signify that the field is currently being checked.

img 

Images

.clear 

Used to prevent floating elements on both the left and right side of an object.

.hidden 

Used to hide objects.

.float_left 

Used to float objects to the left.

.float_right 

Used to float objects to the right.

.menu ul 

Allows the top links menu to be vertical.

.menu li 

Allows the top links menu to be vertical.

.menu img 

Sets up images in the top links menu to be displayed correctly.

#panel .links 

Places the "Open Buddy List" link on the right-hand side.

.expcolimage 

Styles the exand/collapse image, putting it to the right of table headers/subheaders.

img.attachment 

Styles images that are attachments.

hr 

Vertical line styling

#copyright 

Styling for the board copyright

#debug 

Styling for the board debug information

blockquote 

Quote Container: Styles the quote container

blockquote cite 

Quote Title: Styles the quote container title

.codeblock 

Code Container: Styles the container for the Code and PHP MyCodes.

.codeblock .title 

Code Container Title: Styles the title for the Code and PHP MyCode container

.codeblock code 

Code: Styles the code in the Code and PHP MyCode containers

.subforumicon 

Styles the subforum icon

.separator 

Separates elements

form 

Styles HTML's form element

.popup_menu .popup_item_container 

Additional popup menu styling

.popup_menu .popup_item 

Additional popup menu container and item styling

.autocomplete 

Additional autocomplete styling

.subject_new 

Styling for new threads and Private Messages

.highlight 

Highlights search terms in posts

.pm_alert 

Alert for new private messages

.red_alert 

Banned alert (red)

.high_warning 

High Warning Level: Used for warning level used throughout the board, signifying a high warning level

.moderate_warning 

Moderate Warning Level: Same as above, but for a moderate warning level

.low_warning 

Low Warning Level: Same as above, but for a low warning level

div.error 

Inline Errors: Container for the inline errors.

div.error p 

Inline Error Text: Text in the inline errors container.

div.error p em 

Inline Error Title: Title text in the inline errors container.

div.error.ul 

Inline Error Listing: Lists the errors in the inline error container

.online 

User is Online: Signifies a user is online (green text).

.offline 

User is Offline: Signifies a user is offline (gray text).

.pagination 

Multi-page pagination

.tfoot .pagination, .tcat .pagination 

Styling for multiple pages inside the table footers and table subheaders

.pagination .pages 

Multi-page pagination label

.pagniation .pagination_current, .pagination a 

Multi-page pagination item styling

.pagination a 

Links in the multi-page pagination

.pagination .pagination_current 

The current page in multi-page pagination

.pagination a:hover 

Page being hovered over in multi-page pagination

.thread_legend, .thread_legend dd 

Thread legend margins/padding

.thread_legend dd 

Thread legend text

.thread_legend img 

Thread legend images

.forum_legend, .forum_legend dt, .forum_legend dd 

Forum legend margins/padding

.forum_legend dd 

Forum legend text

.forum_legend dt 

Forum legend images

.success_message 

AJAX inline success message

.error_message 

AJAX inline error message

.post_body 

Styling for post body

.post_content 

Styling for post content

Editing Stylesheet Properties

File Name 

The file name for this stylesheet. This typically ends with .css

Attached to 

Stylesheets can either be attached Globally (to all files) or to specific files. Select "Specific files" and then click on "Add another" if you wish to specify specific files for this stylesheet. For each file you specify, you can either have the stylesheet attached to the file globally or to specific actions. To attach the stylesheet to specific actions within the page, select "Specific actions" and then enter the actions, separated by a comma.

Edit Theme Properties

The Edit Theme Properties table is directly below the stylesheets listing.

Name 

Name for the theme.

Parent Theme 

The theme this theme should be a child of. Stylesheets are inherited from the parent theme when this theme doesn't have modified stylesheets.

Allowed User Groups 

User groups allowed to use this theme. 'All User Groups' overrides any other selection. Holding down the CTRL key allows you to select more than one user group.

Template Set 

Template set the theme should use. The template set defines the HTML markup for this theme.

Editor Style 

The style used for the MyCode editor in this theme.

Image Directory 

Root directory for the images used in this theme, without the trailing slash. Note: This only specifies the directory for images used in the templates, not in the stylesheets.

Board Logo 

Location of the board logo used in the theme.

Table Spacing 

Width of inner padding of table cells, in pixels. This is HTML's cellpadding attribute of the table tag.

Inner Table Border Width 

Amount of padding between each table cell, in pixels. This is HTML's cellspacing attribute of the table tag.

Export Theme

To export a theme, either select "Export Theme" in the options menu for a theme from the base themes page, or select "Export Theme" while editing a theme.

Include custom only 

Should only custom stylesheets be included? If set to yes, only stylesheets that are customized and not inherited will be included. If set to no, all stylesheets, regardless of inheritance, will be included.

Include templates 

Should the customized templates be included with the exported theme? If set to yes, customized templates will be included. If set to no, no templates will be included.

Create New Theme

Creating a new theme can be done by selecting "Create New Theme" from the themes base page.

Name 

Name for the new theme.

Parent Theme 

Theme to inherit all stylesheets and properties from until customized.

Using Simple Mode

Simple mode is where most stylesheet editing will be done. Basic information on Simple mode can be found above.

Primary CSS Attributes

Any of these attributes can be left blank.

Background

Here you can specify the background for the selected class. This is a very important part of editing the theme, for example, if you'd like to add the image for the background of a certain class, you will use:

#026CB1 url(images/thead_bg.gif)

The #026CB1 is a background color for when the image is not available.

The url(images/thead_bg.gif) is used to display the image. There are some other attributes that will aid you working with the background image, such as:

repeat-x 

This will repeat the image horizontally

repeat-y 

This will repeat the image vertically

no-repeat 

The image will only be displayed once, not repeated

top, center, bottom, value 

This will set the vertical position of this image

left, center, right, value 

This will set the horizontal position of the image

An example of this is:

#026CB1 url(images/thead_bg.gif) top left repeat-x

This code is the background of the .thead class. This will make the background color #026CB1, the background image images/thead_bg.gif, position the image at the top left, and will make the image repeat horizontally.

Color

The color of the font used in this class. An example of this, for .thead, would be #FFF (white).

Width

The width of the element, which can be in pixels, percentages, or ems. Pixels are exact, percentages are ranged, and ems are based on the browser's font size specification. For example, the width of #container is 95% by default.

Font Family

The font used in this class. Listing more than one class allows for "fallback" fonts. This means that when the first font is not available on a user's computer, it will use the second font listed. MyBB's default font family specification is Verdana, Arial, Sans-Serif.

Font Size

The size of fonts in this class.

Font Style

The style of the font. This includes:

normal 

Normal, default style

italic 

In italics

oblique 

Oblique

Font Weight

The thickness of the font, such as bold. This includes:

normal 

Normal, default style

bold 

Bold

bolder 

Thicker characters

lighter 

Lighter characters

Value 

100-900, 400 being normal and 700 bold. This allows you to specify a value for the weight.

Text Decoration

This allows you to underline, strikethrough, etc. this class. This includes:

none 

Default, normal text

underline 

Line under the text

overline 

Line over the text

line-through 

Line through the text

blink 

Blinking text

Extra CSS Attributes

Anything not available in the default input fields can be edited here. For example, this is used in #container:

border: 1px solid #e4e4e4;
margin: auto auto;
padding: 20px;
text-align: left;

This text area uses basic CSS. More information on CSS can be found at W3Schools.

Edit this page on GitHub