2010-07-05, 05:49 PM
[Tut] How To Create A MyBB Theme [Tut]
Created By:88power88
Credits: None So Far! :D
1.
I guess you know you need to be logged in as admin.
Go to "Templates & Style" then go to "Create New Theme"
![[Image: 74517915.jpg]](https://camo.mybb.com/e1b092ebb10f33a05e03e72f8fb7b3ba68197866/687474703a2f2f696d673434342e696d616765736861636b2e75732f696d673434342f3739372f37343531373931352e6a7067)
2.
Name your theme I've named mine "Red Thing" then click "Create New Theme"
![[Image: 65417330.jpg]](https://camo.mybb.com/8f8f3828bbe31422bc97f4aafb2f0a5b8a08ce3f/687474703a2f2f696d673634312e696d616765736861636b2e75732f696d673634312f373833322f36353431373333302e6a7067)
3.
Now go to your ftp or cpanel and then go to the images folder and create a new folder name it after your theme (Don't use any spaces in the name)
![[Image: 14396189.jpg]](https://camo.mybb.com/2d766f710b8c63a3507b21f59749ad99f409ba41/687474703a2f2f696d673831392e696d616765736861636b2e75732f696d673831392f343135382f31343339363138392e6a7067)
Yours may look different as I'm using localhost
4.
Now copy every other image and folder from the image folder to your new folder which should be named after your theme.
![[Image: 81020779.jpg]](https://camo.mybb.com/32a7bbcd5e76310c1715d0ab8250bad442b1623a/687474703a2f2f696d673832322e696d616765736861636b2e75732f696d673832322f323834392f38313032303737392e6a7067)
![[Image: 52166025.jpg]](https://camo.mybb.com/92745bdac7ed7de22c04ccd489e4c60ca5c279ec/687474703a2f2f696d6735312e696d616765736861636b2e75732f696d6735312f393539302f35323136363032352e6a7067)
5.
Now we go back to our admin panel where we left it last time. Replace "images/" with "images/RedThing/" and "images/logo.gif" with "images/RedThing/logo.gif"
![[Image: 53548424.jpg]](https://camo.mybb.com/0f6d594c88b1831a4106fa3907014ba6b9196473/687474703a2f2f696d673431312e696d616765736861636b2e75732f696d673431312f3138372f35333534383432342e6a7067)
6.
Now go to "global.css"
![[Image: 68542272.jpg]](https://camo.mybb.com/80896b70fbd449685a27d36ebcb9e29d0515e3f2/687474703a2f2f696d673831362e696d616765736861636b2e75732f696d673831362f383832332f36383534323237322e6a7067)
7.
Now search for(ctrl+f) "images/" and again replace it with "images/RedThing/". You need to do this about 10 times.
![[Image: 71125422.jpg]](https://camo.mybb.com/cef462c4cfae7827e5fa96ca6e55d39f4d8bc1b0/687474703a2f2f696d6732342e696d616765736861636b2e75732f696d6732342f333930322f37313132353432322e6a7067)
Then save it.
![[Image: 85996534.jpg]](https://camo.mybb.com/a7307b37a24326569fe2218c75cc8facfc1adc6d/687474703a2f2f696d673831302e696d616765736861636b2e75732f696d673831302f373135392f38353939363533342e6a7067)
8.
Now click "Templates" then "Add Set".
![[Image: 84741928.jpg]](https://camo.mybb.com/df0609d3b9d8724843a609572d1f0fc30d9ee02d/687474703a2f2f696d673138302e696d616765736861636b2e75732f696d673138302f383632302f38343734313932382e6a7067)
9.
Name it "RedThing Templates" Then click "Save"
![[Image: 71397537.jpg]](https://camo.mybb.com/47f008c6d31deba0991e607ba586864dfb9221e1/687474703a2f2f696d673731372e696d616765736861636b2e75732f696d673731372f37372f37313339373533372e6a7067)
10.
Now go back to the theme list then click your theme.
![[Image: 28485738.jpg]](https://camo.mybb.com/d0ba08601b0b2208f546a693c427a442580c088f/687474703a2f2f696d673230322e696d616765736861636b2e75732f696d673230322f363538392f32383438353733382e6a7067)
11.
Now scroll down until you see "Template Set" and now change the template to "RedThing Templates" then save that.
![[Image: 88454410.jpg]](https://camo.mybb.com/f5425442ea204c30af177823b87d656b62e13d5e/687474703a2f2f696d673139342e696d616765736861636b2e75732f696d673139342f373330332f38383435343431302e6a7067)
12.
Ok now we will change the colours to our liking. Go to global.css again and click "Edit Stylesheet: Advanced Mode"
You see alot of code here this is CSS (google it) now you will need to use html colour codes you can either get them from PhotoShop or use THIS site. After learning/understanding CSS change the color codes to whatever you want them. (You Have Successfully Changed The Colours)
![[Image: 42626051.jpg]](https://camo.mybb.com/5f8b1849513a137d891626662db58e635f5ac68f/687474703a2f2f696d673139342e696d616765736861636b2e75732f696d673139342f313938362f34323632363035312e6a7067)
I tried explaining a bit about CSS
13.
Ok now we will edit the html/templates. You will need to understand html so have a google of HTML.
As you see here we have different section choose the right one for you (This is quite straight forward). If you don't understand HTML you may choose to skip this
http://img690.imageshack.us/img690/4931/61416800.jpg
14.
Edit the images in the folder you created earlier to suit your theme. You may use PhotoShop or GIMP.
A image isn't needed for this.
15.
Now we need to export your theme. Do what i do in the images below then zip the .xml and the zipped image folder together.
http://img52.imageshack.us/img52/5727/62148439.jpg
http://img684.imageshack.us/img684/2049/81241715.jpg
http://img818.imageshack.us/img818/2651/80157286.jpg
Good Luck With Your Theme. Show Me Any Themes You Make! :D
88power88
![[Image: image.pl?URL=398670-0816]](https://camo.mybb.com/56d0eeadabbd60847959b04320ee6b7a47231c97/687474703a2f2f7777772e776562736974652d6869742d636f756e746572732e636f6d2f6367692d62696e2f696d6167652e706c3f55524c3d3339383637302d30383136)
Created By:88power88
Credits: None So Far! :D
1.
I guess you know you need to be logged in as admin.
Go to "Templates & Style" then go to "Create New Theme"
2.
Name your theme I've named mine "Red Thing" then click "Create New Theme"
3.
Now go to your ftp or cpanel and then go to the images folder and create a new folder name it after your theme (Don't use any spaces in the name)
Yours may look different as I'm using localhost
4.
Now copy every other image and folder from the image folder to your new folder which should be named after your theme.
5.
Now we go back to our admin panel where we left it last time. Replace "images/" with "images/RedThing/" and "images/logo.gif" with "images/RedThing/logo.gif"
6.
Now go to "global.css"
7.
Now search for(ctrl+f) "images/" and again replace it with "images/RedThing/". You need to do this about 10 times.
Then save it.
8.
Now click "Templates" then "Add Set".
9.
Name it "RedThing Templates" Then click "Save"
10.
Now go back to the theme list then click your theme.
11.
Now scroll down until you see "Template Set" and now change the template to "RedThing Templates" then save that.
12.
Ok now we will change the colours to our liking. Go to global.css again and click "Edit Stylesheet: Advanced Mode"
You see alot of code here this is CSS (google it) now you will need to use html colour codes you can either get them from PhotoShop or use THIS site. After learning/understanding CSS change the color codes to whatever you want them. (You Have Successfully Changed The Colours)
I tried explaining a bit about CSS
13.
Ok now we will edit the html/templates. You will need to understand html so have a google of HTML.
As you see here we have different section choose the right one for you (This is quite straight forward). If you don't understand HTML you may choose to skip this
http://img690.imageshack.us/img690/4931/61416800.jpg
14.
Edit the images in the folder you created earlier to suit your theme. You may use PhotoShop or GIMP.
A image isn't needed for this.
15.
Now we need to export your theme. Do what i do in the images below then zip the .xml and the zipped image folder together.
http://img52.imageshack.us/img52/5727/62148439.jpg
http://img684.imageshack.us/img684/2049/81241715.jpg
http://img818.imageshack.us/img818/2651/80157286.jpg
Good Luck With Your Theme. Show Me Any Themes You Make! :D
88power88
