Simplex started as a branch from Complex. It has combined features from Path To Victory as well as many other mods through a long history of R&D. This mod aims to excavate the full potential of the Homeworld 2 engine and it will simply blow your mind with incredible fun!

Post tutorial RSS How to Customize Your Own Webpage on ModDB

This is a tutorial for modders like me who knows modding itself very well but has absolute no clue about how to customize a webpage on ModDB.

Posted by on - Basic Website

A 100% Noob-Proof Tutorial of Customizing Your Own Page on ModDB


This is an open Wiki-style tutorial that anyone can edit or add.

Example 1 (Homeworld 2 Complex Simple):

This is what a complete noob can do to customize his own page on ModDB

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!

Figure 1 -- Viewing the page source code using Google's Chrome browser.
Here, I'm using my own mod's page as an example.
Tutorial Pic: Extracting Page Source Code

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).

Figure 2 -- Location of the CSS template in the source code of my mod's ModDB page.
Tutorial Pic: Finding the CSS in Page Source

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)!

Figure 3 -- What I actually changed is just the background image. Everything else was unchanged because 1) I'm a 100% noob and 2) the template I've chosen is already perfect for me.
Tutorial Pic: Replacing Background Image in CSS

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).

Figure 4 -- Insert your modified CSS template into the correct location of your own page source, then you should be able to preview your new homepage using some online HTML preview tools.
Tutorial Pic: Previewing the Customization

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:

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

SinKing - - 3,119 comments

Excellent idea! I only changed the header images once and wondered how people create entire custom pages.

Reply Good karma Bad karma+10 votes
Olku_ - - 2,076 comments

Thank you :)

Reply Good karma Bad karma+4 votes
TKAzA - - 3,154 comments

Nice write up.

Reply Good karma Bad karma+6 votes
polloio - - 3,977 comments

Maybe I will sound a total moron....but can someone tell me how to make whitespace or get down of one line while writing a blog? Because I'm getting crazy trying to figure it out...

Reply Good karma Bad karma+4 votes
kas110 - - 146 comments

How long does it take Moddb to change it once you have emailed them it? Been waiting a few days...

Reply Good karma Bad karma+5 votes
All_SHREKD_UP! - - 319 comments

How were you able to do that search thingy to find the CSS so quickly?

Reply Good karma Bad karma+6 votes
Graves.Party.Army - - 302 comments

( Ctrl + F ) is search function search for the CSS

Reply Good karma Bad karma+5 votes
All_SHREKD_UP! - - 319 comments

Oh yeah, there isn't style on my source code.

Reply Good karma Bad karma+4 votes
Graves.Party.Army - - 302 comments

thats why u use someones preexisting one and replace it with yours ;)

Reply Good karma Bad karma+3 votes
All_SHREKD_UP! - - 319 comments

Unfortunately, I can't find the CSS, I need help.

Reply Good karma Bad karma+4 votes
All_SHREKD_UP! - - 319 comments

Don't know if it's going to work, I'm getting ready to email this code to the email.

First Republic Commando mod with epic background.

I'm 99.9% sure this'll work.

Reply Good karma Bad karma+4 votes
GeneralTantor - - 637 comments

Thanks, this is awesome I Just sent my code to Erayser =D

Reply Good karma Bad karma+4 votes
Blegh5531 - - 39 comments

How did I suffer with the background, it did not appear at all, it turned out to be a matter of links ... apparently I'm even more noob than the author of the mod :D
Extremely clear guide, many thanks to the author!

Reply Good karma Bad karma+1 vote
HFCR - - 527 comments

Thanks for tutorial.

Reply Good karma Bad karma+1 vote
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.