00:00
00:00
View Profile keepwalking
I create beautiful tragedies

34, Male

Illustrator

Argentina

Joined on 2/4/08

Level:
16
Exp Points:
2,660 / 2,840
Exp Rank:
18,134
Vote Power:
5.80 votes
Rank:
Police Officer
Global Rank:
18,357
Blams:
128
Saves:
416
B/P Bonus:
10%
Whistle:
Normal
Trophies:
16
Medals:
737

Newgrounds Responsive Skin

Posted by keepwalking - August 31st, 2020


Ive been playing around with Newgrounds css styling for a couple of days so far, and what started as a time killer ended up as an ongoing project. Although it's far from perfect, this code will aim to improve Newgrounds experience by adding responsive properties to its structure, this basicaly means that the site will try to adapt to your screen size as much as possible instead of being fixed on a single spot in the middle. I also decided to "clean" some elements by giving them some css beautification such as gradients, borders and box shadows.


How to install:

Click the stylus icon next to the adress bar (if you dont see it click the puzzle-piece-like icon in chrome and pin the app so it appears next to your other apps) then hit "administrate"(a new window will appear), then click "import" (at the bottom left) and select the .json file from the .rar you downloaded.


Everything you need to know is on the readme.txt file, but for the sake of it I am adding it here as well:


1-This code is not meant to be comercialized by any chance. 


2-You are free to add your own customized code to the file in question.


3-This file will act over the default code of newgrounds.com, and will only work as long as the content maintains its structural clases and id's for their corresponding grid element.


4-This code needs a 3rd party browser extention to work.

you can choose from a great variety of them, but I suggest you use Stylus, since its the one I used to craft the code.


5-You make the skin work by clicking on the Stylus(for example) app icon and hitting the "administrate" button, then Import the file and you should be good to go.


6-This should never give you performance issues while browsing the site.


7-This does not inject javascript code whatsoever.


8-This is an alpha version sort of thing, so expect minor bugs here and there, but nothing important. I made sure to avoid having major visual bugs by doing some basic Quality Assurance.


9-If you find bugs or would like to recommend fixes/ideas, PM me.


10- The sole purpose of this skin is to improve Newgrounds experience and navigation.


Stylus


Skin File


Here are some screenshots of the skin working at 1920 x 1080:

iu_162400_2303835.jpg

iu_162399_2303835.jpg

iu_162398_2303835.jpg


All feedback is appreciated!


@Keepwalking


Tags:

17

Comments

Show this to @TomFulp!

This sounds amazing

Wow now that’s a great post that relates to the design, too bad you can’t favourite the news post.

I put it in stylus, looks neat. When using it on a 1440p screen, profile pages (like this one) have black bars on the right and left sides that cut off the edges of the content. Also anim thumbnails are larger and therefore blurry and gross. I'd have to make a bunch of tweaks to make it personally usable.

Thumbnails will look blury because their resolution is quite low. Profile and audio portal updates are comming on the next version.
Glad yoou could find a way to tweak as you want.