Forum Thread
by member
  Posts  
Custom ModDB page? (Forums : Coding & Scripting : Custom ModDB page?) Locked
Thread Options
Jun 29 2013, 4:47am Anchor

Hello!I want to edit my mod page to something like this  or this.
But for some reason I can't get it to work, and everything stays contained in my description.
Is there any external editor for this?And if there is any other option, could someone give me an example of how HTML coding on ModDB works?
Sorry if this something easy, or mentioned before on this forum but Google wasnt really a big help.
Thanks in advance :-).

Jun 29 2013, 9:12am Anchor

Hi TehBoxNoob,
seems to me, that games/mods like Black Mesa and Minecraft have a special arrangement to adjust the global CSS of their pages. Here is a good tutorial for doing it at least inside your posts: Moddb.com

The second page is a bit tricky: all the outlining/custom images are coded in the blog-post (the description does not parse the code) and adjusted with absolute positions, for example:

html4strict code:
<div style="z-index: 1; position: absolute; background: none repeat scroll 0% 0% transparent; top: 190px; right: 950px;">
<span style="color: #ffffff;">
<img src="http://media.indiedb.com/images/members/1/926/925114/images.jpg" alt="" />
</span>
</div>

This code generates a copy of your avatar on the left side. :)

It's easy to do it with a WYSIWYG-editor like Opera Dragonfly (the one I use), but this one is integrated into the Opera browser, maybe someone else knows a stand-alone editor.



Edited by: MausGames

Jun 29 2013, 9:39am Anchor

I'm gonna try that.Thanks :D.
EDIT:How do I inject my style into it?I keep getting HTML text under my description header.

MausGames wrote:Hi TehBoxNoob,
the first is done by overwriting the css-style with some sort of "style-injection" in the game's description, for example:
html4strict code:
<style type="text/css">
.container {
  background: url("http://media.moddb.com/images/mods/1/7/6885/obm_bg_header.png") repeat-x top center;
}
</style>

The second page is a bit tricky: all the outlining/custom images are coded in the blog-post (the description does not parse the code) and adjusted with absolute positions, for example:

html4strict code:
<div style="z-index: 1; position: absolute; background: none repeat scroll 0% 0% transparent; top: 190px; right: 950px;">
<span style="color: #ffffff;">
<img src="http://media.indiedb.com/images/members/1/926/925114/images.jpg" alt="" />
</span>
</div>

This code generates a copy of your avatar on the left side. :)

It's easy to do it with a WYSIWYG-editor like Opera Dragonfly (the one I use), but this one is integrated into the Opera browser, maybe someone else knows a stand-alone editor.


Edited by: CodeBlackNL

Jun 29 2013, 10:39am Anchor

Here is a better tutorial: Moddb.com
I updated my thread above, it looks like the CSS-overwrite is not possible that way.

Edited by: MausGames

Jun 29 2013, 11:06am Anchor
MausGames wrote:Here is a better tutorial: Moddb.com
I updated my thread above, it looks like the CSS-overwrite is not possible that way.

One last question:
How do I change this? It stays the same, atleast for me then :/.
Thanks for the link to the "How to ModDB page", those codes really helped :D.

Edited by: CodeBlackNL

Jun 29 2013, 11:11am Anchor
TehBoxNoob wrote:How do I change this? It stays the same, atleast for me then :/.

The #body on this page is overwritten (CSS). I thought at first that you can simply inject them like the image code (also because their CSS code is not in a separate file, but in the page itself), but it looks like they have a special arrangement with Desura. Correct me, if I'm wrong.

Edited by: MausGames

Jun 29 2013, 11:20am Anchor

Alright then, thanks for the information :).

Reply to Thread
click to sign in and post

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.