MyBB Documentation

Themes

Templates & Style: Themes

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

Import Theme

Templates & Style: 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

Templates & Style: 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

Templates & Style: 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

Templates & Style: Themes

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

Templates & Style: Themes

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

This article or section is outdated.
Parts of this article or section have been written for MyBB version 1.4 and is no longer up to date.
Contributors: Please update the article to reflect the current MyBB version, and remove this template when finished.


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
Templates & Style: Edit Stylesheet Properties

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

Templates & Style: Export Themes

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

Templates & Style: 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.

Home Dashboard - Preferences - Version Check - MyBB Credits
Configuration Settings - Banning - Custom Profile Fields - Smilies - Word Filters - MyCode - Languages - Post Icons - Help Documents - Plugins - Attachment Types - Moderator Tools - Spiders/Bots - Calendars - Warning System - Thread Prefixes
Forums & Posts Forum Management - Forum Announcements - Moderation Queue - Attachments
Users & Groups Users - Groups - User Titles - Banning - Admin Permissions - Mass Mail - Group Promotions
Templates & Style Themes - Templates
Tools & Maintenance System Health - Cache Manager - Task Manager - Recount and Rebuild - PHP Info - Database Backups - Optimize Database - File Verification - Administrator Log - Moderator Log - User Email Log - System Mail Log - User Warning Log - Statistics
Templates/Themes Authoring - Template Management - Theme Management - User-created
Plugins Authoring - Plugin Hooks - Plugin Management - User-created
Translations Language Management - Download
Links MyBB Mods

Edit on GitHub