A group about Web Design & Development. Ask and Learn everything related to web design and development.
Various Moddb tips & tricks, how to make a webpage/article more graphically decent.
Posted by feillyne on Feb 18th, 2010
Basic Client Side Coding.
1) Simple black background. You can use a simple div to have such an effect:
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:
The news' cropped preview picture link is:
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:
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:
<- 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:
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:
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.