SlideDB Indie DB Mod DB RSS Fan us on Facebook Watch us on Youtube Join us on Steam Follow us on Twitter

If it's information about Mod DB and ramblings about mods in general that you are after - then you have come to the right place. Welcome to the official Mod DB BLOG, watch this profile to keep updated, join to show your support.

RSS Articles  (0 - 5 of 249)

ModDB is a website that aims to create a lasting database of mods, games and indie games. Somestimes, as a developer, you feel it necessary to have a customized design for your content, to represent it effectively. Thus far we never published any tutorial on the way to do it properly, and that is what we aim to help you with today.

This tutorial is considered as "advanced" and will use words and terms about web customization, such as CSS (Cascading Style Sheets) and HTML (web coding). Worry not, we will explain how it works.


Phase 1: Understanding how customization works

First of all, please notice customizing requires some specific skills, particularly when it comes to programmation and design. Hopefully, Google Chrome and Mozilla Firefox now propose a web inspector, which would be really useful for this tutorial. We'll be using the one provided by Google Chrome, as it appears to be faster and more user friendly than Mozilla Firefox. That doesn't mean you can't do it with Mozilla Firefox, not at all.

Here is a list of what you need to know about how customization works:

  • Customizations won't replace the main CSS of ModDB. Your modifications will be added into another one, which will be implemented into all of your pages.
  • Your modifications need to be staff approved, that means you will need to give your customized CSS to the staff, by sending a private message to Erayser (website editor). Modifications are generally approved and applied within 2 business days.
  • If you want to use a customized design created by someone else on the site, you will need to get the express authorization from the author.
  • If your modifications break the site in a sense of conflictual CSS and/or HTML elements, your modifications won't be approved until you solve them.
  • The ModDB logo and the user bar can't be removed. However, you can edit them, visually speaking.
  • Your modifications can be applied on both ModDB and IndieDB.

The circle of media

In our previous tutorial, we discussed about why it is important to create an effective profile (for your mod, game or engine). It means you are capturing the attention of your visitors and keeping them there for as long as possible to generate interest. And designing your pages in correlation with the identity of your project is a part of it. That why it is necessary to design a page that can represent it perfectly.

As an example, you are not going to make a modern design for a medieval project, aren't you? That's why to optimize your identity, you should focus on creating a design that is similar to what you're doing, as it would seriously impact the attention of your visitors. Remember, we want to help you succeed!

Here's a great example of what you can achieve thanks to this tutorial:

There are three different kinds of customizations

Whether you are an artist that wants to make a complete design or someone that just want a different background, you can all customize your profiles. What truly matters is how you will proceed.

Here is a list of three different kinds of customizations before we start:

  • Complete customization: That means you want to change everything on your page (like Sins of The Prophets). This advanced customization requires a lot of time, as you will need to be methodic and organized. Worry not, we'll show you how to do it properly.
  • Medium customization: That means basically you just want to change the colors, the backgrounds, some images and stuff like that, which is not really complicated.
  • Light customization: That means you just want to change your background, and add a background picture from your project.


Phase 2: Web Inspector (or DevTools)

So you had a fantastic idea about a new design for your project and you want to have a stunning page to represent effectively your stuff. Perfect! You'll need to use the web inspector from Google Chrome or Mozilla Firefox to follow this tutorial. I'll be using the one provided by Google Chrome for the reasons shown above, mostly for compatibility between browsers.

Open the web inspector

To open the web inspector, simply use Ctrl+Shift+I on Windows or Cmd+Opt+I on Mac OSX. You can do it as well with a right click somewhere on the site, and then click on the button "Web Inspector" or "Inspect this page". For this tutorial we'll be giving explanations on how to edit your page, so let's use your own page.

So, you are on your page, the web inspector is opened but you don't know what to do. On the left, this is your page, in HTML5. On the right, the columns represent the codes from the main CSS. You don't need to use other tabs such as "Network, Sources..." as we just want to change the design.

Let's change, for example a single element, but you don't know how to pick one. You just need to click on the search icon, so that when your cursor will be on an element of the page (such as text, images...) the web inspector will show you where it is in the programmation.

Once you clicked on the icon, we will move the cursor on the project name. Then, you should see a blue background color which represents the position dedicated to the name. Click ...

... and then the web inspector will show you the exact position of your element in the HTML code.

Changing elements

You will notice on the right that you have design properties attached to your title. This tab will be the one you are going to use the most when you'll be customizing your page. There are plenty of properties (background, border, text, color...) but we won't show all of them.

Remember the "name of the element" represents the property you want to change. Be careful, because If various titles on your page are using the same property (element), all of them will be changed. The unique reason for some of them to be different is that they have a specific modification, applied with their respective section/div. It's getting a bit complicated here, but worry not, I'll explain how specific modifications work later.


For example, let's just change the color (click on the color property), and replace "#FFF" by "green" or whatever you want as long as it's a recognized color.

Saving your modifications

Congratulations! You made your very first modification. That's one small step for you but one giant leap for your page. Now that you have a customized element, you'll need to save it into a .CSS file. We recommend you to use Notepad++ for Windows or TextWrangler for Mac OSX to save your modifications.


Phase 3: Preview

It's done! You believed you customized what you wanted, that it's the time to see how it looks. There are plenty of ways to do it, but let's use the easiest one.

Using the source code as a reference

Get back to the summary page of your project on ModDB such as "moddb.com/xxxx/xxxxxxxxxx". Then, right click and select "View source" or if the button doesn't show up, click on the URL at the top (browser) and add before it "view-source:", like that:

view-source:

You should be able to see thousands of lines representing the source code of your page. What we want to do is to test your modifications. To do so, we'll need to implement the latter ones in this code. Listen carefully as this is a bit difficult. First of all, save the whole source code in Notepad++ (Windows) or TextWrangler (Mac OSX). Once it's done, you need to implement all of your modifications in this portion of code, just before the div called "Column Span-all".

Once it's done, your code is ready to be previewed. All you need is to save your file as .HTML and then open it with Google Chrome or Mozilla Firefox. You will be able to see if your code works perfectly fine or not.

Phase 4: Common issues and solutions

You now understand how customization works. Brillant! Like I said previously, we can't give you a list with all the possibilities you can do with your CSS. There are plenty of tutorials on the internet from specialized websites. Now, let's focus on the problems you may encounter.

Usage of the "!important" property

If you're making a stunning design, you will notice that some specific elements won't change despite your modifications. It's normal, in fact you will need to use the "!important" property for each element that doesn't show up properly. You will recognize them as they are likethat.

However, the fewer "!important" there are, the better. Remember these are exceptions. To make one, you will need to proceed like that:

div.headerbox ul.menu {
  background-color: #000!important; // LIKE THIS EXAMPLE
  list-style: none;
  margin: 0;
}

Compatibility with browsers

It is essential to ensure your code is compatible with all browsers. Although today a lot of elements are automatically compatible, some of them are still irritating for all web designers, like specific gradients, keyframe animations, box-shadows, text-shadows and so on... Fortunately, a lot of tutorials on the web have solutions for that. Worry no more!


Phase 5: Design examples

Here's a short list of pages using a total customized design, if you don't have any inspiration or if you'd like to contact their respective authors, to get the authorization to use one. Click on the pictures to see the pages on the site.


Phase 6: Send us your CSS modifications

That's it! You made it, your awesome modifications are ready and you want to publish your customized design. Therefore, you will need to send a private message to Erayser (website editor). As we said previously, modifications are generally approved and applied within 2 business days.

We recommend you to upload your CSS file somewhere else like Dropbox or to paste your CSS modifications on pastebin.com, unless you only made minor changes.

Feel free to ask any questions about this tutorial or the problems you may encounter while customizing your respective profiles. Good luck making great profiles! Remember, do or do not, there is no try!


When we first heard the news of GameFront's closure we were incredibly sad and disappointed, but we understood the many challenges the site faced. At lot has changed since 1999. We no longer have to download the hottest gaming trailers in AVI format and watch them once we get our codecs in order, Youtube does that for us. Nor do we have to manually install demos, patches and gaming clients, our digital distribution program solves the hard stuff. And while epic total conversions that push boundaries like Counter-Strike and DotA once did are not as common, mods like these remain as important as ever in making new and old games great.

gamefront logo


So that's why when we heard the news, we knew we couldn't sit by idly and let GameFront (formerly FileFront and FileLeach) once a behemoth of the gaming world, slowly fade into obscurity. After all choice, openness and preserving history are ideologies we value greatly at ModDB and IndieDB. So we began talking to Defy Media the former owner of GameFront.com and FileFront.com, and reached an agreement to acquire these domains. It is a challenge we are eager to take on, and we thank Defy Media greatly for giving us the opportunity.

Our 3 step plan


We've just taken STEP 1, once again the site is open to the entire world to upload and share files for the first time in many years. We know it doesn't contain the content it once did, but we shall persevere and encourage our community to share all the user generated content they can, so no gaming history is lost.

STEP 2, will be designing a site which strikes a balance between the powerful and detailed FileFront site of old, which also embodies many of the usability and accessibility traits common in today's websites. We consider ourselves to be power users, and aim to bring back what we believe once made the FileFront Network great. Rest assured the current design is a temporary stepping stone.

STEP 3, is ultimately up to you. Perhaps GameFront is a dinosaur and not needed. But we want to believe that there is still a community of gamers out there, who want an open gaming site, that embodies DRM free principles and allows anyone to create and share content they are working on, without restriction.

So please join us in the forums, start exploring games, mods and files and most importantly help us rebuild the archive by uploading new and old files. You can also find us on Twitter, Facebook, Twitch and Youtube.

With our recent giveaways feature landing we promised that more features were on the way and today we're happy to launch our new prices feature across the DBolical Network to help you get the best possible price on your favourite games. Whether you are one of our talented developers who hosts a game profile with us or a reader wanting to get the best possible deal, this feature is for you.

The Rundown

Starting today profiles will display purchase links to online retailers that sell the product. We automatically prioritize the store that offers the best price helping our community find great deals. Developers our system attempts to automatically find stores, but you have complete control over the feature and can add or remove what you want. Here it is in action:

pricemenofwar1 bigpricepreview1

How does it work?

READERS: We know you probably already shop at Steam or Amazon. So instead of launching yet another store, we link to all of your favorites. Just keep your eye out for the buy box on the right menu in profiles, and start purchasing to support us and the developers. We will always attempt to dig up the cheapest price, helping you save $$ in the process. Everyone wins :) We cannot guarantee the prices are 100% correct all of the time, but we do our best to keep them updated in USD.

DEVELOPERS: Our pricing system is, and has already automatically matched a lot of games on our site to retailers. This will continue to happen everyday, it's quite magical really. But sometimes this process might miss your game or lead to some wrong matches. Don't stress - you also have complete control over what is shown.

There is now a new field at the bottom of the edit page for all games, software and hardware (pictured below). Using this field simply edit your store links and leave the rest to us. We will frequently grab the latest prices for all the stores you listed and display it on your profile for your readers to see. Easy.

profileedit


STOREKEEPERS: To make this feature possible we have worked alongside many great retailers, and plan to add more. If you run a digital distribution store selling games, software or hardware and have an API and affiliate system please reach out. We'd be keen to add you to the list! All prices shown on the site are in USD, we plan on extending this to other currencies in the near future.

Supporting our community

We really hope you get some great prices on games through this feature, you can also feel good knowing that any purchase made helps support our community so we can continue to add great features to make our sites the best they possible can be. Get a great price, support the developers, support us - it's a triple win.

Disclaimer

Due to the nature of our system attempting to match our games against store catalog's automatically there is the small possibility that you could encounter a buy link for an incorrect item - if you do notice an incorrect link please contact us and we will fix it promptly. Additionally whilst we will do our best to keep our listed prices as up-to-date and accurate as possible there is always the rare possibility of a discrepancy between a stores price and the advertised price on our site. In the unfortunate event that this does occur DBolical Pty Ltd cannot be held liable for displaying an incorrect/misleading price in the event this occurs.

Inquiries

If you have any inquiries, or perhaps you are a retailer wanting to join our program - please contact us as we'd love to hear from you.

This new feature is also supported on hardware and software profiles as well. There's plenty more to come and we hope this feature serves real purpose for both our readers looking for a bargain on a game, and our developers receiving financial support for their efforts. If you have any questions please feel free to comment below.

UPDATE: Winners contacted!

Thanks to everyone who tweeted their love of mods. It was great to see, and we look forward to running the event again in 2017. We have just begun sending an email which looks like this to people who followed the rules below and participated in this years event. 70% of people who participated got a key so check your mailbox and with a bit of luck you are a winner. Oh and the games were picked at random, sorry we cannot swap or switch them.


We ******* love mods! Who doesn't, they make PC the master race and all games better. Last year we kicked off this event after the paid modding saga left many worried about where the industry is heading. And while the dust has settled and things have returned to normal, modders dedicate a lot of time to their craft while asking for little in return.

Introducing #modlove2016

With more games supporting modding today than ever before we need to encourage game developers to continue working on keeping their platforms open and mod friendly. We also need to let mod developers know their effort is enjoyed and appreciated by many. It's the least we can do, which is why for this week only you may have noticed every mod on the site has a "love bar" shown on their profile, which looks a little like this:


Get involved

Just click any of the handy links provided, then post a message with a link to the mods profile to help raise awareness and appreciation for your favorite mods. Or follow these steps:

  1. It doesn't matter where your favorite mod is hosted be it on Run Shoot Think Live, GameBanana, Curse, Workshop, Nexus or Mod DB.
  2. Copy its URL then write a post explaining why you like that mod (you could write this post on your blog, in a forum, a tweet or facebook) the more we share the better.
  3. Tell us about your post by linking to it in the comments here.
  4. At the end of the week we shall be picking a few lucky members who left a comment following these rules at random, and giving them a key to one of the games listed below as thanks for helping us celebrate mods!

Game giveaway

We have partnered up with some friends of ModDB (want in?), who have always been mod-friendly and deserve our love, and will be giving them away to participants. We've got a handful of keys for the games listed below - just follow the steps above to be eligible to win!

Boxshot Boxshot Boxshot Boxshot
Killing Floor 2 Boxshot http://media.moddb.com/images/groups/1/1/24/blackmesa.jpg Boxshot


Don't miss this chance to promote the mods you love and win awesome mod-friendly games! Time is limited...

In an effort to make sharing downloads easier, we have created a handy widget system. You will now see each download page has an "embed widget" button. It works just like a Youtube embed. Copy and paste the widget anywhere you want (here, on your homepage, forums etc). Then the widget contains a button to begin the download directly without any messing around. Here is it in action using Brutal Doom as the example.


Furthermore, the widget system works on virtually any profile URL on the site. Just add /widget to the end of the URL you are visiting to see it in widget form.

v5 Alpha

After talking about it for years, work on v5 of the site has finally begun. Our goal is keeping the same layout with minor improvements, that focus on usability, responsiveness and mobile support. This way we retain familiarity while improving everything else. At the moment we are just experimenting with ideas, but if you would like to see what we have done we plan on opening up our development in the group here. We expect v5 development to take about 4 months or so, and welcome all feedback and bug reports in our Github board.

Support us by subscribing:



Subscribers get instant access to the alpha, so if you love the site and want to support us - we greatly appreciate it!

Established
Privacy
Public
Subscription
Open to all members
Contact
Send Message
Homepage
Moddb.com
Membership
Join group
Group watch
Follow
Share
Achievement bar
Article Statistics
Articles
249
Views
1,596,570
Views Today
5,767
Feed
RSS