How to Customize Your Own Webpage on ModDB tutorial - Homeworld 2 Complex Simple mod for Homeworld 2

To get an easy start of customizing your mod's page, here's what you need to do (also what I did) :

1. Find an existing template you want to start with. I know you want to make everything of yours original, and of course you will, but you can't just start from nothing because the CSS code you are going to need is really not noob-friendly enough to allow you to do so! What you need is basically extracting the existing code of another mod's page that's already customized. In other words, pick one page that has the style you would like to start with. For example, I liked the style of Mass Effect Reborn's page very much, so I opened this page with a Chrome-based browser (or you can do this with the Google's Chrome browser itself) -- right click, and click View Page Source -- then I just got the html source code of the entire page. Copy the entire html source code into your text editor for the next step (Figure1). Please notice this is just an example, and you need to get the express authorization from the author to do it!

2. Inside this long html source code, is one special part that serves your need -- the CSS template. Finding it could be a little tricky because its content can be very different from page to page. However, the beginning and the end of this CSS template should be recognizable all the time because this is the same html grammar after all. Take Mass Effect Reborn's page as an example, its CSS code part starts with < style > and ends with < / style > (no spaces, I have to type it this way because otherwise it will be taken as some html code here), so what you need to do is copy all this CSS part and save it in a new text file for further editing (Figure 2).

3. Now you have a CSS template to start with (in this new file). Unless you want to dramatically change the way your page functions (which is totally not recommended for a noob like me), you don't have to learn all its grammar. What you are most likely to do, is to change some colours and background pictures -- that's why I said in the first step that you should use your favourite mod's page as the template, so you can change as little as possible to get the result you desire. I think there's not much I really need to say about how to change the colours and the background pictures (if you need, you can download the original PSD file of Complex Simple's background). You just go through your CSS code, looking at those CSS colour parameters and background image links, and change whatever you want to change. To change the background image for example, after downloading the Mass Effect Reborn's page background, I used Photoshop to make my own version of the background following the exact same layout, after that, I uploaded my new background picture to a dropbox website (you can use ModDB too), then I just copied the link of this new background and pasted it in the CSS template to replace the original one. Keep your work as little as possible if this is your first time, so you are not likely to screw up everything (Figure 3)!

4. When you think you have finished customizing your CSS template, it's time to preview it. To do this, you first need to get the source code of your own page (just like Step 1), then you just need to copy all your finished CSS code into the right position of your own page's html source code (again, all done in your text editor). Now, go and find an online HTML preview tool, like this one I used. Copy the entire CSS+html code into the preview tool and preview -- boom! What do you see? If you see your newly customized awesome page, it means you have done it right; if you see nothing or something appears to be wrong, you probably need to check if you have broken the grammar somewhere, or whether your external links are working properly (Figure 4).

5. Double-check your newly customized page (check everything carefully, because it's not easy to update frequently once it's set on the ModDB's server end). Once you think your new page is good to go, send your edited CSS template (only the CSS part, not the entire CSS+html source code) to our support email: support@moddb.com

6. Very soon, everyone will see the new awesome page of your mod :D