Post tutorial Report article RSS Feed 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 siliconworm on Jun 5th, 2014
Basic Website.

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

NOTE: 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 Erayser, ModDB's web editor by clicking on this link: or by sending an email to the support (will probably take way longer):

6. Very soon, everyone will see the new awesome page of your mod!!!! If you have any further question, feel free to ask. If you still don't know how to extract a page's source code or find the CSS part within it, I can do it for you.

Post comment Comments
SinKing Jun 6 2014 says:

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

+5 votes     reply to comment
Maggy_ Jun 6 2014 says:

Thank you :)

+2 votes     reply to comment
TKAzA Staff
TKAzA Jun 10 2014 says:

Nice write up.

+3 votes   reply to comment
polloio Sep 10 2014 says:

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

+2 votes     reply to comment
kas110 Oct 19 2014 says:

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

+2 votes     reply to comment
Bassethound Feb 8 2015 says:

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

+2 votes     reply to comment
Bassethound Feb 8 2015 says:

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

+2 votes     reply to comment
Bassethound Feb 8 2015 says:

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

+2 votes     reply to comment
Bassethound Apr 3 2015 says:

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.

+2 votes     reply to comment
Post a Comment
click to sign in

You are not logged in, your comment will be anonymous unless you join the community today (totally free - or sign in with your social account on the right) which we encourage all contributors to do.

2000 characters limit; HTML formatting and smileys are not supported - text only

Report Abuse
Report article
Related Games
Homeworld 2
Homeworld 2 Real Time Strategy
Related Groups
Homeworld 2 Modders Group
Homeworld 2 Modders Group Fans & Clans with 133 members