I heard a few of my friends really liked Weasyl's April Fools thumbnails, so this morning I took some time over breakfast to edit my personal stylesheet! I did my own version of the mod and posted it (and some variants) on pastebin this morning. I learned pretty soon afterwards that a lot of people have been wanting the egg thumbnails back, which really surprised me!

Anyway, the pastebin is expiring in a few days, so I'm leaving a copy of the custom CSS sheet here on my journal. Keep in mind that it's only a quick edit that was optimized for the front page. The new thumbnails will work everywhere on the site, but I didn't check for bugs on personal galleries, submission notifications etc. (I will probably adjust this later)

Also! I am not a member of Weasyl staff and as such I claim no credit for the original egg stylesheet! I just thought it was a fun joke and like playing with CSS :)

(But if you want to hire me to build a website for you tho I'm totally down with that)

---

Instructions

You will need:

• Chrome Browser (Not actually needed, but CSS3 is still a bit experimental and some browsers might not parse it right)
• a CSS editing app, such as Stylebot which is able to modify a CSS stylesheet on the fly.

It's really simple to do this actually, you just copy the custom sheet you want into your browser app's CSS editing window. Your changes will probably be shown instantly, but be sure to save before exiting the editor. You'll likely need to copy the stylesheet to any secondary PCs you use. Most editor apps should have an export function you can use.

(EDIT: some bugfixes/tweaks made since posting)

Full Egg Stylesheet

Also includes thick, egg-shaped, color coded thumbnail borders to match the aesthetic and more gracefully include submission type thumbnails. This isn't perfect as all music, etc that is not rated General (black border) have a slight icon transparency on colored borders. (Example)

figure.thumbnail img {width: 100px;height: 130px;-webkit-border-radius: 50%/60% 60% 40% 40%;-moz-border-radius: 50%/60% 60% 40% 40%;border-radius: 50%/60% 60% 40% 40%;border: 6px solid black;box-shadow: 11px 10px 0px black;}
figure.thumbnail {padding: 5px;text-align: center;}
div.rating { width: 100px;height: 125px;margin: 0 10px 14px 9px;border: none;-webkit-border-radius: 50%/60% 60% 40% 40%;-moz-border-radius: 50%/60% 60% 40% 40%;border-radius: 50%/60% 60% 40% 40%;}
.rating.moderate {box-shadow: 10px 10px 0px #20abe6;border: 3px solid #005691;}
.rating.mature {box-shadow: 9px 10px 0px #ab2;border: 3px solid #670;}
.rating.explicit {box-shadow: 9px 10px 0px #b91e23;border: 3px solid #750a00;}

Egg Shape Only

Closest to original thumbnails.

figure.thumbnail img {width: 100px;height: 130px;-webkit-border-radius: 50%/60% 60% 40% 40%;-moz-border-radius: 50%/60% 60% 40% 40%;border-radius: 50%/60% 60% 40% 40%;}

Square Thumbnails

Has the thick, colored drop shadow and border (Example)

figure.thumbnail img { border: 5px solid black;box-shadow: 10px 10px 0px black;}
figure.thumbnail {margin: 10px;}
div.rating {width: 110px;height: 110px;margin: 0 -2px 9px 0;border: none;}
.rating.moderate {box-shadow: 5px 5px 0px #20abe6;}
.rating.mature {box-shadow: 5px 5px 0px #ab2;}
.rating.explicit {box-shadow: 5px 5px 0px #b91e23;}
div.content figure.thumbnail {margin: 10px;}
div.content div.rating {height:100px;width:100px;}