Articles - Mod DB

Hey everyone, we hope you've had a great start to the year and enjoyed plenty of fantastic mods and indie games over your holiday breaks.

Today we're sharing with you that we've added a new content feature to ModDB.com and IndieDB.com, the ability to create polls for your followers on your mod/game profiles.

You may have noticed the polls we've run over the years on the front pages of our sites, asking for the community to vote on questions about modding and games. Well, now you can do this yourself with your own followers and communities!

A poll can be created for any game or mod profile, meaning everyone has access to this new feature. You can find it on the sub menu of your mod/game profile, in-between the forum and stats sub header options. Check out the image below to see what the setup for polls looks like:

We've used Medieval II: Total War as an example here, but you'll be able to do everything you can see here yourself, including:

• Setting the start date/time of the poll (which will run for automatically for a month)
• Deciding the question for the poll
• And choosing the different options your followers will be able to vote on

This can be a great way to see what direction your community may want you to take your mod or game in next, or just to discover how many of your followers enjoy Pineapple on pizza (or more importantly enjoy it correctly without pineapple ;) ).

Your polls will live on the polls subpage of your profile and you'll be able to link to any of your polls, since each will have their own unique URL. We hope creators and and fans alike enjoy this new feature and look forward to seeing polls being used across both ModDB and IndieDB.

Nov 25, 2020 Update: you can now customize game and mod profiles on your own using the customize tab. Also, please note that ModDB and IndieDB themes are separate and that two slightly different stylesheets have to be edited to enable visitors of both sites to see theme changes made for indie game profiles.

ModDB is a website that aims to create a lasting database of mods, games and indie games. Sometimes, 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 our staff at our support email: support@moddb.com. Modifications are generally approved and applied within 2 business days. You can edit the CSS of your profiles using the customize tab on your own now.
• 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 methodical 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 programming.

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 it to team via our support email: support@moddb.com. 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.

Nov 25, 2020 Update: you can now customize game and mod profiles on your own using the customize tab.

Feel free to email us at our support email about 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!

Mod Appreciation Week for 2020 has come around! Now in its 6th consecutive year running, it's time once again to share your favourite mods with your peers and show their creators how much you loved playing them! Given how much volunteer time goes into every mod's creation, we know these hard-working modders would love nothing more than to hear how much you appreciated their work.

All you need to do is make the effort to shout out your favorite mods, whether they're hosted on ModDB or otherwise. Tweet them, blog about them or share them on Facebook, with the hashtag: #modlove2020 and a link to the mods profile!

All mod profiles will now show the Mod Appreciation Week banner. Just click any of the links provided, and tweet, post, or share the link to the mod's profile to show your appreciation for it. You can also follow these steps:

1. It doesn't matter where your favorite mod is hosted be it on Run Shoot Think Live, GameBanana, Curse, Steam Workshop, Nexus or ModDB.
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 post); the more we share, the better!
3. Tell us about your post by linking to it in the comments here. We want to share in your appreciation.
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 give them a key to one of the games listed below as thanks for helping us celebrate mods!

We have partnered up with some friends of ModDB (want in?) - developers whose games have always been mod-friendly and deserve our love for supporting the mod scene, 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!

Game developers, do you share our passion for mods and want to giveback? Get in touch and we will add your game to our #modlove collection. We promise to promote your game whenever we run an event like this, by giving away a handful of keys each time to the participants.

Win games

After you have linked to a mod in a tweet, blog, forum or facebook post, let us know by leaving a comment with a link to your post. At the end of the week we shall be picking a few members at random who followed these rules, and will send them a key from one of the above games.

Hey members of ModDB & IndieDB! It's been great to see so many more users online in recent weeks, downloading mods, checking out indie games and generally being awesome.

We appreciate all your support over the years and would be grateful if you could support us with our latest readership survey.

ModDB and IndieDB are partnered with the Gamer Network group, which includes Rock Paper Shotgun; Eurogamer.net and more, and share advertising across the network of sites. Each year, we now conduct a readership survey to better understand you and our community, so we can better serve you and to continue to adapt and grow with the trends of the industry.

If you have 10 minutes to fill out the survey to answer a few questions, the DBolical team would greatly appreciate it! We understand several of the questions are quite personal and we understand and encourage you to skip any you don't feel comfortable answering.

Thank you for taking the time to fill out the survey and hope you and your families are healthy and safe during this current global pandemic. You can always reach us at support@dbolical.com with any questions regarding the sites, or join us on Discord to chat with us and the rest of the community!

Today we’re excited to announce that we’re partnering with Modularity Games, the game publisher from the creators of the long running online community sites ModDB/IndieDB, who are going to be publishing Tabletop Playground!

For much of TP’s development it’s been mostly myself not only creating the game, but promoting it too, which takes a lot of time and effort as I’m sure you can imagine. So planning ahead, last year I did research into possible publishers to work with and once I came across Modularity Games, I knew they were the perfect fit for Tabletop Playground.

The team behind Modularity Games has a long history with mods and since modding is such a core part of Tabletop Playground, Modularity Games instantly understood the game’s potential and have the knowledge and expertise to help it succeed.

What does this mean going forward? You probably won’t see a huge amount of change, except you’ll see the Modularity Games team across our various channels such as on social media and in our Discord, sharing important info and announcements in the lead up to the release. But they’ll be largely focused on marketing the game, growing out community and helping with the nitty-gritty elements of publishing a game, so I’ll have more time to focus on the actual development side of things!

On that note, development on Tabletop Playground continues to go smoothly, with dozens of updates and fixes implemented since the start of this year already and more to come on our roadmap, including updates to the editor, UI and scripting API, new features to improve the overall gameplay experience, and plenty more!

Can’t wait to get your hands on Tabletop Playground to start creating games and testing out these upcoming features before the game releases? Then join our growing Discord community and sign up for our exclusive early access Creator’s Program right now. By doing so you’ll have the opportunity to help shape the game and have a chance to to win a full release copy of the game as part of our monthly creator competitions!

It’s been an exciting ride so far and it’s only looking better as each day passes as we get closer to the release of Tabletop Playground. We’re excited to be collaborating with Modularity Games, to see our passionate and talented community continue to grow and with your help, create the ultimate digital tabletop game.

To be the first to know when Tabletop Playground will be releasing in Q2 this year, be sure to follow us on Facebook, Twitter, IndieDB, Steam, Itch.io, join our Discord and sign up to our newsletter. Until next time Meeples, we hope all your games are good!