niobe-codes

[niobe-codes]

I made a tumblr theme. That was fun. I see why people enjoy this.

[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.

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.

[niobe-codes]

Numbers - informal analysis of where people are getting their jcink skins

Over the last year I have looked at about 450 jcink rp forums and tried to determine [1]

What skin is being used

Who made it

How much it cost

Of those ~450 sites, about 70 of them were custom, commissioned, uncredited, and/or I couldn't figure out any information. I didn't include those in my count.

I ended up with:

355 sites with a (credited) paid or free pre-made jcink skin.

Represented are 102 skins by 39 coders. [2]

270 used a paid skin

85 used a free skin

For fun, here's the donut with the sites I didn't count thrown back in.

The free skins

I counted 30 free skins made by 16 coders, used across 85 sites.

The most-used free skin was Daylight by Hex with 18 uses accounting for 21.2%. All the other free skins were used between 1 and 6 times. [3]

(It's a pie chart. It's too small for all the labels to fit! Don't yell!)

The paid skins

I counted 55 paid skins made by 30 coders, used across 270 sites.

The most-used paid skin was Pretty Places by Teal with 19 uses, amounting to 7.8%. The next closest was Pastel Goth by Raven at 15 uses. The distribution was much more even than the free skins.

(It's a pie chart. It's too small for all the labels to fit! Don't yell!)

If a skin was paid for, the average amount paid was 61.22 currency [4]

270 sites had a paid skin

The median cost for a skin was 50 currencies.

Of the sites with a paid skin, 219 cost more than 50.

Of the sites with a paid skin, 136 cost less than 50.

The fourth most popular paid skin cost 100 currencies, more popular than all but one free skin, wowza.

(The cost distribution for paid skins. Most of them are 60 currency.)

Popular skin supremacy

Of the 102 skins, only 10 accounted for 35% of all sites.

74 of the sites were offline

I only added online sites to my list. But when I was going over the sites today, I found that 74 of the ~450 had gone offline in the last year. That seems like a lot, idk.

What am I going to do with this information?

Nothing! I was just curious.

Don't yell at me

[1] This data is really casual and fuzzy and gathered with just my human judgement. Don't yell at me. I started this in April 2024.

[2] I'm not 100% sure that I didn't mess up some of the coders' aliases, so this count is likely a little off. For my list, customized skins counted for the original coder.

[3] I did not attempt a distinction between currencies. I don't actually know how much anyone paid, and I didn't account for price changes. I didn't account for the same site owner using the skin on multiple sites, or skin sharing, etc.

[4] I'm aware that Daylight went from a paid skin to a free skin sometime in the last year. See [1] for how this data is casual.

[niobe-codes]

Very easy BBCode spoiler for jcink

The native <details> HTML element is mobile friendly, accessible, keyboard navigable, javascript-free, and very easy to style with a little CSS.

Create a new custom BBCode and choose "2 Param Type". Use this code for the HTML conversion:

<details><summary>(PARAM1)</summary>(PARAM2)</details>

Example styling:

details { padding: 1rem; background: var(--black-dark); } summary { font-size: 1.15rem; font-family: var(--font-accent); text-transform: uppercase; font-weight: 500; cursor: pointer; } details[open] summary { margin-bottom: 1rem; padding-bottom: 1rem; border-bottom: 1px solid var(--accent-1); }

[niobe-codes]

Where are jcink coders having conversations? I want to know why we're not all using GitHub. Also, it'd be nice to settle on where the go-to forum is for posting/linking to skins and codes.

[niobe-codes]

there are macros to change the headers for announcements, important, and regular topics

You can change the HTML for these headings in the topic list by adding hidden macros.

https://jcink.com/main/wiki/jfb-skinning-macros#topic_effect_macros

Admin CP -> Skins & Templates -> Macros -> Add Macro

T_ANNO_SUBHEAD T_PIN_SUBHEAD T_REG_SUBHEAD

Example:

<h3 class="topic-list-heading">Important</h3>

[niobe-codes]

hide the last poster's avatar on the forum row if it's empty

The last_poster_avatar variable always comes with the .last-poster-avatar CSS class

Use an attribute selector to target avatars without a full src

Display none

[niobe-codes]

how to keep user images from stretching the page in jcink

the postcolor class is reliably on the element wrapping the post content.

max-width: 100% says the image can only be as wide as the container. % in max width is relative to the container, not the element.

height: auto allows the height to adjust proportionally

[niobe-codes]

Sabotage free jcink skin

Sabotage is a retro, minimal, spy-chic full jcink skin meant to be simple and easy to read.

Live preview: illustrious.jcink.net/index.php

Download: https://ko-fi.com/s/3ed8eb1d05

Features

Fully responsive

Improved accessibility, optimized for screenreaders and keyboard navigability

Custom Profile

Custom member list

Six member group colors

Font Awesome 6

Basic custom BBCodes

Bonus BBCodes

CSS variables for quick customization

License: CC BY-NC-SA 4.0 This skin is free for non-commercial use, you may edit/adapt/share, as long as you leave credit intact and allow others to edit/share on the same terms.

[niobe-codes]

JUICE - Work In Progress

This will be a free jcink skin with big bright colors and casual typography. I'm planning to build in some variables to switch between 1 - 3 forum row columns, as well as being able to easily control the corner radius which can change the whole tone of the design so quickly. Hoping to also make it easy to change the whole color scheme without picking through the entire style sheet.

[niobe-codes]

BBCode Messaging template for Jcink

How to set up custom BBCode and a little CSS so writers can avoid having to use DOHTML to make messages. Admins can quickly customize design elements with some simple CSS variables.

Demo and installation

[niobe-codes]

Footnotes for Jcink

This free-to-use code uses Custom BBCode, javascript, and a little CSS to allow automatically numbered footnotes in posts.

Demo and installation

(I'm pretty sure it works, but consider it experimental.)

[niobe-codes]

Free Jcink Skins

Black Hole by me, Niobe

Source and Live Preview

Dying in LA by Ashley

Source | Live preview

Glitch Mode by A Little Rose Codes

Source | Live preview

Land of a Billion Lights by Thisbe

Source | Live Preview

Gardenia by Joss

Source | Live Preview

Drops of Poison by Lana

Source

Smith Basic by Zach

Source and Live Preview

Neon Nights by Ross

Source | Live Preview

Daylight by Hex

Source

Such Great Heights by Tilly

Source | Live Preview

Thank You, Next by Ashley

Source | Live Preview

Joss' Basic by Joss

Source | Live Preview

Lariat by Joss

Source | Live Preview

I Need Mercy by Dante

Source

Immortales by Lana

Source

Shiver v2 by Widow

Source | Live Preview

D3mons by SarahKek

Source and Live Preview

This Must Be The Place by Tilly

Source | Live Preview

Summer Fire by Lana

Source

Widowbase v4 by Widow

Source and Live Preview

Source Decay by Abi

Source | Live Preview

Magicka by Lana

Source

[niobe-codes]

Beautiful design

this must be the place is a free jcink skin! 

features:

light/dark mode and font size toggles using @yunothenine​‘s dark mode toggle script responsive layout tabbed profile application 5 member groups mini profile super-basic posting templates & font styles

preview | setup files & instructions | credits | policies

please reblog if you’re planning on using! :) 

[niobe-codes]

In the 2000s you sat a kid in front of a Neopets pet page and they’d learn the fundamentals of html within the hour

[niobe-codes]

Adore this design.

SOURCE DECAY is a FREE responsive, minimalist skin designed for use on Jcink forums. It was coded on Google Chrome, but cross-tested across different browsers.

Includes:

All custom HTML templates

Top-bar nav, for easy access to user links and site navigation.

Six member group colors (admin + 5 groups) & Easy-to-add member group variables.

Variable coding for easy editing of fonts, colors, and images.

Light-dark toggle

Profile application

Filterable member list

Guidebook code

Basic installation notes

preview | setup files & instructions | credits | policies

please reblog if you plan on using!

[niobe-codes]

Amazing base that I am going to have to try.

joss is basic

I’ve only been talking about it since forever. Now it’s here: Joss’ Basic (or Joss Is Basic, if you prefer). This is a base skin for jcink forums meant to cut down on a lot of the time people spend implementing the same features, and if I’m lucky I might just teach someone something. The goal here is to provide something flexible, legible, and full of potential. Please let me know if it gives you any trouble!

Features Include:

All the jcink fixin’s (recent topics appended to board stats, removed pesky comma from topic description, styled tooltips, click to highlight code, etc.)

Light/Darkmode toggles, jump to top/bottom of page, and pop-out menus

Six member group colors pre-plugged

A “practical-not-perfect” mobile mode

Myspace Tom on our member directory <3

Live Preview: https://jossisbasic.jcink.net/index.php? / Thumbnails below the cut

Keep reading