2014-10-11, 05:03 AM
tldr; themes are long, must read a lot
Disclaimer: Following this tutorial might not actually make you a pro MyBB Themer.
This is a tutorial I've wanted to do for a while now. I have a few friends that are fantastic designers and know HTML/CSS but they just don't know how to go about creating themes for software. I always tell them that MyBB is the way to go, it's really simple to get started with and a great learning tool. However they just can't seem to find something that helps them get their foot in the door. Hopefully if nothing else this tutorial will help them, and possibly anyone else reading this as well!
P.S. Hopefully this also brings some respect to theme developers from people that don't really understand it and think it's an easy task.
I'm dividing this into sections, so after the first post don't worry, it won't be all of it.
This tutorial assumes knowledge of HTML, CSS, some JS and graphics creation.
Part 1: Creating a Mockup
Part 2: Slicing Mockup for Code
Part 4: Setting up Theme Environment
Part 3: Organizing Assets
Part 5: Converting Mockup to Code
Part 6: Make use of MyBB's System
Part 7: Cleaning up the Leftovers
Part 8: Writing the JS
Keep in mind that these sections aren't set in stone, your own workflow can change depending on the theme so feel free to switch them up if it seems helpful to your current project.
Part 1: Creating a Mockup
Some theme developers will tell you that a mockup is not necessary, and that I won't argue. You can certainly create a theme purely off editing the code. I will however argue that creating a mockup not only speeds up the development process, but creates a better end result. You get a broad picture of what you'll end up with, and can make changes to anything that looks out of place before editing a single line of code.
Some theme developers even take the extra step and create what's known as a wireframe, which is essentially a bare-bones version of a mockup to decide where elements will be placed. This I believe is on a per-designer basis. When I design a theme I generally have an idea in mind of where things will be placed so I tend to skip this step, unless of course I'm working on a client project.
I won't really go over design trends in this tutorial (Including the current triangle breadcrumb trend) as they'll change as they do, and make things irrelevant. Rather I'll just discuss things you want to keep in your mockup. In your header there are 4 main elements to keep in mind, these are the logo, breadcrumb, navigation (Including a quick search bar), and user controls.
Most are straight forward, however let's take a look at what might go into the user controls. First we have to ask ourselves what's possible with MyBB. Well, we can certainly create dropdowns to contain user links, so eliminating some of the bloat that all the user controls create should be one of our first priorities. When you're browsing a forum, what do you use most? For me it's the messages. Really it's the only part of the user controls I use on a consistent basis. So how do we bring those outside of the ugly default "Private Messages (Unread 0, Total 0)"? Well we can take the unread count and present it as a single number, and that's all we really care about right? So with that in mind, an alert box works! The guest view can be simple or advanced, depending on what you're aiming for. Most of the Javascript we'll go over later in the tutorial, however things like a guest message and large sign up button in the design are certainly options.
Alright, so we've decided what's important with our header, so what do we need in our body? Well, the two most popular parts are the forum sections and sidebar. Our sidebar is best designed at a width of 200-250px. Generally if we include a sidebar, a sidebar collapse is also possible. This lets users hide the sidebar if it isn't particularly useful for them. Now deciding the placement for such a toggle leaves us with many options, the two most popular of which being attached to the body, and beside the breadcrumb. Keep that in mind while designing your toggle.
Now the forum sections, the main things we need are the new posts notifier, the section name, and the latest post. If the thread and post count are important to you, include those as well (I personally do in every theme and leave it to the user to remove them).
Now for the final section of the mockup, the footer. It's relatively simple and straight forward. Most often you'll have the board statistics, a credits message, and the language/theme selection. There are variables for every section of the board stats (Which we'll also discuss later), so feel free to express your creativity here.
Sorry if this section was relatively vague. The main thing to keep in mind is that MyBB retains just about everything in separate sections and variables so as far as designing goes, just do what you like as long as the main forum features are kept intact (user controls, forum sections, board stats, credits). Include a sidebar, include a quick search, include a guest message if you'd like, all of these will be possible when we get to part 6.
Disclaimer: Following this tutorial might not actually make you a pro MyBB Themer.
This is a tutorial I've wanted to do for a while now. I have a few friends that are fantastic designers and know HTML/CSS but they just don't know how to go about creating themes for software. I always tell them that MyBB is the way to go, it's really simple to get started with and a great learning tool. However they just can't seem to find something that helps them get their foot in the door. Hopefully if nothing else this tutorial will help them, and possibly anyone else reading this as well!
P.S. Hopefully this also brings some respect to theme developers from people that don't really understand it and think it's an easy task.
I'm dividing this into sections, so after the first post don't worry, it won't be all of it.
This tutorial assumes knowledge of HTML, CSS, some JS and graphics creation.
Part 1: Creating a Mockup
Part 2: Slicing Mockup for Code
Part 4: Setting up Theme Environment
Part 3: Organizing Assets
Part 5: Converting Mockup to Code
Part 6: Make use of MyBB's System
Part 7: Cleaning up the Leftovers
Part 8: Writing the JS
Keep in mind that these sections aren't set in stone, your own workflow can change depending on the theme so feel free to switch them up if it seems helpful to your current project.
Part 1: Creating a Mockup
Some theme developers will tell you that a mockup is not necessary, and that I won't argue. You can certainly create a theme purely off editing the code. I will however argue that creating a mockup not only speeds up the development process, but creates a better end result. You get a broad picture of what you'll end up with, and can make changes to anything that looks out of place before editing a single line of code.
Some theme developers even take the extra step and create what's known as a wireframe, which is essentially a bare-bones version of a mockup to decide where elements will be placed. This I believe is on a per-designer basis. When I design a theme I generally have an idea in mind of where things will be placed so I tend to skip this step, unless of course I'm working on a client project.
I won't really go over design trends in this tutorial (Including the current triangle breadcrumb trend) as they'll change as they do, and make things irrelevant. Rather I'll just discuss things you want to keep in your mockup. In your header there are 4 main elements to keep in mind, these are the logo, breadcrumb, navigation (Including a quick search bar), and user controls.
Most are straight forward, however let's take a look at what might go into the user controls. First we have to ask ourselves what's possible with MyBB. Well, we can certainly create dropdowns to contain user links, so eliminating some of the bloat that all the user controls create should be one of our first priorities. When you're browsing a forum, what do you use most? For me it's the messages. Really it's the only part of the user controls I use on a consistent basis. So how do we bring those outside of the ugly default "Private Messages (Unread 0, Total 0)"? Well we can take the unread count and present it as a single number, and that's all we really care about right? So with that in mind, an alert box works! The guest view can be simple or advanced, depending on what you're aiming for. Most of the Javascript we'll go over later in the tutorial, however things like a guest message and large sign up button in the design are certainly options.
Alright, so we've decided what's important with our header, so what do we need in our body? Well, the two most popular parts are the forum sections and sidebar. Our sidebar is best designed at a width of 200-250px. Generally if we include a sidebar, a sidebar collapse is also possible. This lets users hide the sidebar if it isn't particularly useful for them. Now deciding the placement for such a toggle leaves us with many options, the two most popular of which being attached to the body, and beside the breadcrumb. Keep that in mind while designing your toggle.
Now the forum sections, the main things we need are the new posts notifier, the section name, and the latest post. If the thread and post count are important to you, include those as well (I personally do in every theme and leave it to the user to remove them).
Now for the final section of the mockup, the footer. It's relatively simple and straight forward. Most often you'll have the board statistics, a credits message, and the language/theme selection. There are variables for every section of the board stats (Which we'll also discuss later), so feel free to express your creativity here.
Sorry if this section was relatively vague. The main thing to keep in mind is that MyBB retains just about everything in separate sections and variables so as far as designing goes, just do what you like as long as the main forum features are kept intact (user controls, forum sections, board stats, credits). Include a sidebar, include a quick search, include a guest message if you'd like, all of these will be possible when we get to part 6.