Hack Forums
Eminence Tutorial: In Depth Guide To Creating Your Own Basic MyBB Theme. - Printable Version

+- Hack Forums (https://hackforums.net)
+-- Forum: Tech (https://hackforums.net/forumdisplay.php?fid=444)
+--- Forum: Webmasters (https://hackforums.net/forumdisplay.php?fid=141)
+---- Forum: Website Construction (https://hackforums.net/forumdisplay.php?fid=50)
+---- Thread: Eminence Tutorial: In Depth Guide To Creating Your Own Basic MyBB Theme. (/showthread.php?tid=2539506)

Eminence Tutorial: In Depth Guide To Creating Your Own Basic MyBB Theme. - American Apathy - May 30, 2012

[Image: IdKPu.png]


I warn you now, do not attempt to copy my colors and so on. It will look shit and you will have wasted your time, this is strictly for showing you how to create your own.

Due to the 15 image restriction I'm going to keep this short and sweet and mostly point out the areas in which are the most important.

So let's get started.

First off head into your AdminCP, click on templates and style, then click create new theme.

Give your theme a name and then hit create theme.

Now to design your own theme you're going to need to understand CSS. http://w3schools.com should help with that.
Click on "Options" next to "global.css" then edit style and go into advanced mode.

The first thing you will see should look like this.
[[Image: oJcYC.png]

This is the body also known as the as the background. If you look here on HackForums that is small space on the edges with lines going across.
You can find colors here
http://www.colorschemer.com/online.html or by using Photoshop.
Now if you save this you will notice it will not have a line background like you see here on HF. In order to add an effect like this you can visit http://www.stripemania.com/ create a background, save it, and upload it to your themes image directory, however you need to call the background in the CSS. You can do that by adding the following..
Original
Spoiler (Click to View)

Updated to include your background
Spoiler (Click to View)

Next we have our links.
[Image: WUFnd.png]

Simply just pick a nice color that matches your background. I suggest that you use the same color for both the normal and visited colors.

Next we have what is inside the purple border here on HF.
It's referred to as the "container". This is what you would be seeing.
[Image: 8e9YN.png]

Pick a nice color that blends with your background. If you notice the border outside the container here on HF you can see it's pretty dull. You can change with that CSS, if you see in my screenshot I have.
Code
border: 2px groove #blahblah;
Groove is a type of border effect that will make it not looks so dull, you can find other types of border effects on w3schools.

Next up we have your menu links, once again pick a color that blends well and try using the same color for everything except hover. The menu links consist of the links in your panel and the "Home" "Search", "MemberList", etc. links.

It looks like this.
Code
.menu ul {
    color: #7A7A7A;
    font-weight: bold;
    text-align: right;
    padding: 4px;
}

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

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

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

Now the fun part, your panel. This where it says "Welcome back, user. You last visited: blah, blah, blah." and has the links to the control panels, private messages, and so on. If don't have any experience with CSS I suggest you leave this plain until you understand what you're doing as it can be tricky to get right. You may still add the groove border, other border effects, and also try to make it blend well with your container color. I always try to give mine a sort of transparent look with a nice shiny groove border.
[Image: n6tlB.png]

Up next is the table text color and border. This what the text and border around your forum rows will look like.
Code
table {
    color: #7A7A7A;
    font-family: Verdana, Arial, Sans-Serif;
    font-size: 13px;
}

.tborder {
    background: #0059B3;
    width: 100%;
    margin: auto auto;
    border: 1px solid #0059B3;

Now that you've got that set to your liking up next is the table headers, header links, table categorys and links, and table rows and links.

The table header are the default blue bars on top of each table.
The table categories are the default blue bar underneath the header.
The table rows are the individual columns inside each table.
The table footer is the bottom "board statisitics" table.

In order to change the default blue bars you will need to upload an image to your themes image directory and put the link where it says "url(images/thead_bg.gif)"

Code
.thead {
    background: #5C5C5C url(images/thead_bg.gif) top left repeat-x;
    color: #;
}

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

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

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

.tcat {
    background: #5C5C5C;
    color: #7A7A7A;
    font-size: 12px;
}

.tcat a:link {
    color: #7A7A7A;
}

.tcat a:visited {
    color: #7A7A7A;
}

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

.trow1 {
    background: #5C5C5C;
}

.trow2 {
    background: #5C5C5C;
}

.trow_shaded {
    background: #ffdde0;
}

.trow_selected td {
    background: #FFFBD9;
}

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

.tfoot {
    background: #5C5C5C url(images/thead_bg.gif) top left repeat-x;
    color: #ff;
}

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

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

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

Next we move onto the bottom menu.

Code
.bottommenu {
    [color=#FF0000]background: #efefef;[/color] // This is the background color.
    [color=#FF0000]color: black;[/color] // This is the text color.
    border: 1px solid #4874a3;
    padding: 10px;
}

Adjust the colors to match the rest of your theme. Now you've created your own basic MyBB Theme.

Some extra things you may want to change are the navigation menus/links, textbox's and text area's. Which you can find by scrolling down, they will look like this.
Code
.navigation {
    color: black;
    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: black;
    font-size: 13px;
    font-weight: bold;
}

.smalltext {
    font-size: 11px;
}

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

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

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

Some helpful tips.
Don't use overly bright colors.
After changing a section click save changes then view your forum before continuing, this way you working step by step and can see your progress.
Don't forget to add images to your themes image directory, just copy the ones from the default MyBB theme to start off with, you can add better ones upon completion.

That concludes my basic MyBB theme tutorial, enjoy. For anyone that uses this, feel free to post the outcome of your themes below :)

* - Sugawara - May 30, 2012

Nice Tuts for Noobs.
Good luck with it.

* - Mr Kewl - May 30, 2012

Advanced editor for beginners learning? I wouldn't do that.

* - American Apathy - May 30, 2012

(May 30, 2012 09:17 AM)Mr Kewl Wrote:  Advanced editor for beginners learning? I wouldn't do that.

I found it easier to use when I was a beginner. The layout just seems better.

* - Cyba - May 30, 2012

Thanks for this mate, it really looks nice.

-Cyba

* - American Apathy - May 30, 2012

(May 30, 2012 12:38 PM)Cyba Wrote:  Thanks for this mate, it really looks nice.

-Cyba

No problem.

Fixed a few wording mistakes since I just reposted this from my tutorial in the Eminence sub forum.

* - DaFreak - May 31, 2012

Great man, You did a good choice to make it public.