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

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 servers 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 the ModDB Support by this email: support@moddb.com

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.  


Example 2 (Homeworld 2 Mass Effect Reborn): 

The CEO of Phoenix Interactive Inc. is willing to provide some more advanced guidance on customizing your own webpage. This part is left to be completed after their public release.


Post comment Comments
SinKing
SinKing Jun 6 2014, 10:42am says:

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

+3 votes     reply to comment
D.E.G
D.E.G Jun 6 2014, 1:59pm says:

Thank you :)

+2 votes     reply to comment
TKAzA
TKAzA Jun 10 2014, 9:59pm says:

Nice write up.

+2 votes     reply to comment
polloio
polloio Sep 10 2014, 5:35am 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...

+1 vote     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

Tutorial
Browse
Tutorials
Report Abuse
Report article
Related Mods
Homeworld 2 Complex Simple (Homeworld 2)
Homeworld 2 Complex Simple Homeworld 2 - Single & Multiplayer Real Time Strategy
Related Games
Homeworld 2
Homeworld 2 Single & Multiplayer Real Time Strategy
Related Groups
Homeworld 2 Modders Group
Homeworld 2 Modders Group Fans & Clans group with 127 members