How to Null a MyBB Theme

Did you always envy the premium that MyBB forum has got because you are using a crap free one? There are many kinds of MyBB Themes, ones that are free, ones that are exclusive to a board, premium ones etc.

So unless you are not out of your mind, you would not want to null a free one, but a premium or exclusive one.

N.B Visit www.campusflava.com for more updates

So lets get started! Lets have a look at the things required:

Steps

1. 1
   Open up the forums with the theme you want to null.
2. 2
   

   Right-Click and hit Inspect Element
   Open the forum in chrome, right-click and hit inspect element.
3. 3
   A menu will open. Click on the resources tab.
4. 4
   There you will see a lot of name like "something.jpg or png or gif". Click on it and on the right side, a preview of the image will come with a link to its location.
5. 5
   Click on the link and save each of the image in a folder. Make sure you look into the location to see what is the location of the image on the server of the forums, for example if the locations is "forum address/images/theme name/style/image.jpg" then it should be saved as "Some folder/style/image.jpg".
6. 6
   Like this, go to each page of the forums and capture all the images. If a few images are not there like "closed.gif", then just open up your MyBB Upload Folder(If you do not have it, download the MyBB Package from MyBB.com) -> Images and look for images which are there and not there in the theme folder in which you have downloaded all the images. With this, once you have all the pictures, upload them to the images directory of your forums. Make sure the name of the folder is same as that in the website.
   • Now the boring work is done, the images! Oh yes, that is the boring part, now we have to copy the CSS and the other stuff.
7. 7
   

   You should have something like this
   Press Ctrl+U while you have the forum open to view the source. Now we have to look for a stylesheet called "global.css". Just press Ctrl+F and type global.css.
8. 8
   Click on the link and a new tab should open with lots of css code in it.
9. 9
   

   It should like this
   Go to the AdminCP of the forums you have admin access to and go to the "Templates & Style" menu.
10. 10
    

    Its here
    There click on the templates option.
11. 11
    Click on "Add Set". Name the set "[The Theme Name] Templates" or whatever you want and click on Save.
12. 12
    Go to the Theme option and click on "Create New Theme".
13. 13
    Enter the theme name as the name of the theme and keep the Parent Theme to MyBB Master Style and click the button.
14. 14
    Now enter the Template set as the set we created earlier.
15. 15
    Keep the image directory as the one you uploaded all the images to, for example "images/mytheme".
16. 16
    Keep the other settings as default and click the button. Now the basic things are done.
17. 17
    Copy the CSS fromt he global.css, then click the "global.css" link in your AdminCP in the theme settings.
18. 18
    Click on the "Edit in Advanced Style" button, and then paste all the code there, replacing the original code.
19. 19
    Browse the code and look for any images you might've missed out(like "background: url(../../../images/blackevo4-space/toplinks/admincp.png", you might not have the admincp.png), and if there are any you have missed out, just copy the location, paste them on your addressbar, with the forums link before it and press enter to open up your missed image.
20. 20
    Open up the source again and look for any stylesheets BELOW the global.css file. Ignore files such as "tabbed.css" or something like that, as they are nothing but css files for the tab plugin or some other theme. Now we have the CSS work done. Now we are gonna edit the template to match it with the theme.
21. 21
    If you look closely, there are many comments in the url, for example .
22. 22
    

    Helpful for next steps
    There are not in the theme being nulled. These comments stand for the different templates. For example, between the comments and , the code written is for the "header" template in your templates of the theme.
23. 23
    Now the next part is really difficult to explain, its the most difficult part. Now we are gonns do the main thing, give our forums the shape! First of all there is the "Header Include" template. You do not need to touch it at all, unless the theme uses some extra javascript. Next comes the header template, just copy everything between the start and end comments and paste it BELOW, a few spaces below the original code in the template(you an edit it by going to AdminCP -> Templates & Style -> Templates -> Your Template Name -> Header Templates -> header if you are not there already).
24. 24
    Then edit the thing by referring to the code above. This way you have to null the thing between each and every comments.

Tips

• You might want to use Firebug, an addon for Firefox for capturing the CSS

 Warnings

• This tutorial is for educational purposes only. A copyright violation and theft is still a crime.