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

HTML

Tags:

  • 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 Moddb.com 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(http://www.yourwebsite.com/dir/dir/image.jpg); 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>

HEADERS:

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

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

IMAGES:

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

<img src="http://www.yourwebsite.com/dir/image.jpg" alt="" width="209" height="184" />

INLINE CSS STYLES:

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

CSS

Huge source of CSS information:
W3Schools.com

Some Helpful CSS styles

Div Size
height:0px;
width:0px;

Div Alignment
float:left;
float:right;
clear:both;

Div background image
background: url(http://www.yourwebsite.com/dir/image.jpg);
background-repeat:repeat-x;
background-repeat:repeat-y;
background-repeat:no-repeat;

CSS Font Styles
font-family: Arial,sans-serif;
font-size:12px;
font-weight:bolder;
text-align:left;
color:#000;
line-height:150%;

Font Alignment
text-align:left;
text-align:center;
text-align:right;

Spacing
margin:0px;
margin-top:0px;
margin-bottom:0px;
padding:0px;
padding-top:0px;
padding-bottom:0px;

Decoration
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

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.

Reply Good karma+6 votes
[TZP]LoNer1
[TZP]LoNer1

Hey boo, this looks nice man!

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

Nice one man, cheers!

Reply Good karma Bad karma+3 votes
booman Author
booman

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

Reply Good karma+4 votes
Yldrania
Yldrania

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.

Reply Good karma Bad karma+1 vote
d0wngrade
d0wngrade

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

Reply Good karma Bad karma+1 vote
cW#Ravenblood

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

Reply Good karma Bad karma+2 votes
jjawinte
jjawinte

Yes. A very informative article booman. Thank you.

Reply Good karma Bad karma+2 votes
booman Author
booman

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

Reply Good karma+2 votes
booman Author
booman

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

Reply Good karma+2 votes
DreamorCZ
DreamorCZ

Great tutorial. Thanks for this.

Reply Good karma Bad karma+2 votes
booman Author
booman

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

Reply Good karma+2 votes
Pardner
Pardner

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

Reply Good karma Bad karma+2 votes
booman Author
booman

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.

Reply Good karma+2 votes
Commander_M.Wittmann
Commander_M.Wittmann

How do you gain access to profile editor ?

Sturmfuhrer

Reply Good karma Bad karma+1 vote
booman Author
booman

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

Reply Good karma+1 vote
Orzie
Orzie

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

Reply Good karma Bad karma+1 vote
TheUnbeholden
TheUnbeholden

What exactly does padding do?

Reply Good karma Bad karma+1 vote
booman Author
booman

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.

Reply Good karma+1 vote
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:

Established
Privacy
Public
Subscription
Open to all members
Contact
Send Message
Membership
Join group
Group watch
Start tracking
Tutorial
Browse
Tutorials
Share
Related Groups
Web devs & web game devs
Web devs & web game devs Hobbies & Interests with 43 members