widowskins

My masterlist of jcink coders' shops with skins for free or for sale.

Zach https://ko-fi.com/zachariassmithexperience/shop

Yun https://ko-fi.com/folieahdude/shop

Yorozuya https://ko-fi.com/yorozuyacodes/shop

Widow https://ko-fi.com/widowspeak/shop

Timelapse https://payhip.com/Timelapse

Tenebrius https://ko-fi.com/tenebriuscodes/shop

Teal https://payhip.com/codesbyteal

Snow https://payhip.com/snowcodes

Skye https://ko-fi.com/skyescodes/shop

Shani https://ko-fi.com/shanicodes/shop

Scratch https://ko-fi.com/akascratch/shop

Rose https://ko-fi.com/alittlerosecodes/shop

Raya https://payhip.com/htmlraya

Raven https://ko-fi.com/ravencodes/shop

Noomi https://payhip.com/NoomiCodes

Niobe https://ko-fi.com/niobecodes/shop

Mono https://payhip.com/MonoCodes

Majorcodes https://ko-fi.com/majorcodes/shop

Madeline https://ko-fi.com/madelinecodes

Mabel https://ko-fi.com/mabelskinss/shop

Lux https://payhip.com/codesbylux

Lumi https://payhip.com/lumicodes

Lolita https://payhip.com/lolitacodes

LeeAnn https://ko-fi.com/leeann/shop

Lana https://ko-fi.com/aech9072/shop

Kon https://ko-fi.com/koncodes/shop

Joss https://ko-fi.com/josscodes/shop

Jaslene https://payhip.com/jaslenecodes

Jackalope https://ko-fi.com/jackalopeskins/shop

Hex https://ko-fi.com/hexxincodes/shop

Forrest https://ko-fi.com/helloforrest/shop

Evangeline https://payhip.com/evacodes

Eliza https://payhip.com/ElizaCunningham

Dante https://ko-fi.com/dauntss/shop

Daisy https://payhip.com/daisycodes

Cindy https://payhip.com/CindysCodes

Bodhi https://ko-fi.com/forebodhi/shop

Bianca https://ko-fi.com/binkywinky/shop

Keyboard Navigable Hover Mini-Profile

Improve accessibility and general usability by allowing hoverable content to be opened with tab. This is a CSS/HTML technique.

Add tabindex="0" on the hoverable element.

Use :focus-within in the same way you'd use :hover

Look, it's not pretty, but this is me tearing apart the jcink search from and reassembling it to abandon the tables, replace them with divs, and more correctly associate labels and fields to improve accessibility.

The included CSS is a suggestion to make the layout responsive.

another fantasy

Okay so here we have the quickest of quick run throughs on how to utilize variables. Here's the basics:

Whatever --variable: ###; says, you can pull it with var(--variable) and it will keep you from having to repeat color codes, as well as make things easier to switch based on light and dark mode, text size changers, member groups, any and everything.

Feel free to check out the example I was playing with here but this comes with the same contingencies as the grid tutorial base I created which is: the template i’m using as an example is free to use as a base, without credit, same with all the others in my tutorials so far, so long as you are using it to actually make your own. With this one, please don’t use it with no significant changes and try to claim it as your own, that would be pretty dishonest. It's also really quickly and shoddily made so again, not something you want to use without changes anyway which is why I made it [Needs Permission] to denote this stipulation. If you do that, throw some credit in your guidebook or something, i don’t mind, just throw a bone on that one because at that point it is solely my template and not the tutorial itself you are using. But even then, you’re free to use it with credit.

Anyway! If I didn't explain anything well (I probably didn't, this is very quick, I recognize I could definitely be more thorough here but this was created as the most basic of basic overviews of variables and so you could see it in action) let me know your questions and I will answer them as best I can.

And, for anyone who cannot listen to the tutorial, here's a quick overview of what I was basically saying:

Basically, variables are shorthand. instead of ###, ###, ### for the accent color, you just put var(--accent1RGB) or instead of #hexcode you'd put var(--accent1) or however you name them, but the --accent1: #hexcode means that anywhere you are trying to pull that hexcode you'd put var(--accent1).

So for any color you're using, versus repeating it, you can just do something like --bg1: #dedede; and then you don't have to type #dedede ever again, it automatically pulls it in with var(--bg1).

Once you understand it, it's super simple, but again if you need anything further explained or you're more of a hands on learner and wanna walk through it with me, feel free to just reach out, I really don't mind.

for background images, make a default by putting it literally right behind the one you want. you can see an example of this in the css section of the naked codepen i’m linking below. (btw this was kept naked so it would be easier to just get to coding, instead of sorting through me making it ‘pretty’ so to speak. i only put the length of this text there so there was something that populated.)

for img src, i use a pretty simple script. now, the caveat here is there are two versions, depending on if you’re in an area where jcink auto puts “no information” or not. these are below. these scripts are in the js section of the codepen. there are two, so make sure you scroll down for the not no information version.

anyway! this is just a really easy way to do things. there are others, but it’s a simple way to get your default image to show up where you want them replaced with a custom profile field.

as always, this is a tutorial, so be wild and free, do what you like with them. you don’t have to credit me. i’m just trying to help us all learn a few neat tricks that make the editing and creation process of jcink skins a little easier, and replenish some of the resources we’ve lost lately.

i hope it helps! if you use it, i’d love a like just because i love seeing that people actually utilize these, but it’s not a requirement by any means. have a great day, rpc!

Replace No Information default text

When a user doesn't fill out information in their main profile, it often defaults to No Information as the output. This code replaces that text with whatever output you want.

Vertical styled posting form code

Idk why more people don't have one of these, it's really simple to make, but basically a little bit of code that adds each character's age to their profile and then automatically updates it / ages them + 1 year on their birth month.

Different designs call for different icon fonts. Some sets have thick, round lines, others have sharp, elegant lines. Some have unusual icons, some are lightweight and just have the basics. Instead of asking for everyone’s favorite icon fonts in my discord groups 500 different times, here’s my masterlist of icon fonts and icon font collections for easy reference.

While there are many icon fonts out there, the ones in this collection are easy to use and install. If your favorite icon font isn’t on the list, reblog with your picks!