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 258)

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) [EDIT: NB, a private message to feillyne, as Erayser is MIA]. 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!


On the 25th May 2018, EU's General Data Protection Regulations (GDPR) will be coming into effect. Although these changes are spurred by European law, we are strong believers that every users privacy is important, and have done a complete review of our system to ensure the continued privacy and security of all our users personal data.

Here is a quick summary of the changes we've made to our Privacy Policy and Terms of Use which will come into effect on the 25th May 2018:

  • We have always allowed our users to request a complete deletion of their account, by following the instructions provided in our Privacy Policy. We shall soon open up this tool to automate the process for our users that want their account deleted.
  • We shall also add a tool which allows our users to request a copy of data we have stored on you to review, and for data portability purposes.
  • We aim to collect the minimum amount of personal data required, to operate the site. We don't sell this data or track you outside of the site. This won't be changing, instead, we're being more specific on how we use the information we collect, how long we keep that data, and the rights you have regarding it.
  • Finally, we're providing more clarity around the legal bases we use to process your information, including providing the service to you, complying with the law, improving our services, and providing a safe and welcoming environment for everyone.
  • We shall be migrating all domains to SSL/HTTPS next week.

We encourage you to review our updated Privacy Policy and Terms of Use. It takes effect May 25th, 2018. By using DBolical network sites on or after that date, you'll be agreeing to the changes. If you have questions about these changes, feel free to reach out to us at legal@dbolical.com.

Introducing mod.io

News 16 comments

For the longest time, we have championed mod support. What began as a hobby 20 years ago (see Old Timers), quickly became an obsession, and in 2002 we launched ModDB.com.

Over two decades we have watched modders transform games in creative and unique ways. The longest lasting franchises with amazing legacies like Half-Life, Warcraft, Skyrim, ARMA and Minecraft have spawned many of today's genre defining hits including Counter-Strike, League of Legends and PUBG.

Our newest product

Today we are proud to announce the launch of mod.io, the first open cross-platform mod API that puts developers in-control of their modding community. mod.io is designed to operate behind-the-scenes and be a drop-in solution that does the heavy lifting required to support user generated content in-game.

mod.io API


Our aim with ModDB.com has always been to support creators, and help games grow their modding community. We believe the more open and accessible modding is, the stronger and wider the adoption will become. So for us mod.io is a natural evolution of this belief. It is quite a different product from ModDB.com, which proudly supports mods for every game. mod.io will only support games that integrate the API and automate the process of installing mods.

Our launch games

We are incredibly excited to be launching mod.io with the titles 0 A.D, ECO, and Sinespace. Partnerships with these titles were sought to demonstrate mod.io's flexibility to tackle unique challenges. In the case of 0 A.D, it is working with the open source community that require a platform agnostic solution. In ECO, mods are purely server-side and Sinespace is a virtual world that treats mods as templates that are there to be built and modded themselves.

mod.io launch games mod.io launch games mod.io launch games


Games wanted to support mod.io

Game developers, we invite you to explore mod.io, read the docs and test integration in your games. We are investing heavily in games that want to support mod.io, as well as providing marketing support across our network. Reach out if you'd like to hear the details and work together to grow your playerbase. A whitelabel solution for large studios that require an in-house product is available to discuss on request.

SDK


We are incredibly excited to be launching mod.io, and help games of all shapes, sizes and requirements tap into the power of mods to deliver deeply personalised, amazing new gameplay experiences. This is step one of many for ModDB.com and mod.io and we cannot wait to grow this community with your support.

unnamed


ALL DONE! Thanks to the thousands of people who participated. We have issued a few games from our #modlove collection at random to people who entered and left a comment. Congratulations if that was you!


With every year that passes, PC game mods manage to dazzle and impress on entirely new levels. Whether it’s the success stories of popular mods spawning full-fledged standalone games; tweaks and hacks that make console ports run better on PC than even the games’ own developers allow; or even small customisations that help make your games more personal – mods are still alive and kicking.


That’s why ModDB is proud to bring back Mod Appreciation Week, in which we encourage you to let the modders whose work you enjoy, know how much you appreciate their time and effort. We want modders to hear from those whose games they have made better with their craft, and we want all of you to encourage those modders to keep at it.

We want you to spread the love by sharing your appreciation for your favourite mods with this bar, by tweeting or posting to Facebook and Reddit, all with the hashtag above.

How to 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 favourite mod is hosted be it on Run Shoot Think Live, GameBanana, Curse, Steam 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 on 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! 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.

As a part of the Gamer Network (which also includes RPS, Eurogamer, GamesIndustry, VG247 and others), we at Mod DB and Indie DB would like to ask our readers to take a moment to participate in our 2017 readership survey. You can find the link to do so, here:


The survey will take just a few minutes of your time, and will help us better understand our audience so that we can deliver relevant content to you. We suspect most of you only care about the PC Master Race and the amazing indies and mods it produces, but it's good to know that, so when we promote games like Day of Infamy everyone agrees they are #$@* amazing! Thanks for taking the time to support us.

Mod DB Indie DB gamer network logo



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
258
Views
1,793,056
Views Today
115
Feed
RSS
Got it!

We have recently updated our privacy policy and terms of use in-line with GDPR requirements. More Info?