mabelskins

[mabelskins]

hi mabel! this may be a broad question and honestly feel free to ignore it! but how did you get into skinning/coding? i really want to make a skin of my own one day and just learn more coding in general (i know very few basics). i suppose it's definitely trial and error! i know there used to be guides on cttw and other sites i believe but i don't think i've found any creative ones! do you perhaps have any resources/suggestions? thank you for your time!! ♡

Hi Anon! That's a good question, we all start somewhere. Personally I started my journey at uni, I took an elective for webdesign which taught me basics. Meanwhile, I was starting to make my own thread templates and slowly built up the confidence to take on the challenge of building my own skin!

When it comes to coding, there's a few communities on discord such as inner child, coding camp, and the roleplay source (I'm sure there's more, I'm probably not aware). There's lot's of resources there for jcink specifically and the community is great about answering questions too! On the other hand, design wise, I can only speak about my process and personal experience. Whenever I start a new project, I go around Dribbble, Pinterest, Behance and other sites for inspiration. For me it's all about analysing a website I like and thinking "what do i like about this? why is this working? why is not?". And there's a lot of answers to that, it could be hierarchy of information, the way an element is displayed or how a texture is being used. This helps me discover new ways of using elements which I hadn't thought of before. From that, I try to build a mockup of the site before coding, it helps me visualize the structures of the boxes and start thinking where elements will go, etc. Nowadays I use figma, but even pen and paper are a great helper.

This is a long answer to the question, i really hope it helps! Feel free to DM if you like, or if there's anything specifically you'd like to know such as how to use elements and principles of design, coding or process related I'm happy to answer <3

[mabelskins]

Accessibility part 1.2 [EN]

I've been working through bringing more resources on this topic and stumbled upon one of the best contrast checkers I've seen! One of my main struggles with contrast checkers has been "how do I fix this?" - finding replacement colours that could fix the issue at hand. https://contrast.report/ not only checks for contrast using a LIVE COLOUR PICKER (this is super exciting) but also suggests colours to fix it *chefs kiss*

Rechecking all my member groups asap

Site: https://contrast.report/

Accessibility part 1.2 [PT]

Tenho trabalhado para trazer mais recursos sobre este tópico e me deparei com um dos melhores verificadores de contraste que já vi! Uma das minhas principais dificuldades com constraste tem sido "como faço para corrigir isso?" - encontrar cores de substituição que possam resolver o problema em questão. O https://contrast.report/ não só verifica o contraste usando um SELETOR DE CORES, mas também sugere cores para corrigir o problema *chef's kiss*

Vou eu verificar as cores dos meus membergroups de novo

Site: https://contrast.report/

[mabelskins]

PERSONAL SKIN PROJECT

Hi all!

I'm slowly recovering after going into a bit of a hiatus - from working my ass off at a new job which I didn't really like, going on holidays and now moving away from the said job and trying to find my feet with my career goals agains (nobody said life is easy ;--;).

With that being said, I would love to share a personal project which I've been working on with my favourite rp partner (ryuk). The project features: - Light/Dark Toggle - Power/Abilitites featured as cards that can hide/show - Quick access character stats in the post rows - 3 types of forum rows - Isotope Member Filtering - Automatic Face Claims - Profile Character Sheet - Admin Profile - 8 Member groups with variable colours

I'm working through some other projects at the moment to release more pre-mades in the near future!

My askbox is always open, feel free to shoot a question and keep an eye out for more news skin/code related news

[mabelskins]

hello, i have found myself in kind of a pickle! i have a tRPG jcink forum in the works, but my previous designer checked off of the project. now, i am a coder, but definitely not a designer. i know you dont have your commissions open, but if you had, would you be willing to take on a project that would only consist of a mockup of a design? i really wish to do the coding myself to dust off my skills, but regarding the designing, there is nothing to build upon i fear :/

Hi anon!

Whilst I don't have currently the time to do the coding for commissions myself, I'd be happy to do the designs! Shoot me a message here or on discord and we can discuss it :)

[mabelskins]

Will you be doing commissions again? If so, when? I would love to know when to be on the look out. I am coming out of a hiatus after 8 years and looking to bring back my site with a bang. And your skins are absolutely amazing. Las Valencia, my dear, is the bees knees!

Hi there! Thank you so much, thats very kind of you. At the moment, I'm swamped with life, but I'm organizing myself to go back to skinning commissions in late April. Will be posting an update soon, but totally understand if that time doesn't suit!

[mabelskins]

This is amazing, thank you @athenacodes!

here is a script for mass toggling fields with special instances, with full directions in the pen attached.

[mabelskins]

coding got me saying shit like “target the child” “assign its class” “override its inheritance” like the third wife of a dying oil baron discovering his of-age son born out of wedlock

[mabelskins]

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 Lana

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

[mabelskins]

CSS Image Stack

[mabelskins]

Resources

Me upon discovering an online game that helps you learn git: haha I've been using git for years now, I could skip ahead many levels, methinks hahaha no, no, I'll be humble and start on level 1

Me on level 5: You can do what??? There are commands for what???

[mabelskins]

SKIN COMMISSION

I had the pleasure to work on this skin commission and can't wait to see the forum active and full of players! This skin features:

Day countdown

Member count

Isotope Memberlist

2 styles of forum rows

Profile App

Variables all around for ease of use

And much more!

My comissions are currently closed but you may access premades on my kofi

[mabelskins]

LIFE UPDATE

Hello hello, it's been a while! Life has been crazy right now and I thought I'd say hi to everyone and update on what's been hapenning. After a long period of search I've finally got a job! Super happy and excited about that, but that means I've got less time to work on coding for now. SO! Some changes... I'll be closing commissions for now (continue working on the ones I'm on right now) and will be focusing more on notion resources, blogs and premade skins (next one being a fantasy one, haven't forgotten!)

That's it for now everyone <3 hope everyone is keeping well and healthy

[mabelskins]

How to: Accessibility [EN]

Part 01 - Visual design

It’s been a while since my last how to and felt like putting something together! First of all, HAPPY PRIDE MONTH! To everyone out there! Being in the queer community, i know the struggles we go through everyday and am wishing a very proud month to all of us <3

Moving on to the actual topic here: accessibility. It’s been shown here and there when discussing coding and skinning but WHAT DOES IT ACTUALLY MEAN! 

Let’s go back a bit. For years people have been trying to achieve the impossible: an universal design. A design that is universal and usable for ALL people a one-size-fits-all design that will be usable and perfect for everyone. Now, there’s only one ‘little’ problem with this: people are different. I’ve always been overweight and whenever I’ve seen clothes that say ‘one size fit all’, I look at it very suspiciously. Bottom line is: every person is different, pain points and needs will also be different. 

So what do we do? One different design for every person who is using our product? 

Well, let’s make it equitable, let’s provide flexibility to cater for a broader audience, and let this audience choose what’s best for them. But! That’s doesn't take the responsibility from us, the designers (and coders) to make sure that we are making what we can to enable this flexibility. 

------------- I've started a list which I then realised would be way bigger than expected, so decided to make each item into its own post. We'll start with VISUAL DESIGN!

Part 01 - Visual design

Colour

I’ve mentioned before about the importance of contrast and contrast ratio briefly. If you want to go into more details, you may have a look at W3 Guidelines. In short: 

Don't rely on colour alone to convey meaning, information and actions;

Make sure there's enough contrast between foreground and background

Provide an option for light/dark mode

Light/Dark Modes

There’s a myth that dark mode is good for accessibility, because it improves text readability. (Personally, I’m a big fan of dark mode, as white/bright screens may trigger migraines). However, as everything in ux, the answer to ‘is it black or white’ is that it depends. As mentioned before, a good rule of thumb is not to generalise and provide flexibility. 

When using light and dark mode, make sure the colour contrast ratio passes on both modes. Here’s a few tips for designing for dark mode (according to atmos article attached at the end of this): 

Use tints (less saturated colours). Saturated colours can cause eye strain and will be hard to pass accessibility standards.

Image from Atmos website

Avoid pure black. Please. Pure black and pure white when used together might be the default instinct, but the contrast when used together is so strong it becomes hard to look at. Choose dark greys and off-whites/light grey when possible. 

Be patient with your colour palette, inverting colours won’t make it necessarily good. Take your time to build a palette that will be suitable for both.

Target Sizes

First, what is this? This refers to the dimensions of interactive elements such as links, buttons, icons or touch targets. Basically, anything you can interact/click.

WCAG 2.2 established a minimum for pointer inputs to be 24x24. This is the space that should be provided for a clickable area.

Image from W3 website

There's a number of exceptions and guidelines which I won't get into too much detail. It's important to think about the area which people are clicking into these elements. Also remember that this may be quite useful for users that are using the forum in their mobiles - so this is quite important (don't you hate when you can't click somewhere because you haven't clicked the EXACT area needed?)

In short:

Make sure target sizes are at least 24px

Make sure buttons look like buttons, anything that is clickable and interactive LOOKS like they are interactive

Make sure links are underlined (again, as an extra visual sign that they are clickable)

THAT'S IT!!

For part 01 at least. This is just the tip of the iceberg though. If you'd like to dive deeper into this, I highly recommend Stephanie Walter's content, as well as the Extra Bold book read. I'm attaching a few more articles and resources here too! If you've read all of this, you are a champ, I know this is longer than usual. Please like and share this content, let's get it out there!

Articles:

Designers Guide to Documenting Accessibility

Dark mode ui best practices

Dark mode best practices

Accessibility annotation examples

Colour accessibility tools

Inclusive components design

Accessible design in 60s

Target size minimum

Resources

Accessible colours

Accessible colour palette builder

[mabelskins]

Tarot Readings Skin ⸻ $65 (by mabel skins)

Live Preview / Purchase / Discord Support

Tarot Readings is a responsive skin for JCINK forums and is optimised for Google Chrome.

The Skin Features:

— Side Navigation Bar — Hideable Navstrip — 8 Easy to edit member group variables — CSS variables for fonts, colors and images for easy customization — Medium colour skin featuring black and white with focus on readability Responsiveness — Option to Increase and Decrease font sizes — 3 different category styles — Post row with a sticky, hover mini profile — A tabbed main profile featuring aesthetic images, sections for freestyle and shipper, and automatic thread tracker (by fizzyelf) — A filterable, searchable, and sortable isotope member list — Installation guide PDF with comprehensive instructions. Text Styles — Heading and text styles — Face Claim and Reserves — Generic Admin Template

Extras: — Socials Pack $10 — Guidebook and Thread Templates $10

Up to 1h support for installation and help on my discord server.

Purchase link: https://ko-fi.com/s/0a71ca8387

[mabelskins]

Since you liked the Sherlock font pack so much I made a Supernatural one aswell! Unfortunately, typography and text-on-screen is not as significant in this show as it is in Sherlock, but I tried my best. And they’re all free!

Supernatural Knight (free)

Ghostwriter (free)

Keystone State Native (okay this one wasn’t free)

Intrique Script (free) 

Christopher Hand (free) 

SF Comic Script (free)

Something Strange (free)

- Symbols

PR Astro (free)

Harpers (free) 

Devils (free) 

Useful as reference!!!

[mabelskins]

my trick for getting through grad school is learning to navigate the quadrants with all their nuances

[mabelskins]

Ask away 🏳️‍🌈

asks for lgbt+ people only ✨

💫 - talk about / describe your sexuality and gender

📎 - do you have / want any tattoos and piercings?

🍣 - who is someone who makes you feel at home?

🌈 - what was your first pride like?

🍋 - what’s your star sign?

🍒 - if you’re out, who was the first person you came out to?

🍄 - who do you always play as in mario kart?

🥝 - has anyone ever come out to you?

🌨 - what’s your favourite season?

⛺️ - is there anyone who was particularly important to you in your coming out process?

🥒 - what are your three favourite songs right now?

🌊 - do you have any lgbt+ friends?

🍓 - if you’ve ever been in love, what does it feel like? if you’ve never been in love, what do you think it will feel like?

💡 - are there any older lgbt+ people you look up to?

🦔 - are you more of a cat or a dog person?

🍊 - what queer experiences are you looking forward to (going to pride for the first time, being in a relationship etc)

🔭 - what are you most proud of doing in the last year?

🥑 - which lgbt+ celebrities do you admire?

🍉 - what’s the best thing about being lgbt+?

terfs etc don’t touch! my posts are for all lgbt+ people, especially trans and gnc people (but not trans exclusionists. y’all can fuck off)