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

Post tutorial Report content RSS feed Moddb tips & tricks

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

Posted by on - 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:


:-)

Comments
jjawinte
jjawinte

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

Reply Good karma Bad karma+3 votes
weasil
weasil

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

Reply Good karma Bad karma+2 votes
feillyne AuthorSubscriber
feillyne

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

Reply Good karma+3 votes
jstubbles
jstubbles

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 :(

Reply Good karma Bad karma+2 votes
limit79
limit79

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

Reply Good karma Bad karma+2 votes
feillyne AuthorSubscriber
feillyne

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>

Reply Good karma+3 votes
Swyter
Swyter

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

Reply Good karma Bad karma+2 votes
Admiral_Nemo
Admiral_Nemo

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

Reply Good karma Bad karma+2 votes
cW#Ravenblood

Pretty awesome stuff, nice information!
Thanks m8^^

Reply Good karma Bad karma+2 votes
Post a comment
Sign in or join with:

Only registered members can share their thoughts. So come on! Join the community today (totally free - or sign in with your social account on the right) and join in the conversation.

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