How to Style MyBB

Jeff75 · Feb 6, 2010

A lot of people use the MyBB forum software but they really don't know how to skin it themselves. You may want to skin to save some money from buying a custom skin, and because you can give yourself a custom skin whenever you want to after you have learned how to skin yourself instead of waiting for someone to skin it for you.
-------
Disclaimer
This tutorial doesn't go over all the skinning attributes, just the important ones.
-------------
Styling like this can be done under the "Advanced" tab in the editing global.css field.
--------------
If you see anything wrong with this tutorial, please let me know, because we are all human and we all make mistakes.
------

Basics
"color" means the color of the text. This text doesn't include links.
"font-family" is the font that is used. I usually leave this as it, but when changing it people just usually shorten it down to one font type; such as arial.
"text-align" describes what alignment your text is using. This can be changed to "center", "right", "left".
"a:link " is a link's color. [look at blue bolded text in the Default CSS listed below]; at the beginning of the CSS describes all the "free" links, as I like to call them. You can change the link color in some other CSS parts though.
"a:visited" means a link you visited. Pretty much, if that person has clicked on that link, and the link color's original color was blue, and the a:visited color is set to purple, that user will see that link as purple.
"a:hover, a:active" is the color the link changes when you hover/ move the mouse over it.
"text-decoration" is the decoration your text has. It can be from italic, bold, and underline.
"font-size" is self explanatory. It is the size of your text.
-------------------------
Adding Images
Just place url(URL OF IMAGE) after the color you selected for that field. This is mostly used for backgrounds, theads and other things like that.
---------------------
First off, I will post the default MyBB CSS:

Code:

body {
	background: #efefef;
	color: #000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
	text-align: center; /* IE 5 fix */
	line-height: 1.4;
}

[b][color=#0000FF]a:link {
	color: #026CB1;
	text-decoration: none;
}

a:visited {
	color: #026CB1;
	text-decoration: none;
}

a:hover, a:active {
	color: #000;
	text-decoration: underline;[/color]
}
[/b]
#container {
	width: 95%;
	background: #fff;
	border: 1px solid #e4e4e4;
	color: #000000;
	margin: auto auto;
	padding: 20px;
	text-align: left; /* IE 5 fix */
}

#content {
	/* FIX: Make internet explorer wrap correctly */
	width: auto !important;

}

.menu ul {
	color: #000000;
	font-weight: bold;
	text-align: right;
	padding: 4px;
}

.menu ul a:link {
	color: #000000;
	text-decoration: none;
}

.menu ul a:visited {
	color: #000000;
	text-decoration: none;
}

.menu ul a:hover, .menu ul a:active {
	color: #4874a3;
	text-decoration: none;
}

#panel {
	background: #efefef;
	color: #000000;
	font-size: 11px;
	border: 1px solid #D4D4D4;
	padding: 8px;
}

table {
	color: #000000;
	font-family: Verdana, Arial, Sans-Serif;
	font-size: 13px;
}

.tborder {
	background: #81A2C4;
	width: 100%;
	margin: auto auto;
	border: 1px solid #0F5C8E;
}

.thead {
	background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
	color: #ffffff;
}

.thead a:link {
	color: #ffffff;
	text-decoration: none;
}

.thead a:visited {
	color: #ffffff;
	text-decoration: none;
}

.thead a:hover, .thead a:active {
	color: #ffffff;
	text-decoration: underline;
}

.tcat {
	background: #ADCBE7;
	color: #000000;
	font-size: 12px;
}

.tcat a:link {
	color: #000000;
}

.tcat a:visited {
	color: #000000;
}

.tcat a:hover, .tcat a:active {
	color: #000000;
}

.trow1 {
	background: #f5f5f5;
}

.trow2 {
	background: #EFEFEF;
}

.trow_shaded {
	background: #ffdde0;
}

.trow_selected td {
	background: #FFFBD9;
}

.trow_sep {
	background: #e5e5e5;
	color: #000;
	font-size: 12px;
	font-weight: bold;
}

.tfoot {
	background: #026CB1 url(images/thead_bg.gif) top left repeat-x;
	color: #ffffff;
}

.tfoot a:link {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:visited {
	color: #ffffff;
	text-decoration: none;
}

.tfoot a:hover, .tfoot a:active {
	color: #ffffff;
	text-decoration: underline;
}

.bottommenu {
	background: #efefef;
	color: #000000;
	border: 1px solid #4874a3;
	padding: 10px;
}

.navigation {
	color: #000000;
	font-size: 13px;
	font-weight: bold;
}

.navigation a:link {
	text-decoration: none;
}

.navigation a:visited {
	text-decoration: none;
}

.navigation a:hover, .navigation a:active {
	text-decoration: none;
}

.navigation .active {
	color: #000000;
	font-size: small;
	font-weight: bold;
}

.smalltext {
	font-size: 11px;
}

.largetext {
	font-size: 16px;
	font-weight: bold;
}

input.textbox {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 1px;
}

textarea {
	background: #ffffff;
	color: #000000;
	border: 1px solid #0f5c8e;
	padding: 2px;
	font-family: Verdana, Arial, Sans-Serif;
	line-height: 1.4;
	font-size: 13px;
}

select {
	background: #ffffff;
	border: 1px solid #0f5c8e;
}

.editor {
	background: #f1f1f1;
	border: 1px solid #ccc;
}

.editor_control_bar {
	background: #fff;
	border: 1px solid #0f5c8e;
}

.autocomplete {
	background: #fff;
	border: 1px solid #000;
	color: black;
}

.autocomplete_selected {
	background: #adcee7;
	color: #000;
}

.popup_menu {
	background: #ccc;
	border: 1px solid #000;
}

.popup_menu .popup_item {
	background: #fff;
	color: #000;
}

.popup_menu .popup_item:hover {
	background: #C7DBEE;
	color: #000;
}

.trow_reputation_positive {
	background: #ccffcc;
}

.trow_reputation_negative {
	background: #ffcccc;
}

.reputation_positive {
	color: green;
}

.reputation_neutral {
	color: #444;
}

.reputation_negative {
	color: red;
}

.invalid_field {
	border: 1px solid #f30;
	color: #f30;
}

.valid_field {
	border: 1px solid #0c0;
}

.validation_error {
	background: url(images/invalid.gif) no-repeat center left;
	color: #f30;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_success {
	background: url(images/valid.gif) no-repeat center left;
	color: #00b200;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

.validation_loading {
	background: url(images/spinner.gif) no-repeat center left;
	color: #555;
	margin: 5px 0;
	padding: 5px;
	font-weight: bold;
	font-size: 11px;
	padding-left: 22px;
}

/* Additional CSS (Master) */
img {
	border: none;
}

.clear {
	clear: both;
}

.hidden {
	display: none;
	float: none;
	width: 1%;
}

.float_left {
	float: left;
}

.float_right {
	float: right;
}

.menu ul {
	list-style: none;
	margin: 0;
}

.menu li {
	display: inline;
	padding-left: 5px;
}

.menu img {
	padding-right: 5px;
	vertical-align: top;
}

#panel .links {
	margin: 0;
	float: right;
}

.expcolimage {
	float: right;
	width: auto;
	vertical-align: middle;
	margin-top: 3px;
}

img.attachment {
	border: 1px solid #E9E5D7;
	padding: 2px;
}

hr {
	background-color: #000000;
	color: #000000;
	height: 1px;
	border: 0px;
}

#copyright {
	font: 11px Verdana, Arial, Sans-Serif;
	margin: 0;
	padding: 10px 0 0 0;
}

#debug {
	float: right;
	text-align: right;
	margin-top: 0;
}

blockquote {
	border: 1px solid #ccc;
	margin: 0;
	background: #fff;
	padding: 4px;
}

blockquote cite {
	font-weight: bold;
	border-bottom: 1px solid #ccc;
	font-style: normal;
	display: block;
	margin: 4px 0;
}

blockquote cite span {
	float: right;
	font-weight: normal;
}


blockquote cite span.highlight {
	float: none;
	font-weight: bold;
	padding-bottom: 0;
}

.codeblock {
	background: #fff;
	border: 1px solid #ccc;
	padding: 4px;
}

.codeblock .title {
	border-bottom: 1px solid #ccc;
	font-weight: bold;
	margin: 4px 0;
}

.codeblock code {
	overflow: auto;
	height: auto;
	max-height: 200px;
	display: block;
	font-family: Monaco, Consolas, Courier, monospace;
	font-size: 13px;
}

.subforumicon {
	border: 0;
	vertical-align: middle;
}

.separator {
	margin: 5px;
	padding: 0;
	height: 0px;
	font-size: 1px;
	list-style-type: none;
}

form {
	margin: 0;
	padding: 0;
}

.popup_menu .popup_item_container {
	margin: 1px;
	text-align: left;
}

.popup_menu .popup_item {
	display: block;
	padding: 3px;
	text-decoration: none;
	white-space: nowrap;
}

.popup_menu a.popup_item:hover {
	text-decoration: none;
}

.autocomplete {
	text-align: left;
}

.subject_new {
	font-weight: bold;
}

.highlight {
	background: #FFFFCC;
	padding: 3px;
}

.pm_alert {
	background: #FFF6BF;
	border: 1px solid #FFD324;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.red_alert {
	background: #FBE3E4;
	border: 1px solid #A5161A;
	color: #A5161A;
	text-align: center;
	padding: 5px 20px;
	font-size: 11px;
}

.high_warning {
	color: #CC0000;
}

.moderate_warning {
	color: #F3611B;
}

.low_warning {
	color: #AE5700;
}

div.error {
	padding: 5px 10px;
	border-top: 2px solid #FFD324;
	border-bottom: 2px solid #FFD324;
	background: #FFF6BF;
	font-size: 12px;
}

div.error p {
	margin: 0;
	color: #000;
	font-weight: normal;
}

div.error p em {
	font-style: normal;
	font-weight: bold;
	padding-left: 24px;
	display: block;
	color: #C00;
	background: url('images/error.gif') no-repeat 0;
}

div.error.ul {
	margin-left: 24px;
}

.online {
	color: #15A018;
}

.offline {
	color: #C7C7C7;
}

.pagination {
	font-size: 11px;
	padding-top: 10px;
	margin-bottom: 5px;
}

.tfoot .pagination, .tcat .pagination {
	padding-top: 0;
}
.pagination .pages {
	font-weight: bold;
}

.pagination .pagination_current, .pagination a {
	padding: 2px 6px;
	margin-bottom: 3px;
}

.pagination a {
	border: 1px solid #81A2C4;
}

.pagination .pagination_current {
	background: #F5F5F5;
	border: 1px solid #81A2C4;
	font-weight: bold;
}

.pagination a:hover {
	background: #F5F5F5;
	text-decoration: none;
}

.thread_legend, .thread_legend dd {
	margin: 0;
	padding: 0;
}

.thread_legend dd {
	padding-bottom: 4px;
	margin-right: 15px;
}

.thread_legend img {
	margin-right: 4px;
	vertical-align: bottom;
}

.forum_legend, .forum_legend dt, .forum_legend dd {
	margin: 0;
	padding: 0;
}

.forum_legend dd {
	float: left;
	margin-right: 10px;
}

.forum_legend dt {
	margin-right: 10px;
	float: left;
}

.success_message {
	color: #00b200;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.error_message {
	color: #C00;
	font-weight: bold;
	font-size: 10px;
	margin-bottom: 10px;
}

.post_body {
	padding: 5px;
}

.post_content {
	padding: 5px 10px;
}

.quick_jump {
	background: url('images/jump.gif') no-repeat 0;
	width: 13px;
	height: 13px;
	padding-left: 13px; /* amount of padding needed for image to fully show */
	vertical-align: middle;
	border: none;
}

Body: This is the "sides" of your forums. On default, it is a light gray color.
Container: This is the main background. If you use the MyBB Default skin, this is the white color that is behind the MyBB Logo.
content: This really isn't important if you just want to create a good, simple skin.
.menu ul: is the "important links" such as member list, search, etc.
#panel: This is the "welcome back" panel. This also contains links to the user cp, mod cp, admin cp, and buddy list.
table: Don't worry about this.
.tborder This is the border that separates the forum categorys and the amount of threads that forum has, the amount of posts, and the latest threads in that former, as long with the last poster.
.thead: This is the header of the forums. This is where the category's name is.
.tcat: This is the thing directly below .thead . Says "Forum | Threads | Posts | Last Post.
.trow1: This is the forum row. It contains the number of threads, posts, etc and the forum name and description. This is the first forum.
.trow2: This is the same as .trow1, but the forum row below the first. [must have more than one forum to see the difference].
.trow_shaded : I don't even know what this is, lol.
.trow_selected td: I never mess with this one.
trow_sep: I never mess with this one neither.
.tfoot: This has the links such as "forum team", "Log Out", "Forum stats", etc.
.bottommenu : This contains the links such as "Contact Us", "RSS Syndication", "return to top", etc.
.navigation: This is where you are at. For example: Community / Forum 1/ Test Thread. Appears at the top of each page an is a "root tree" pretty much; if you know what that is.
.smalltext : This relates to all small text i guess.
.largetext: This relates to all large text.
input.textbox : This is boxes like "Search this forum".
textarea: Pretty much explains itself, it is the area where you type your post, new thread, PM, etc.
.popup_menu : Relates to any popup menus.
.trow_reputation_positive/negative: Describes the color in which negative and positive reputation is.

Everything else is really not necessary so I won't explain it. This is pretty much all you need to know in how to create a decent skin.

I hope this helps you out a bit. After you skin a few times, you will get it down and get better and better at it until you can code it with your eyes shut.
-------
2010 Forum Act©; please give credit when posting somewhere else. Jeff London created.

xCuCu · Feb 7, 2010

Very nice tut 🙂

+rep

Leo Ghost · Feb 7, 2010

I'd also like to note that you aren't limited to these set classes. You can add as many as you like, change them up, that sorta thing. I'm not expert style maker, but I toy -> http://www.myoffshorebb.com/

ChatBox · Feb 7, 2010

Nice tutorial.

Code:

"[b][color=#0000FF]"a:link {

isn't inside the default template though.

Uphoreka · Feb 8, 2010

ChatBox said:
Nice tutorial.

Code:

"[b][color=#0000FF]"a:link {

isn't inside the default template though.

That looks BBCode.

Nice tutorial!

Midnight · Feb 9, 2010

Nice tut, seems like you have taken some time on putting this together. Thanks 😉

Jeff75 · Feb 9, 2010

Thanks everyone. Just wanted to put a tutorial on how to skin since when I first started skinning [vb and mybb] there were no tutorials around.

And yeah, that BB Code in the template isn't usually there, I thought it would make the text blue but it seems like it doesn't when it is wrapped in a

Code:

 tag.

Next Tutorial: Skinning vBulletin before v4; and Skinning vBulletin v4

Dark Takua · Mar 29, 2010

Nice tutorial! I might try to edit a skin 😀

Antarctic · Mar 29, 2010

MyBB is probably one of the easyest forum softwares to code and design. I made a custom template for one of my sites within 20 minutes, not including images.

fantanoice · Mar 29, 2010

Pretty simple but effective. I'll probably use your tutorial sometime because I do want to learn how to make MyBB themes. Thanks.

death180 · May 22, 2010

I like the part where you tell what everything is..

iGame · May 23, 2010

Nice REP ++

How to Style MyBB

Jeff75

Reputable

xCuCu

Paragon

Leo Ghost

Resident

ChatBox

Paragon

Uphoreka

Seasoned Veteran

Midnight

Seasoned Veteran

Jeff75

Reputable

Dark Takua

Paragon

Antarctic

Seasoned Veteran

fantanoice

Madly Diligent

death180

Seasoned Veteran

iGame

Paragon

About Us

Sponsors

Affiliates

We value your privacy

How to Style MyBB

Reputable

Paragon

Resident

Paragon

Seasoned Veteran

Seasoned Veteran

Reputable

Paragon

Seasoned Veteran

Madly Diligent

Seasoned Veteran

Paragon

About Us

Sponsors

Affiliates

Stay Connected

We value your privacy