Mybb Theme Making tutorial with simple step by step screen shots

By Unknown

Wednesday, May 14, 2014

There are so many new people to mybb those really like to know how to create or make mybb themes for there own forum.Some people simple go for the premium paid themes.But some people like to design there own with there specific needs.

So i am making this tutorial for those who really like to made there own design or for those who don't have money to buy premium paid themes.

I already installed mybb forum software on my local computer.If you want to know how to install mybb on local computer you can watch our vedio tutorial here.
I assume you already install your mybb forum software on your webhosting account or local computer.
1.First go to your mybb forum software folder that you installed on your webhost server

2.Now go into images folder
3.Now create a new folder that going to be your new theme folder.

You can see the folder in the red box i created for this demo I named it demotheme
4.Now to need to copy all files in the images folder to demofolder.

5.Next you have to login your mybb admin control panel and click Templates & Style tab.

6.Now click on Create New Theme tab.

7.Now enter the theme name and click the create new theme button.

8.You successfully created your new theme now you need a templates set for your theme so we going to create one in the Templates & Style tab there a templates button at the left side click on it and here we are.Click on the add set button

9.Now enter the title for templates set i recommend it the same name as theme demotheme and then click save

10.So we have every thing ready but ew need to edit some parts of the themes.We are back at this page 

11.In the image directory box enter the directory name that we created in step 3.I created demotheme.

it is very simple just after images type slash and the directory name like

images/demotheme

ok

12.In the Template Set box or pink box select the templates title that we created in the step 8 & 9.

13.Click on global.css that in the green box.

14.You will be on this page and now click on Edit Stylesheet: Advanced Mode.

you need to edit some properties of css codes.I already listed the lines that needed to change below

           background: #026CB1 url(images/thead_bg.gif) top left repeat-x;

background: #026CB1 url(images/thead_bg.gif) top left repeat-x;

background: url(images/invalid.gif) no-repeat center left;

background: url(images/valid.gif) no-repeat center left;

background: url(images/spinner.gif) no-repeat center left;

background: url('images/error.gif') no-repeat 0;

background: url('images/jump.gif') no-repeat 0;

in all these lines you only have to write your theme directory name like we did in the step 11 here an example of it.i took the first line.

background: #026CB1 url(images/thead_bg.gif) top left repeat-x;

change to 

background: #026CB1 url(images/demotheme/thead_bg.gif) top left repeat-x;

i only added the red text in the line.So change all these 7 lines in your global.css.

It was the last step of theme creation.

So the theme exactly look like mybb default theme but now you can design it with you own needs.

Soon there will be some step by step tutorials for theme designing.

Tag : coding, design, mybb, Mybb Theme Making tutorial, newbies, screen shots, simple step by step, step by step, theme, tutorial, tutorial with picture, web