Custom Snap skin (userscript)




I wrote this custom design for the Snap community site. It doesn't work on the forums ̶a̶n̶d̶ ̶I̶ ̶h̶a̶v̶e̶n̶'̶t̶ ̶e̶v̶e̶n̶ ̶s̶t̶a̶r̶t̶e̶d̶ ̶o̶n̶ ̶t̶h̶e̶ ̶p̶r̶o̶j̶e̶c̶t̶ ̶a̶n̶d̶ ̶c̶o̶l̶l̶e̶c̶t̶i̶o̶n̶ ̶p̶a̶g̶e̶s̶ ̶y̶e̶t̶, but I still think it looks pretty nice. It takes a lot of inspiration from the Scratch 2.0/3.0 theme.

Install the userscript that is at this URL: https://the2000isawesome.github.io/snapskinuserscript.js
If you use Tampermonkey, it has an "install from URL" tool on the utilities section of the dashboard. Once you've done that, it should run. It probably won't make you wet your pants, but I think it looks nicer than the current design.

I might also make a skin based off of Scratch 1.4, which would be more fitting considering that the Snap editor already looks similar to the Scratch 1.4 editor.

Note: If I update the skin and you don't see any of the changes, try holding shift while reloading the Snap homepage. On most browsers this will clear the cache, which should fix your problem.

lave it! looks like scratch 2.0

Ikr? It looks so much nicer!

how do I install it?

@ego-lay_atman-bay Sorry if this wasn't communicated well enough, I didn't want to over-explain it. You need a userscript manager (the one I used while developing this was Tampermonkey). After that, just use the "install from URL" thing at the bottom of the utilities section. Hopefully that works.

Also, there's a layering issue on the project page. Sorry if it bothers you; I'll try to find a way to fix it. Currently there's no other way I can find to make the top bar appear below a fullscreen project because all of the fullscreen properties are applied via inline CSS.

thanks. It's great, and the project pages look good, except the fact that the project area stays on top of the top bar. My only issue is that when you hover over your username, the other buttons that appear are black, not blue. I will keep it installed, cause it looks way better than the snap theme.

Yeah, that was the layering issue I was referring to :stuck_out_tongue:

I noticed, but I personally thought it looked fine. I could change it easily, though. I will try it out.

it just looks out of place.

I changed it now. Try holding shift and pressing the refresh button while on a Snap page to clear the cache, and then check the drop down lists again.

ok, it looks better now. thanks.

I've added another change: The default buttons now have custom styling to make them orange with a drop shadow. I might change them again in the near future because I don't know if I'm totally happy with how they look. (Again, shift+refresh if you don't see it... I'm getting tired of saying this very quickly lol)

Project pages have been implemented! I'm getting started on collection pages now. To see the new update, go to a project page and then refresh your cache.


On an unrelated note, this theme needs a name! Anyone have any name ideas?


Huge update!
Collections have been redesigned, and the pesky project page layering issue is gone for good. Also, you can now see if your projects and collections are shared from the "my projects" and "my collections" pages. (I disabled those in the first place because they were redundant on most pages.)
Again, clear your cache to see the new updates.

Update: Minor realignment on the "My Projects/Collections" pages, clear your cache there for results.
Edit: Minor realignment on project pages, do the same there.

I edited the snap logo to make it look better with your skin
snap logo
as you can see here
image
image
the edited image looks better with the blue background.

That actually looks like the first version I made. I think the text on that version blends into the background too much.

I changed the coloring of hovered topbar buttons. Refresh your cache, bla bla bla.

I noticed there is a problem with embedded projects.


as you can see, the title bar covers the green flag and pause button. Can you disable that for embedded projects?

I'm confused as to what you mean. Can you link to a URL where this occurs?

Also, I released out a new update to accommodate for a small CSS tweak on the project page. Clear the cache there to see it.

it occurs on all embedded projects, well, it blocks the green flag and pause button when there's a long title. Here's an example project