Description

Sometimes you open a few pages up and see the same old background, layout, visuals, font, etc. I mean, the default is great and all, but giving your game its own identity can really help it stand out from the crowd.

So this week we're encouraging people to update their look and try some CSS to give their game pages a bit more wham-bam shizaz!


I've collected a few CSS samples from some of our members for you complete newbies to start with!



  • Take a screenshot of your current game page!
  • Edit your game page using CSS!
  • The edits must take place between event timeline.
  • When finished, upload the 'before' screenshot you took as a media file on your gamepage and submit that to this event using the Submit button in the top-right of this event page.




  • Everyone who takes part will get a 20MS badge and a freakin cool pag!





These are provided by your fellow members to use and mess around with. Give them some love!

Orochii
Solitude CSS :: Gamepage
Drekirokr CSS :: Gamepage
Ethereal Longest Night CSS :: Gamepage
Hyper Digger CSS :: No example

Marrend
Baclyae Revolution CSS :: Gamepage

Mirak
Oh Bill CSS :: No Example

coelocanth
Font Changing CSS :: No Example

(To open these files, use Notepad, Notepad++ or other script-based programs)


Louis Cyphre
CSS Tutorial




What can I change?
There are a few things you cannot change!
The basic elements must still be shown, such as the links to other pages on the game page (Media, Reviews, Downloads, etc).
The stars and download still need to be shown, too, and must NOT be edited in a way to lie about the game details (for example, showing five stars when your game is rated 1.5)
The details section should still be shown as well as the information there (links to dev profiles, numerical details, etc)
The top banner (rmn header, social media links, games/dev/events/community/store and such) must still be shown too.

You may edit the visuals for ratings, how the download button looks and placement of various elements of the page, but they should still remain visible.

As for restrictions, please don't make ankylo cry from what you put on there. Videos on the background should be hella lightweight if used at all. Don't go too overboard. orz

Details

  • 07/24/2021 12:00 AM
  • 08/02/2021 01:00 AM

Achievements
20

Registration

You must be logged in to sign up for Gamepage Glories.

Toggle Entries
Participants Entries
GreatRedSpirit
Liberty
Fomar0153
orochii
calunio
Irog
pianotm
Ulevo
Fflo
shuruzy
Soulrain
JustAShyDoge
CrazyBabi
AlaskanEmily

Posts

Pages: 1
Irog
4858
EFFERVESCEWARE
1000
07/26/2021 05:29 AM
I'd love to try this, but since I revised my project, it's going to be a while before I have anything playable to share . . . I'm currently not enjoying my stay in conditional branch switch variable hell! I'm sure you've all been there at least once.
Fflo
Be careful ! I'm French
3650
07/26/2021 09:08 AM
Finished my new CSS for Muscovite Arabesque since Saturday.

Satisfied with it, but adding a 6 megapixel picture for the scrolling background was a bit too much. Not everybody has a great connection speed.
Gonna update it with a lighter image.

EDIT: new image added. It now displays way faster.
shuruzy
1412
07/27/2021 02:43 AM
Dooone, woo! This was a surprising style of event! Was nice to finally get around to making my game's page look a little more, well, nice! Huge thanks to everyone who offered their game's codes for reference, and the CSS tutorial! ;o;
AlaskanEmily
561
07/30/2021 01:29 AM
Ding! Mine's done!

I was going to make Anky cry by using an animated gradient as the background, but I found that used a ton of CPU in both Firefox and Chrome. I considered playing dumb with it, but I had this crisis of conscience...how could I do that to the poor Ankylo and Anklyo's wife and children?
orochii
6740
07/30/2021 02:04 AM
I think mine is ready, but I might still retouch stuffs here and there.

So yeah. :D
GreatRedSpirit
ski-ba-bop-ba-dop-bop
6514
07/31/2021 03:26 AM
I discovered I can add stacking background images in the same CSS element, this will let me add cloud shadows to my Altima game profile! Clouds with shadows looks so much better than without!

I also redid the animation I axed a while back in a different way with CSS. Hopefully it doesn't lag out people's browsers, but if anybody has issues please let me know and I'll toss it. It doesn't have much of a CPU hit on my machine (watching task manager and the browser goes up like 3% or so), but old machines/browsers/drivers/gpus might not work so well on. I don't want my fancy clouds to lag people browsing the web :<
Liberty
RTP Princess
24266
08/01/2021 03:17 AM
Reminder that today is the last day!
Irog
4858
08/03/2021 02:31 PM
Your background stacking technique looks fantastic ! I'll apply it to create the snowing effect I tried so hard to display but failed. I'll wait until the attribution of the badges and MS are done. So my game page will be judged with what I was able to make during the event.
Liberty
RTP Princess
24266
08/04/2021 12:25 AM
Badges are out! Great job, you guys, for making your pages just that much more awesome and thanks again to those who were willing to share their css for others to poke at!
pianotm
The TM is for Totally Magical.
32388
08/04/2021 12:32 AM
Madness? THIS IS GAMPAG!!!
GreatRedSpirit
ski-ba-bop-ba-dop-bop
6514
08/04/2021 02:06 AM
author=Irog
Your background stacking technique looks fantastic ! I'll apply it to create the snowing effect I tried so hard to display but failed. I'll wait until the attribution of the badges and MS are done. So my game page will be judged with what I was able to make during the event.

Stack all the backgrounds!

I'm glad CSS has evolved to where you can do this without javascript. I had to upload the cloud and shadow with the alpha channel set in the image instead of CSS, which isn't perfect but acceptable.

The animation bit is pretty simple now, if anybody wants it:
/* Background */
body {
  background-color: #000;
}

#body {
  background-image:
    url('[url]https://rpgmaker.net/media/content/users/947/locker/AltimaClouds.png[/url]'),
    url('[url]https://rpgmaker.net/media/content/users/947/locker/AltimaCloudShadow.png[/url]'),
	url('[url]https://rpgmaker.net/media/content/users/947/locker/AltimaWorldMap16.png[/url]');
  background-position:
    0 0,
	-16px 32px,
	0 0;
  background-repeat: repeat;
  animation: 50s para infinite linear;
}
@keyframes para {
  100% {
    background-position: 
      1632px 1248px,
      1616px 1280px,
      0 0;
    }
  }
Keep track of the background order, first is on top and works its way down. Reorganizing can be a pain if you change the order.

For the infinite loop I set the background-position to be the # of pixels of the image shifted the way I wanted. My old animation used webkit and background positions, which didn't work that well and the clouds would change direction when the window size was the right values. Maybe it'll work better with current CSS though!

Good luck getting cool snowfall effects with stacking backgrounds. Animated backgrounds are rad as hell.


e: and easy link to current CSS
https://rpgmaker.net/media/content/games/2172/template.css
Irog
4858
08/04/2021 06:23 PM
Thank you Libby for the nice badge !

GreatRedSpirit, your example works really well ! I stacked an animated gif snow effect (16 frames) over the static deer trail... and it looks perfect ! Thanks a lot !!!
orochii
6740
08/05/2021 04:50 AM
Here is my thing. In case someone wants to look at it.
https://rpgmaker.net/media/content/games/6009/template.css

Honestly I should have left the SVG out. But what is life if you don't try new stuff? Here is the SVG too, to see the code you'll need to open the browser's inspector/console/etc with F12.
https://rpgmaker.net/media/content/users/6423/locker/armoredBackground.svg

It was fun!
Pages: 1