A group about Web Design & Development. Ask and Learn everything related to web design and development.

Report article RSS Feed Moddb tips & tricks

Various Moddb tips & tricks, how to make a webpage/article more graphically decent.

Posted by feillyne on Feb 18th, 2010
Basic Client Side Coding.

Tips & tricks

1) Simple black background. You can use a simple div to have such an effect:

html4strict code:
<div style="color: white; bottom: -20px; background-color: #000000; height: 100%; width: 100%;">

Note: it's a trick also for the bottom pictures if they don't align with bottommost Moddb frame (you can just use a div, center's and others don't work too good).
Also note: you'll need to set right link properties to get links focused on displayed right.

See also point #4 to see how to cope with the linear bad-looking transition from the white background into the black one.

2) Extracting full pics from previews.
For e.g. posting news with a preview pic you don't have... yet, and you want to keep the group style of particular preview pictures.

Let's take LOTR fan group as an example:
Moddb.com

The news' cropped preview picture link is:
media.moddb.com/cache/images/ articles/1/51/50664/crop_120x90/lord-of-the-rings.jpg

Now what do you need to do to see the full picture even if you don't have it?
A) Delete the folder cache/ from the address
B) Delete the folder crop_120x90/

Now your link should look like:
media.moddb.com/images/articles/1/51/50664/lord-of-the-rings.jpg

Click enter and see if it's the full version of the small cropped preview. You can use it for your articles for this particular group now!

3) Overlapping graphics in the game descriptions (like in this one: Moddb.com )

The code for it:

html4strict code:
<div style="background: transparent url(http://THE20PXHEIGHTPICTUREUNDERTHEREDLINE.jpg); color: darkred; position: absolute; top: 340px; background-color: #000000; height: 20px; width: 940px;"> </div><div class="table" style="background: transparent url(http://THE155HEIGHTPICTUREUNDERTHEABOVESTRIPE.jpg) repeat scroll 0% 0%; position: relative; width: 940px; height: 155px;"><div style="padding: 8px; line-height: 17px; color: #ffffff; height: 85px; left: 57px; position: absolute; text-align: justify; top: 25px; width: 452px;"><strong>--- GAME/MOD DESCRIPTION HERE -----</strong>

</div></div>


<- the whole picture has to be 950px wide, and about 355px high. 155px for the top banner, 175px for the 20px stripe and 155px bottom header (i.e. you cut them appropriately and leave some 20/25px stripe in the middle for the Moddb menu - vide Img38.imagefra.me ).
The last one can be enlarged/heightened as much as you wish. Only don't change the code for and the height of the 20px high stripe, is there to replace/overlap a white space not fixed by Moddb staff. This stripe is buggy though and you can treat it only as a workaround.


4) News with a black background, without a proper pic to blend the white top with the rest, may look a bit ugly. What can you do to fix that?

You can do something like this at the beginning of the news:

html4strict code:
<div style="color: white; bottom: -20px; background-color: #000000; height: 100%; width: 100%;"><img src="http://img37.imagefra.me/img/img37/2/2/18/feillyne/f_e44kgercm_ddc794d.png" alt="" /></div>

Yes, this picture is self-made using GIMP. You can use it, I won't complain about anything and you don't need to credit me. ;-)
You may use your own picture of the upper white portion of the page, and slightly underneath, the transition into the black background.

Just remember to have a pic exactly 620px wide (or eventually wider).

5) Moddb pics and others. You can download official Moddb press kit here:
Moddb.com

6) Count down timer. You can make count down timer by inserting this code into a post:
countdown 19 February 2010 17:00:00 -0500 /countdown

Enclose "countdown" and "/countdown" in square brackets [ ] ModDB editor automatically converted this code.

html4strict code:
COUNTDOWN TO 19 February 2010 17:00:00 -0500


:-)

Post comment Comments
jjawinte
jjawinte Feb 18 2010, 7:10pm says:

Wonderfully useful information. Thanks for taking the time to put all this together Feillyne !

+3 votes     reply to comment
weasil
weasil Apr 30 2010, 8:57am says:

Wow that is cool!! i always wondered how they did the count down timer thingy... Thanks man you are the best!!

+2 votes     reply to comment
feillyne Author
feillyne May 27 2010, 11:57pm replied:

That was added by INtense! or Henley (probably INtense!) to the tutorial. :-D

+2 votes   reply to comment
jstubbles
jstubbles Jul 24 2010, 2:17pm says:

The overlapping banner image doesn't work for me at all. The HTML page editor either removes the center spacer (20px image) code altogether, or there's just a white bar on top of the bottom banner image. I can't get it seamless like that Dante's banner :(

+2 votes     reply to comment
limit79
limit79 Feb 7 2011, 2:51pm says:

Hey im having the same problem with "the center 20px code" its coming up white can some one please help me with a fix for it ? pm me if u like thanx limit

+2 votes     reply to comment
feillyne Author
feillyne Jul 18 2011, 6:23pm says:

Hmmmmm, updated some code of it, IIRC.

Here's the Generals Zero Hour profile's code:
<div style="background: url('http://media.moddb.com/images/groups/1/4/3338/cc-zerohour-undrbnr.jpg') repeat scroll 0% 0% #000000; color: darkred; position: absolute; top: 340px; height: 20px; width: 940px;"> </div><div class="table" style="background: url('http://media.moddb.com/images/groups/1/4/3338/cc-zerohour-btmbnreeee.jpg') repeat scroll 0% 0% transparent; position: relative; width: 940px; height: 155px;"><div style="padding: 8px; line-height: 17px; color: #ffffff; height: 85px; left: 57px; position: absolute; text-align: justify; top: 25px; width: 452px;"><strong>Prepare to unleash the absolute latest in modern weapons technology against the world's most powerful Generals in Command & Conquer Generals: Zero Hour. In the next era of military strategy and might, you'll need to command a more technologically advanced arsenal to defeat new, more powerful enemies.
</strong></div></div>

+3 votes   reply to comment
Swyter
Swyter Oct 30 2011, 3:04pm says:

Easily the best tutorial of this site. At least for me.
Helped me a lot for making the designs of Star Wars Conquest and The Last Days.

Thanks. :)

+2 votes     reply to comment
Admiral_Skeybar
Admiral_Skeybar Apr 11 2012, 6:53am says:

Very interesting. I think this is very similar to how I set up my blog.

+2 votes     reply to comment
cW#Ravenblood
cW#Ravenblood Apr 12 2012, 6:24am says:

Pretty awesome stuff, nice information!
Thanks m8^^

+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

Established
Nov 13, 2007
Privacy
Public
Subscription
Open to all members
Contact
Send Message
Email
Members Only
Membership
Join this group
Group Watch
Track this group
Tutorial
Browse
Tutorials
Report Abuse
Report article
Related Groups
Inside the Page
Inside the Page Hobbies & Interests group with 55 members
Web devs & web game devs
Web devs & web game devs Hobbies & Interests group with 35 members