niobe-codes

18 May 2026

The cappuccicons domain has been scooped. If you are using those icons, visitors to your site are being redirected to a spam domain.

See this post from jcink John:

How to take advantage of the useful jcink documentation for member group counts/legends to make custom displays for board stats.

Follow along in the CodePen javascript pane for a walk through on how to turn your HTML idea into a repeatable unit.

https://jcink.com/wiki/member_legend#html_template_variable_member_groups

Use a custom BBCode to collect the name and image for an NPC, then use javascript to visually use those values for the miniprofile.

If the text wraps or people use the browser to zoom, the line spacing get bad.

Quick note as we move into the new year. I am a professional and hobbyist web developer, entirely self-taught. I have no formal training. Instead I have let my curiosity guide me to reading tutorials written by humans, questions asked and answered by humans, and hours of delicious trial and error and practice.

There is no replacement for that kind of satisfaction, knowing that you made something for someone else with the help of other actual humans. Every hour spent failing is an hour spent growing and learning. This is craft. This is very important to me.

Generative AI is a poison on human love and creativity and is a blight on the earth.

Like in the User CP

Gravity has been updated to version 1.1 which includes three small CSS bug fixes.

https://ko-fi.com/s/24e59fabbd

Subforums list will now wrap

UCP mobile menu fixed

Use javascript to create a mobile menu button and wrap the menu items in a submenu. Use javascript to toggle the "open" CSS class on the submenu.

Use CSS to force the ucp tables into a single column, and define how the submenu opens.

This implementation is barebones, but is hopefully helpful to finessing your own.

All of my skins are fully responsive. Here are some fast "you can too".

DESIGN

Plan for responsive.

Users are perfectly fine with the mobile version of the site being more simple than the desktop site.

So it's okay to hide all the extra profile fields on the post row, remove all the extra padding and containers around boxes, etc.

Hide that full-height banner on everywhere except #idx

Imagine how things will look in a single column.

FLEXBOX and GRID

Code all your containers with flexbox or grid in mind.

Flexbox with flex-wrap: wrap can very well get you down to a tablet width without extra coding a lot of the time.

UNITS

Avoid hard-coding heights/widths in absolute values. Use percentages or relative units.

You can use them, but you'll have to adjust each instance on narrow screens.

MEDIA QUERIES

You don't need to define and explicitly code for multiple screen widths. I usually do full width, max-width: 900px, and max-width: 500px. Depending on the section, I'll do some things at 1000px or 700px, etc.

I organize my "mobile" CSS section by section, not a big mobile section at the bottom.

TABLES

If you can't avoid table HTML, you can start fresh.

table, thead, tbody, tr, th, td { display: block; width: unset; }

UPDATE: Super easy way to use grid and subgrid for the same purpose. I honestly like it better.

https://niobe-codes.tumblr.com/post/800657698126430208/more-tips-for-responsive-jcink-using-grid-and

POST FORM

Use the table thing above and put it all in a single column on tablet and below. Finesse as you like.

See grid/subgrid technique above.

RESPONSIVE USERCP

The hardest part. Unless you want to use javascript to hack this all apart (more power to you), I think the best value is:

Code the left hand menu to be a simple full-width dropdown.

Set a max-width on the main content part and set it to scroll horizontally. That way the page won't stretch, but the user can still do a little swiping back and forth to get the job done.

See grid/subgrid technique above.

SEARCH

Steal my code for making the search form responsive.

Gravity free jcink skin

Gravity is a sleek sci-fi jcink skin. It prioritizes readability and customization.

Live preview: https://illustrious.jcink.net/

Download: https://ko-fi.com/s/24e59fabbd

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 BBCode

CSS variables for quick customization

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