widowskins

skins by widowspeak; commissions closed

[niobe-codes]

Jcink coders' shops

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

Ashley https://payhip.com/AshleyCodes

[niobe-codes]

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

Keyboard Navigable Hover Mini-Profile

...

[niobe-codes]

Rebuild the jcink search from to be responsive, accessible, and easier to style

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.

Destroy Jcink Search From

...

This code is free to use, copy, and rip. If you are using it in a paid skin, please provide attribution to me so others can learn/benefit.

[widowskins]

Would you ever consider opening commissions for custom skins for MyBB and Jcink?

I can very easily answer half of that question: I've never used MyBB, so I wouldn't open commissions for that host as I don't know where to even begin. As for custom Jcink commissions, it's a little harder to answer. Maybe? It depends on how well developed the person's idea is. I am happy to provide working HTML and CSS for a detailed mockup of what the person wants. It gets harder when the request is more vague and open ended. If you've seen a chunk of my work, you will notice it's kind of aesthetically similar. The truth is, I am not a very visual person and design is my weakest point. So I hesitate to open commissions to the public, since I can't guarantee I'll come up with a ~vision~ that will make the client happy. A very long winded way of saying, if you know exactly what you want, slide into my DMs with some mockups and we'll chat.

[widowskins]

Timber - widowspeak's Ko-fi Shop

Another free skin, this one hopefully more mobile friendly than my other free skins. Timber has a somber, reserved, minimalistic vibe. It fe

I did a thing. It's not perfect. I didn't even make all the profile fields for the profile app, so if you use this skin, you'll have to replace the placeholder text with profile fields. But hey, it's my first finished skin in years. You can get it on Ko-Fi or on my testing page, widowspeakskins on Jcink.

[widowskins]

I haven't wanted to write CSS in a long time, but an old acquaintance of mine asked me to make a skin for them and now, in between, I'm working on my own project. I don't know that I'll finish it, but it feels good to be working on skins again!

[widowskins]

just ran into your themes. big fan <3 biggest fan of shiver the most. i just love how clean it is, especially the use of the forum pattern. and the useful links in the posts!

Thank you so much! That really makes my day. Appreciate you taking the time to reach out!

[thezachariassmithexperience]

another fantasy

roleplay resource forum

[athenacodes]

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.

Hope this helps! Have a great day, y'all.

[widowskins]

Thank you for all your lovely tutorials, Athena!

[athenacodes]

here’s another for my little tutorial section, this time sans video. basically, there’s some simple coding tips you can use to set a default photo. for the main uploaded avatar, use the default avatar macro for jcink, but anywhere else you can use one of these.

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!

codepen

[thezachariassmithexperience]

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.

[widowskins]

widowbase v3 and v4

Whooboi, there is a lot of discourse going on right now about JCINK coders. Perfect time for me to update some base skins!

For those who just want to streamline their coding process, I have updated my widowbase v3 to include a day/night theme toggle and made a few responsive tweaks to the vertical nav and sidebar. For those looking to learn how to use CSS grid and flexbox to create responsive forum designs, I added a new base, widowbase v4. This version includes some HTML templates that have a very ugly, extremely basic, but functional fluid grid layout. These templates also incorporate hidden divs (read as, display: none) that include the PHP variables frequently used inside those respective HTML templates, so you can easily delete everything I've done and start from scratch with your own. Then just delete the hidden div when you've used everything you need. Easy peasy!

For those of you just beginning your coding journey, I wish you the best of luck! It is such a fun and rewarding hobby. You are also free to rip apart any of the codes on my preview site and cobble them back together. These experiments can be a great learning tool! You are more than welcome to use any of my free resources as a base, as long as the finished product remains free. As for my actual skin bases (or template sets specifically labeled as bases), these can be used for free or paid skins. Make money or give it away, whatever works for you, just leave the credits given to resources intact so others can find out how to accomplish the same thing!

[thezachariassmithexperience]

Vertical styled posting form code

[thezachariassmithexperience]

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.

The only input from you is to update the year when your board's year changes, so you can make it work for IC settings that are using different timelines than IRL as well.

[only-cat-memes]

[widowskins]

yes, this is a coding blog. no, i'm not gonna post every meme i see. but this one was imPORtant and relevant to my interests.

[widowskins]

Luxury's sliding menu upgrade

Luxury received some much-needed love. I was never happy with the sliding menu, but honestly, I was running out of time to finish the skin because I had IRL issues coming up that required my full energy. The new nav is not perfect, but it's semi-responsive (at a browser width of 899 pixels or less, it converts to a different grid layout) and I think it is more visually appealing.

If you already purchased the skin, please contact me to get the updated XML file. Happy holidays, widowspeak

[sagecodex]

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!

Keep reading