CSS'ING YOUR RMN GAME PROFILE

"I ment the outside." -slashxX

RMN Game Profile CSS
A handy, decently thorough rundown of how to make your RMN game profile blisteringly gorgeous.



This guide contains:
1) What CSS Is, and What It Isn't
2) Basic CSS Syntax
3) Anatomy of a Game Profile
4) Common Game Profile Modifications

...and a lot of bold text.




Preamble
This is the part where I talk about stuff.

If you're a regular RMNer, you more than likely know what this pertains to, and you are encouraged to scroll down to the real meat of this guide. If you're a newcomer, read on.

RPGMaker.net (hereafter referred to as RMN) offers a service to freeware game developers the world over in the form of free hosting for their games. Through RMN, a developer creates and maintains a game profile, with which they can present information about their games along with other media, such as screenshots. Among other features, these profiles can be customized with a unique look to help a game's presentation stand out. Take a look at these four game profiles. Notice how they are all radically different from the standard RMN look that you see on this very page? This guide will show you how to do just that.





What CSS Is, and What It Isn't
This is the part that consists of semantic BS.

There's a lot of languages used in computing; that's a given. Where does CSS fall, exactly?

A programming language contains operational commands or structures (such as loops), as well as having variables and more often than not, arrays. CSS is not this. You can't compile CSS into a standalone executable file because CSS doesn't do anything in its own right - it instead defines a set of rules that another program (such as the browser you're viewing this page in) uses to present data.

A markup language, like HTML and XML, organizes and categorizes data. For example, you apply <h1></h1> and <p></p> tags in an HTML document to define certain bits of text as headings and paragraphs. These languages are used extensively on the web - the vast majority of the pages you view on a daily basis are in HTML format. Markup languages have a long and storied history with CSS, and I'll touch on that in just a moment. CSS itself, however, is not a markup language.

You can think of CSS as a supplement to a markup language - after you've defined the data, you use CSS to define the rule-sets used to show the data to a user. The most common mantra in web design and web development is that data and presentation are to be kept separate from one another. This is accomplished by pairing a markup language with CSS.





Basic CSS Syntax
This is the part where things get nerdy.

Let's dive right in, shall we?

selector {

property: value;
property: value;
}


A selector is just that - it selects a specific bit of data, such as a heading or a line, to apply those particular rules to.
A property is a specific rule that you set for that bit of data. For a heading, you might change its font or alignment.
A value is what you're setting a given property to. For the alignment property, you can center or right-align, among other possible values.

Now, let's pick apart some example CSS.

#body { 

background: #300000
url("[url]http://rpgmaker.net/media/content/users/2171/locker/fake-link.png[/url]")
fixed no-repeat !important;
color: #cccccc;
}


(The url tags are a result of RMN's code tag being stupid - they appear on their own. Disregard them for now.)

This sample here sets rules for the body tag of an HTML document. It sets a background property and a color property. #300000 and #cccccc are colors in hexadecimal - a dark red and a light gray, respectively.

The values of the background property are as follows: a solid background color, a background image (fake-link.png), fixing the image to the page (ergo, it scrolls with everything else), setting it to no-repeat (ergo, it only shows one of that image instead of tiling it over the entire page), and setting it to !important.

What does !important do? It prevents that property from being overwritten later in the CSS (assuming there isn't another !important later on). It's necessary due to the cascading nature of CSS.

CSS stands for Cascading Style Sheets. This refers to the way CSS properties "trickle down" to other properties - if you say the entire page has a red background, you don't need to specify that red background in every element of your page because it cascades from the page property. Everything inside the page inherits the red background from the page itself.

Now, what happens when you give a bit of text a gray background? Well, it overwrites the red background for that bit of text. The selection will have a gray background, and everything else will have a red background. Easy.

This whole logic of inheritance and overwriting properties is great for you, the end-user of RMN's game profiles, because it means you don't have to re-write all of RMN's default CSS - everything from font family to spacing to columns. You only have to write the properties you want to overwrite - most often, colors of text or backgrounds.

That covers what we need for our simple purposes. Moving on!





Anatomy of a Game Profile
This is the part with a huge info dump.

Here, we're going to go over a number of selectors that you're most likely to use in making your game profile conform to your wishes. This is going to get a bit fast, so hold on to you pants:


This breaks down the main event; the game description and presentation area itself. You might be screaming "Where's my background breakdown?" right about now. All background colors and images are done in the #body tag, conveniently enough.


This breaks down the game navigation list, which is complex enough for its own image.


This shows elements that are only present in comments. Most CSS rules are inherited from the main_column and game_frame tags.


That's a big info dump, so let's start picking through that.

You know from last section that you need a selector to do anything in CSS. That is what these show - selectors to various parts of a game profile. In order to, say, make the text for Makerscore turn green, just add

div.makerscore {

color: #00FF00 !important;
}


to your game profile CSS, and you now have green Makerscore. Easy.





Common Game Profile Modifications
This is the part you actually wanted when you clicked the article link.

These are various snippets you can paste into your game profile CSS to achieve a specific effect. You are encouraged to submit your own in the comments below, or to alert me of any nonfunctional ones.


RMN Starter Kit by Chaosproductions

/* Modifications to the backrgound */

#body {
background: #888888 url("fake-link.png");
background-repeat: no-repeat;
color: #444444;
}

/* Modifications to background colors */
#main_column {
background: #cccccc;
}
#game_frame {
background: #aaaaaa !important;
}

/* Modifications to messages */
div.message div.contents {
border-left: 0px;
}
#discussion div.message.even {
background: #cccccc !important;
}
#discussion div.message.odd {
background: #aaaaaa !important;
}

/* Modifications to tables (Reviews and Downloads) */
table.listing tr.odd td {
background: #cccccc;
}
table.listing tr.even:hover td, table.listing tr.odd:hover td {
background: #444444
}
.small {
color: #888888;
}


This big chunk of code contains everything you need to make a functional CSS sheet for a game profile. You'll note the absence of a number of things, such as makerscore and game_navigation.li rules - these are omitted for simplicity. Simply paste the block onto your page and edit the colors as you please.

You can see the starter kit in action in an unedited form here.

You can find a list of every color you'll ever need in hexidecimal form here, here, here, or here.

If you have trouble editing this to suit your needs, leave a comment below.

Killing that ugly white line in the comments section by Chaosproductions
Sick of that line between the user block and the content in your comments section? This thing? Add the following code to eradicate it.

div.message div.contents {

border-left: 0px;
}


Alternatively, use the following snippet to change its color to match your needs

div.message div.contents {

border-color: #rrggbb !important;
}


Background effects and images by Chaosproductions
These snippets allow you to perform various background image and color operations on your gameprofile. Here's a basic template:

#body {

background: #888888 url("fake-link.png");
background-repeat: no-repeat;
color: #444444;
}


The background tag can contain a color and a link to an image. If you do not wish to use RMN's default background gradient, use a link to an image or address that does not exist to overwrite it.
The background-repeat controls the placement of the image you define in the background property. Possible values are no-repeat, repeat-x (horizontally), repeat-y (vertically), or omitting it (repeats on both axis, useful for tiles).
The color tag defines the color of all non-link text on the page. It is most often placed in the #body selector since it affects the font color globally.

Author Comment Edit by GameOverGames Productions
#discussion .authors{

background: #rrggbb !important;
}

Recolors posts made by the authors of the game (i.e. you and whoever else is listed as a Lead or Developer).

Quoteblock Edit by Chaos Productions

blockquote {

background-color: #303030 !important;
color: #cccccc !important;
border-color: #000000 !important;
}


Quick snippet for Mog to alter the background, text, and border colors of quote blocks. Delete whatever properties you don't want.

CSS Snippets by You

Request 'em. Submit 'em. That's what comments are for, people.

Posts

LouisCyphre
can't make a bad game if you don't finish any games
4523
author=Choco-ElliotWyvern
Can somebody help me?

Is there a way to make my body where the text,headers etc. is transparent?


Hey! Does anyone know if its possible to choose which is the primary download ?
author=kukenstragames
Hey! Does anyone know if its possible to choose which is the primary download ?

Yes. Go to Manage Games > your game > Downloads and click Set as Main Download for the one you want to set as the main download.

Also - keeping in mind I am sucky at CSS - I am posting my CSS for my Aether Pulse gameprofile, because I edited a lot of the items available to you and this could be a useful reference to people. (our BBC system has a problem with automatically tagging URL strings with URL tags, which kind of fucks up URLs in code tags. Don't put URL tags in your CSS).


#body { 


background: url("[url]http://rpgmaker.net/media/content/users/105/locker/transparent_grid.png[/url]") repeat-x scroll 0 0 #0d0225 !important;

color: #000000;

}


#main_column {
background: #bdbbc0;
}

#game_frame {
background: #bdbbc0 !important;
}

div.message div.contents {
border-left: 0px;
}

#posts div.message.even {
background: #bdbbc0;
}

#posts div.message.odd {
background: #b1acb8;
}

#posts .authors{
background: url("[url]http://rpgmaker.net/media/content/users/105/locker/transparent_grid.png[/url]") repeat-x scroll 0 0 #D1CADA !important;
}

h1 a {
color: #540F78;
}

h1 a:hover {
color: #080112;
text-decoration: none;
}

#game_navigation a {
color: #540F78;
}
#game_navigation a:hover {
color: #080112;
text-decoration: none;
}
h3 a {
color: #540F78;
}
h3 a:hover {
color: #080112;
text-decoration: none;
}
div.frame h2 {

background: #080112;
color: white;
font-size: 13px;
padding: 1px 16px;
margin: 0;
}

#game_strip {
background: #080112;
}
#game_description div {
max-height:none;
}

#game_description h3 {
display:none;
}

#game_frame h4 {
background: #080112;
}


#header {
background: transparent !important;
border-left: 0px solid #080112;
border-right: 0px solid #080112;
}

div.blog_post {
max-height: 600px;
overflow: auto;
}



div.pages {
background: #bdbbc0 !important;
margin-top: 0px;
}


#game_navigation li.current {
background: #080112;
}

a {
color: #540F78;
text-shadow: 0px 1px 2px #c7d3ff;
}

a:hover {
color: #080112;
text-decoration: none;
text-shadow: 0px 1px 2px #c7d3ff;
}

#post_reply {
background: #bdbbc0;
}

#portal_navigation {
background: #080112;
border-left: 2px solid #080112;
border-right: 2px solid #080112;
}

#contents {
border-bottom: 0px solid #080112;
border-left: 0px solid #080112;
border-right: 0px solid #080112;
border-top: 0px none currentColor;
}

#frame {
background: transparent;
border-bottom: 2px solid #080112;
border-left: 2px solid #080112;
border-right: 2px solid #080112;
}

#game_navigation li {
border-left: 2px solid #080112;
}

#game_navigation li.end {
border-right: 2px solid #080112;
}


Also also, I don't have a download for my game yet, but when I do I will add in some more code for editing the download button. For now, you can check out my code for Befuddle Quest 6:

#game_download_area { 

background: url("[url]http://rpgmaker.net/media/content/users/105/locker/downloadbtn.png[/url]") no-repeat transparent;
}

#game_download_area:hover {
background: url("[url]http://rpgmaker.net/media/content/users/105/locker/downloadbtn_h.png[/url]") no-repeat transparent;
}

#game_download_area h2 {
color: #FFFFFF;
}

#game_download_area {
margin-top: 14px;
}

I've been struggling with backgrounds for my game profile for a long time now and I finally got it to work! But now it's the size that's wrong. I tried making the image bigger in paint(5000x5000) and it still didn't cover the whole page + it got laggy and my image editing skills aren't really good. Can someone help me with this? I want the whole background to be filled by that image.
My code:

/* Modifications to the backrgound */

#body {

background: #888888
url("http://rpgmaker.net/media/content/users/22869/locker/Dark_Clouds.jpg");

background-repeat: no-repeat;

color: #444444;

}
try this:

#body {
background: #0a1017 url("http://rpgmaker.net/media/content/users/22869/locker/Dark_Clouds.jpg") repeat-x top !important; }
Thanks! The transitions aren't indentical but good enough. Thank you very much Kentona!
You could scale the image to 1920 pixels wide (or 2440 for the handful of people with monitors with that high of resolution). It'll replace the awkward tiling with making it look a bit stretched though.
Thanks for the tip. I'll just leave it as it is(RMN standard BG). I'll return to it sometime when I have more time and experience. Thanks again!
How do I change these black rowns?

http://rpgmaker.net/games/5626/reviews/

I want them all to have the same background.
Your table.listing tr.odd td selector in your CSS is being overridden by the same selector in the base CSS template. Try adding this and hopefully it'll fix the problem without interfering with any other CSS:


html body div#body div#frame div#contents div#main_column div#game_frame.frame table.listing tbody tr.odd td
{
background: rgba(0, 0, 0, 0.0) !important;
}

The !important will make the selected CSS take priority over other CSS properties that have selectors that may take precedence. You had yours set to a different color though so I tried to use a selector as specific as possible to hopefully set those table cells as transparent without interfering with the rest of the CSS.
Thanks!

It kinda worked. Looks ok now, but the ones that were previously black are not being highlighted.


Please help ^^
I've been trying to figure out on my own how to get rid of the even download's light grey color and failed as expected:




What should I write in order to change the odd and even downloads' color?

Thanks in advance for your help!

Also I think it would be very helpful to add a list of all the terms and proper syntax we can use in a game profile.
Clueless newbies like me would be very grateful for that :P
Melkino
solos collectors on purpose
2021
Maybe try this?

/* Even downloads */

table.listing tr.even td{
background:rgb(0,0,0);
background-color:rgba(0,0,0,0.5)!important;}

/* Odd downloads */
table.listing tr.odd td{
background:rgb(0,0,0);
background-color:rgba(0,0,0,0.5)!important;}

/* hovering over rows */
table.listing tr.even:hover td, table.listing tr.odd:hover td{
background: rgb(38,38,38);
background-color: rgba(0, 0, 0, 0.9) !important;}


I used rgba to set the colors and opacity (and rgb for older browsers that can't show CSS3), but I think you could replace all that with hex codes and it'd still work.
It worked!
Thank you very much :)
So how do you change the size display of the custom logo to be aligned with the background? (not 8 pixel down and 16 pixel to the right)

Edit: Solved it with a hack by displaying a background and cutting the logo, but I am still interested if there is a proper way.
Another problem. These two commands don't work anymore for me for my Halloween Wars profile:

#discussion div.message.even {
background: #cccccc !important;
}

#discussion div.message.odd {
background: #aaaaaa !important;
}

The colors still appear as the default #cccccc and #aaaaaa even if I change them to something else.
There's no tag with the id of discussion anymore so the #discussion selector can't find anything. Try changing them to


div #posts.frame div.message.even

div #posts.frame div.message.odd
iddalai
RPG Maker 2k/2k3 for life, baby!!
1194
There's a great tool called "Cpick", it's free and very useful to find the HTML reference of all colours.

You can find it easly by googling.
I may need some help.

Each time I copy the basic CSS code above for the background, the code keeps breaking, and telling me, "Oops! Something went wrong, there is a good chance we know about it and are working on it!"

Any solution here? Or does this code only work for available games (ones that aren't deleted?)

Also, a few more questions:
2.Is there any way to change the orange words on the top of the RMN screen where username/mailboxes are? I've seen Efflorescence do it, but I'm not sure how to do so myself.
3. Is there any way to add an image background to the author's posts, rather than simple color? Similar to Homework Salesman's image when the author(s) post.

EDIT: Already found the solution to both problems.
Thanks in advance.