For all web developpers and webpage layout makers, also for beginners who desire to learn! :-)

Customize your Moddb page with HTML & CSS so your game page can represent your game and branding graphics.

Posted by booman on May 14th, 2013
Intermediate Client Side Coding.

Customize your Moddb game page to mimic your game themes and brandings.

You can Customize your Game Page Description area and posts with some HTML and CSS knowledge. If you want to include background graphics along with buttons and thumnbnails, you will need a hosting server to upload your image files to and reference them in your HTML & CSS.
note - white space between tags can create a lot of mis-alignment, make sure to delete the white space after copying into Moddb HTML editor.



  • Some tags will be stripped away when saving your profile description.
  • Try to stay away from paragraph, script, style, head, body, etc.
  • The main tags we will be using are: div, span, img, a, h
  • Using tags and CSS Styles will allow you to over-ride standard settings & styles.

DIV Tags:

  • start with a DIV as your container for content (images, text, links, etc.)
  • use CSS Styles to decorate DIV's with backgrounds and borders
  • all DIV's need to be on one line to elminiate the gap between background images.

DIV Background Image:

  • add your custom images to any DIV with CSS styles
  • Description area: 940 pixels wide
  • All other areas:620 pixels wide
<div style="background-image: url(; width: 525px; padding: 5px; background-repeat: repeat-y; border: 0px;">text here</div>

SPAN Tags:

  • span ignores CSS styles and allows you to customize your text
<span style="CSS HERE">text here</span>


  • default headers by
  • customize the headers with style tag
    h1, h2, h3, h4, etc.

<h1 style="CSS here">text here</h1>


  • use images for links or thumbnails
  • decorate with CSS background and border, width, height, margin, padding

<img src="" alt="" width="209" height="184" />


  • Style=""
  • is the area where all the CSS can go for any object
  • will over-ride the default HTML and CSS settings


Huge source of CSS information:

Some Helpful CSS styles

Div Size

Div Alignment

Div background image
background: url(;

CSS Font Styles
font-family: Arial,sans-serif;

Font Alignment


border:1px solid #FFF;
border-top:1px solid #FFF;
border-bottom:1px solid #FFF;

Quick Tutorial:

begin with clicking the html button at the end of the description tools

This is your HTML source editor. Its basic, but gets the job done.

enter your div code and style. Include the span code before you close the div

Here is the span code, notice the /div code that closes the container?

Then create your next div that will stack below the first one
you can copy and paste the same code for the background CSS,
but this tilable image needs to have repeat-y to tile properly

this is the span code for your main content text

I used Notepad or Word pad to formate my code so it is easier to read.
don't forget the Moddb HTML source editor will strip out code and white
space will act like returns.

When you are ready, click the Preview button to see your results.
The editor will not display all the formatting correctly. The Preview will
show you the final formatting.

Most of your alignment and formatting will probably look screwed up, so make sure to check your image widths and div widths, also check for white-space. I would copy all the code from the HTML Source Editor on a regular basis and copy it to notepad or Word pad because the page won't save a "rough draft" copy, there is only a final SAVE.

Post comment Comments
booman Author
booman Jul 27 2012 says:

I still havn't figured out how to make the code text a different color. But if you want to see the code, just highlight it.

+6 votes   reply to comment
[TZP]LoNer1 May 14 2013 replied:

Hey boo, this looks nice man!

For the more advanced users, I'd recommend you to my download here:

Nice one man, cheers!

+3 votes     reply to comment
booman Author
booman May 14 2013 replied:

Absolutely! That Guide is GREAT and very informative... specially for modifying the entire game profile!
Thanks for linking to your Guide

+4 votes   reply to comment
Yldrania Dec 31 2013 replied:

I did download your tutorial, but I am having a really hard time finding the correct steps and instructions to be honest. That's why I continue searching for something I can understand more easily.

+1 vote     reply to comment
d0wngrade Feb 10 2015 replied:

In order to color the code text you just need to add the 'color' attribute to the code div's class: "html geshi"

+1 vote     reply to comment
cW#Ravenblood Jul 29 2012 says:

Nice tutorial, will work that through later! Well done!

+2 votes     reply to comment
jjawinte Jul 30 2012 says:

Yes. A very informative article booman. Thank you.

+2 votes     reply to comment
booman Author
booman Jul 30 2012 says:

thanks guys, let me know if you find any bugs in my tutorial and I'll update it.
I'm thinking of making some clever CSS buttons with the navigation example at the bottom

+2 votes   reply to comment
booman Author
booman Jul 31 2012 replied:

I added some decoration to the footer links so they look more like buttons. Its pretty easy, just use CSS3 for border-radius, some padding, margins and text-decoration:none to get rid of the underline

+2 votes   reply to comment
DreamorCZ Nov 14 2012 says:

Great tutorial. Thanks for this.

+2 votes     reply to comment
booman Author
booman Apr 17 2013 replied:

no problem. I thought it would be nice for everyone to know you can decorate your posts.

+2 votes   reply to comment
Pardner Jan 23 2013 says:

Do you know how to change the background image of the body? e.g.

+2 votes     reply to comment
booman Author
booman Apr 17 2013 replied:

Only if you have a game page. If you are just a member like me, you won't have access to profile editor.
But game pages give you access to the profile and description for the content areas. When you edit these, you can select HTML too... then you can add a custom background and custom images, decoraction, etc.

+2 votes   reply to comment
Commander_M.Wittmann Jul 14 2013 says:

How do you gain access to profile editor ?


+1 vote     reply to comment
booman Author
booman Sep 22 2014 replied:

That depends on if you are using a typical member profile or a game page profile.
Game pages give you a lot more control over the page, but member profiles do not.
You should be able to click edit and scroll down to the game page profile textbox. then you click on the HTML button

+1 vote   reply to comment
Orzie Jul 19 2013 says:

Thanks for the info, it will be put to a good use!

+1 vote     reply to comment
TheUnbeholden Jun 2 2014 says:

What exactly does padding do?

+1 vote     reply to comment
booman Author
booman Sep 22 2014 replied:

sorry, I don't get notifications for this page unless you reply to my post.
Padding adds extra space inside the container. Doesn't matter if its a DIV, IMG, or any kind of tag. If you have an HTML or CSS border, adding some space makes things line up and text easier to read.

+1 vote   reply to comment
Post a comment

You are not logged in, your comment will be anonymous unless you join the community. Or sign in with your social account:

Dec 6, 2009
Open to all members
Send Message
Join this group
Group watch
Start tracking
Related Groups
Web devs & web game devs
Web devs & web game devs Hobbies & Interests with 39 members