MyBB Tutorials

Making a Good Skin

Submitted by linkzy, , Thread ID: 1037

Thread Closed
linkzy
No pressure, no diamonds
Level:
0
Reputation:
181
Posts:
5.34K
Likes:
341
Credits:
54
03-02-2015, 08:26 PM
#1
You people and your themes. Today I will be teaching you how to make a MyBB theme. We will go over a few things such as standards that you can set, what to and not to do, and a bit of advice from me.

Starting Off -- What You Should Know
You're going to want a concept. Whether it's in your head, drawn in paper, painted, whatever, you should always at the least have an idea of what you want your theme to look like. You also want to know what type you are going for. Whether it's flat, 3D, simplistic, or whatever it may be. This scheme should follow throughout the entire theme. You shouldn't mix two types together, say 3D and flat, because it may look horrible in the end unless you are very careful. Another thing you may want to know before beginning is what colours will you use. Primary and secondary. Now, that goes without saying, you will have different shades, tents, and of the sort, but at least have two to go off of. Two colours that end up looking really good together could be black/grey/gray and red.

Graphics or pure CSS?
This is part of the advice category. Since you already have to work with CSS, we will be talking specifically about things such as gradients in this section, or other elements that work for specific browser types with CSS. I'll use gradients as an example, since I find they are used a lot.

If you are trying to please someone, I would go with graphics. When working with gradients, you have to specify each browser types' gradient type. A lot of people still use IE, and Windows (but that's a whole 'nother thread for another time), not everyone uses Google Chrome, Safari, Mozilla/Firefox, or even Opera. Some even use older versions of said IE browsers, which is disheartening, to an extent. Typing each and every gradient, or even just copying and slightly modifying, can be a lot of work. If you're not good with graphics, then try CSS. CSS isn't necessarily the way to go, however. Also, when I say "graphics", I don't mean Photoshop. There's a lot of different programs out there that can help you. Of course Photoshop is always an option.

What to & Not to do
I know a lot of you may like another websites theme, or even a specific aspect of it. That's okay, I like a lot of designs. However, one thing you never do is "rip" (as the term is used here frequently) things from different themes. That's stealing someone else's work. Plagiarism. Don't even look at the code. It's one thing to make a design that looks like something else, it's another to just completely steal.

Another thing not to do, don't modify themes and release said themes for your personal gain, such as money. This is just as bad, if not worse, than what was mentioned above. If you are going to modify, and release, a theme from someone else, contact them. Request their permission. And don't beat around the bush trying to trick them into saying yes to something they aren't sure of. Don't blackmail either. If you do get permission, always give credit to the original creators. I usually put "Theme design by ____ of ____. Modified by ____." Always link to the original creators website as well. If they say you aren't allowed to release a modified version of their theme, don't. This can bring down many legal issues, even going to court to dispute this. Not only is this rude, it is, to an extent, inhumane, and uncivilized.


Take Notes, Timmy

From here on, it's easy sailing. Grab a copy of MyBB and start designing. Make sure you know your way around. I don't mean memorizing every single template, however, memorize a few, such as the ones that are mainly edited in themes. I shall name a few for you in a second. Another thing, if you use jQuery, be sure to use the noConflict function. Conflicting scripts can cause issues with MyBB versions lower than 1.8, especially since versions before 1.8 only used pure JavaScript. Things like collapse buttons, or even the buddy system at times may stop working if you're not careful.

Templates to keep note of:
  • Header templates (header, welcomeblock templates [guest,member,admincp,modcp])
  • Forum Bit Templates (Mainly forum bit cat 1, then forum bit forum 1 & 2. Maybe more depending on what you want to do with the theme)
  • Headerinclude - This is where most scripts are contained (ie javascript/jQuery)
  • Footer - Self explanatory



The "Fun" Part

You're now free to make your theme. These "rules" don't guarantee greatness, however, they are from my personal experience as a theme designer. If you have a friend, you can collaborate, bounce ideas off each other, design together, whatever you feel. As long as you know CSS/3, JavaScript/jQuery, and HTML, you can always work on designing themes.

kthxbye


And yeah this tut isnt by me :3

Thx to Duubz a expert mybb designer Wink
| A | v4hl| Addicted | Senpai | Sui | Sensei | H | fdigl |


1

RE: Making a Good Skin

frizzy
Closed Account
Level:
0
Reputation:
-2
Posts:
33
Likes:
3
Credits:
17
19-02-2015, 11:51 PM
#2
thanks for the tutorial Smile good to know.

RE: Making a Good Skin

THC
Novice
Level:
0
Reputation:
0
Posts:
29
Likes:
1
Credits:
36
21-02-2015, 03:46 AM
#3
I think I can finally learn how to make a theme for my site now :yus:

RE: Making a Good Skin

Vlad
Novice
Level:
0
Reputation:
0
Posts:
22
Likes:
0
Credits:
30
21-02-2015, 08:54 AM
#4
Thanks bro this'll be very useful.

RE: Making a Good Skin

Elister
Lurker
Level:
0
Reputation:
0
Posts:
7
Likes:
0
Credits:
9
21-02-2015, 09:33 PM
#5
thanks for the tutorial, is important know about this

RE: Making a Good Skin

Blowjob
Closed Account
Level:
0
Reputation:
26
Posts:
2.16K
Likes:
189
Credits:
2.53K
18-03-2015, 02:45 AM
#6
Fuck. I want to tryr to make a good skin but I know I'll end up ripping from a shitload of other themes XD

RE: Making a Good Skin

Cupid
Junior Member
Level:
0
Reputation:
1
Posts:
71
Likes:
4
Credits:
50
18-03-2015, 02:26 PM
#7
Thanks for your tut
:heart:

RE: Making a Good Skin

ThatOo
Lurker
Level:
0
Reputation:
0
Posts:
3
Likes:
0
Credits:
3
30-03-2015, 09:38 PM
#8
Thank Bro! Good tutorial !

RE: Making a Good Skin

Rapturne
Novice
Level:
0
Reputation:
0
Posts:
30
Likes:
1
Credits:
0
28-04-2015, 12:53 PM
#9
Thank's for the tutorial linkzy.

RE: Making a Good Skin

zGeek
Aokie
Prime
Level:
0
Reputation:
26
Posts:
782
Likes:
60
Credits:
1.46K
28-04-2015, 12:56 PM
#10
This is pretty good because I'm starting my own community soon!

Users browsing this thread: 1 Guest(s)