lanayrucodes

[lanayrucodes]

Hello! I ran into your skin Fading echoes and was curious if you had any tips for coding a main forum that is hover/tabbed for the rp section like that? I've been searching everywhere for something similar, or even tips on how to start that style. I saw one waaaaaay back in the day and fell in love. I'm an amateur skinner with big dreams, so if you have any advice or sources that would help learn to make a main forum body like that, I'd love to have them!

Sure! I can't claim that the method I used for Fading Echoes was the most efficient, since it was my one of my first attempts actually getting tabbed forums to work - on a skin I planned to sell, no less - but hey. If it works, it works.

I would like to also mention in advance before I explain these convoluted methods that Niobe & FizzyElf have a script resource for tabbing forums and categories. I didn't come across this until MUCH later, after I'd already sold Fading Echoes, which may be a better and more efficient method than the ones I'm about to explain.

The "Style" of Skin

First things first: typically, when you're making a skin for a Jcink forum using HTML Templates, you're expected to only put one type of markup/structure per template and the system then repeats it for every instance where that structure is meant to occur - i.e. you only write a single forum row structure, and that structure is repeated for every forum, etc.

For example, we have my WIP "Kingdom of Calamity" skin, which has the same forum row style in every category, each of them identical to the last and the next:

(Where you can see all the structures are identical when viewed from the index, and there's only one set of markup in the Forum Row template for the skin.)

When you mention skins "of that style" in your ask, I'm assuming that you mean skins with a highly customized index like Fading Echoes, where every category has a different layout for their forums. In these instances - a custom index where forums in certain categories are going to have a drastically different structures from one another, and isn't something manageable with CSS - I give each of them their own markup.

This means that you'll have multiple sets of markup for each different structure you want, for each different template. This is less important for the Category Headers, and more important for the Forum Rows.

As an example in this case, take my WIP "Garden of Dreams" skin: it has a different layout for its forums in each category, and even the layout of each forum per category wildly varies from one another-

If you look under the hood of the skin inside of the HTML Templates - specifically, the Forum Rows - you'll see that I have a lot more markup here than a normal skin calls for:

This is because for each different forum that's going to have a different structure or layout, I'm writing completely new markup for it.

That's the general "gist" behind skins with custom indexes or ones done in this style: we're not using a single markup style with hard-coded elements (though that can also be done) but customizing each category and each forum to its exact placement on the index and in the skin.

To do this, I do two things:

First, slap IDs on fucking everything, and I mean everything. You can see in my screenshot the first few forums (for "announcements" and "moderation" respectively) that the first attribute on those containers is an ID for "fr-(ID variable)". I also have IDs on the category for "cat-(ID variable)". I've started to make it a habit in my newer skins to put an ID variable on anything and everything I can get my grubby little raccoon mitts on in the skin, up to and including even the body element and anything within that such as categories, forums, post containers, profiles, etc.

That sets you up for the second thing, which is setting all forum/custom containers to "display: none" with a style attribute. I do this to prohibit any and all structures from displaying by default in every category, and potentially mucking stuff up when their styles, size, or formatting isn't compatible with the new/other/different category and surrounding forums.

These two steps, when combined, make it so you can selectively chokehold any elements on your index and wrestle them into submission with CSS - making sure they're visible where they need to be, and hidden where they don't need to be.

(And please, for God's sake, make sure your ID's are unique to only that container/element. That's a mistake I made often in my earlier skins that could have saved me a lot of grief: CLASSES are for repetition and grouping. ID's are not.)

Tabs on the Index

So, I can admit that I've never experimented with a hover on the forums before - mostly, because I still consider complex hovers and transitions to be my arch nemesis (although, it is on my list of things to eventually master) and I can't imagine that hovers are so different that the information provided above wouldn't be helpful in some manner. So, do as you will with that.

Tabs, however, can be accomplished in a variety of ways. In general, I consider there to be two separate ways to get tabs on something:

Using Javascript/jQuery/some type of script to trigger events for clicking.

Using radio button inputs and CSS to control display, also for a click or selection event.

They're both means to the same end, in some regard: you click on something, usually a button. That button controls what shows or hides. It's just the inside stuff that changes.

Funny enough, using a script of some sort is going to be what I consider the more "beginner friendly" option, and it's what I used for the tabs in Fading Echoes. In fact, I used this script in specific, which is a tutorial one from W3 Schools, and I just modified it to use the forum stuff instead of city names. It's important to keep in mind that for Fading Echoes, I also had unique Category Headers (new markup) for every single category, as well as unique Forum Rows like discussed above. I put the "tablinks" (the buttons/labels used as tabs) inside of the category markup, and I just created a new forum layout for the IC/RP forum containers as the "tabcontent". That make it so the tabs only displayed in that category, and specifically only worked for the forums with a corresponding ID number.

There are also other scripting methods of doing this, like Noire's script that I mentioned at the start of this. And that one, if memory serves, wouldn't force you to make multiple different category types like Fading Echoes did.

The method of radio buttons/inputs is also possible to use, though it does require you to have a good working understanding of using radio buttons for toggles - because if you don't understand what's going on with :checked attributes, you may not understand how to write your CSS in order to select the correct forum to display. I've done this method only once, on my vaguely "House of Night" themed skin that I'm still working on, and while it's a little buggy in some regards, it's also very much functional!

Here, I just made a second forum row structure (the other forums all use the same type of structure) and put the input/radio button inside of the forum, along with it's label, and corresponding elements for the forum. Then, the toggle - or which forum is displayed when you click on the tab - is controlled via CSS, as is the case with most input-based tabs like this.

Full disclaimer, the "little buggy" part I mentioned is that I had to use jQuery to get the correct tab to select when the page first loads, before a user clicks on any tabs. Otherwise, it was trying to select the first radio button/label combo on the page, which was technically in another category for a forum that had that "display: none" property set on it. (Remember, each forum structure you put in your "Forum Rows" HTML Template will get used for every forum being displayed. By putting IDs on them, we're just hiding them from showing with CSS, but they still very much exist on the page.)

If you've never worked with CSS tabs before, I have a few versions on my portfolio site that are considered "base" templates you can play around with:

Basic HTML & CSS Tabs

Basic HTML & CSS Accordion

Basic HTML & CSS Checkbox Toggle

I'd highly recommend getting used to them as a template for a post, to make sure you're really grasping how they work and the CSS selectors at play, before you try putting them into a skin.

I hope that helps, and as always, I'm willing to answer any coding questions people might have - not just stuff related to my work, but also general "how does [X] work" or "how do you do [Y]" - provided that I know the answer. I'll be the first to admit that I'm very much self-taught, and not a professional. I don't know everything, but I'm a Google search away from learning at least one new thing.

[lanayrucodes]

Age Of Taclmat font designed by twinletter

[lanayrucodes]

Sending Feelers for a Coding Group

Are there any coders/skinners out there in the jcink coding community that would be interested in creating/joining a coding community where members produce 1 free premare skin or set of resources each every 1-3 months? It would be more about having fun with coding while being productive and contributing without too much pressure. Not quite jcink skinathon but... sort of?

[lanayrucodes]

greetings! absolutely love the garden of dreams skin so far. especially those forum layouts. curious if there's any update on it. love all your skins <3 <3

Hi! Thank you for the kind words on my work, they're much appreciated. 💖

As far as Garden of Dreams goes, I had to take a break to deal with life (took trip to another state, my car broke down, our cat needs surgery, etc.) but I have made progress on it. I still have to finish 1-2 templates on it for the member list and the main profile, and then spend a bit of time proofing it for things like accessibility and mobile access, but it's coming along.

Unfortunately I can't give you an ETA for when it'll be finished or a date of release, but it is coming along!

[lanayrucodes]

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/

[lanayrucodes]

is there a way to make the like width of posts on the SummerFire skin wider? I want a slightly wider post, but i'm not sure how to do it ^^;; or if its possible

Hi! I'm sure there is a way, though I haven't experimented too much with it at this time. The two ideas that come to mind would be:

Finding #outer-wrapper in the stylesheet and making it wider altogether - as the post row is set with a flex, it should expand automatically to be wider - though this will also make the entirety of the forums elements wider, too. (As this element is the "container" for everything else.)

Making the hover image that appears next to posts smaller in width itself, to give the post container more room to flex into. You'd have to do a bit of math to adjust the sizes of all of the elements contained here though, to make sure there's no overflow or odd-sizing.

The first strikes me as the easiest method, as you'd only have to change a single number and do a cursory check on the skin to make sure nothing broke. The second has the smallest area of impact - only affecting specifically post elements - but is more in-depth in the regard that you'd have to check/adjust the sizes of more elements in the stylesheet.

[lanayrucodes]

Heads up for people that use PHOSPHOR ICONS in codes, themes, site skins and the like! If your icons aren't displaying lately, you're likely using the unpkg CDN script, which Phosphor no longer recommends because they've been having a ton of outages lately.

You can easily swap to the jsDelivr version and that should fix the issue. You can find more info about that in PhosphorIcon's GitHub

[lanayrucodes]

PictoChat Widget

preview: start doodling (desktop only)

In honor of the april fools projects I've done in the past, I made a little replica of PictoChat. It's a very simplified version, but you can download your doodle after you're done!

[lanayrucodes]

such great heights 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! :)

[lanayrucodes]

I'm finally back to working on some of my older projects, re: revamping decades old skins and I present to you this ancient monstrosity.

For those of you unaware, I recovered my external 2TB hard drive a few years ago, and was delighted to realize that some of my older skins - dating back 5 or 10+ years, for some of them - were stored on it. I've since issued a challenge to myself to go back over these skins and bringing them up to modern standards and aesthetics, while changing as little as possible about them between versions.

This skin is from a particularly old board, from one of the earliest sites I ever had. Obviously a lot has broken on the skin -

(most of the images were hosted on NickPic, RIP)

- and a lot of other items weren't ever finished to completion or aren't compatible with current methods of skinning, so it's been an uphill battle to finally get this to a point where I can show more of it off. I've had to take some liberties with the layout, which I'm actually not mad about, though it will deviate a bit from it's older aesthetic.

This skin will be released as a P2U multi-sale when I'm finished, though it may be a bit more expensive than my other skins due to the fact that I'm coding a completely unique index on it. (Instead of a more standardized or uniform layout for the forum index.)

The index so far:

I still have two more categories to finish styling, and then seven more modules (such as topics, profiles, posts, etc.) to create, as well as any miscellaneous styling, before this skin will be available. But this isn't bad for a few weeks work after letting it sit for almost a year!

[lanayrucodes]

I just found the funniest font ever

Like. What is this. Why is this. Who is the target audience of this?

[lanayrucodes]

Hey I was trying to get the skin information on one of your free skins magicka?

Hi there! I'm not sure what you mean by "skin information", but if you're referring to a preview of the skin, links to all skins are available in the #skin-previews channel of my Discord server.

If you're referring to the installation guide that helps you set the skin up, it should be included in the .zip folder when you download the file(s) from my Ko-Fi shop. (The skin is free, but posted on my Ko-Fi shop to maintain a uniform distribution system. You can enter "$0" for the amount due to get access to the files and pay nothing.)

The specific guide for this skin should be titled as "Magicka Installation Instructions.pdf" in the folder, and will be a 28-page document.

If neither of these were what you were referring to, please feel free to DM me and elaborate on what you meant so I can help! <3

[lanayrucodes]

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

[lanayrucodes]

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

[lanayrucodes]

Hi, I'm Dollie! I decided to start selling some codes that are just sitting and collecting dust. If you're interested take a look at my Ko-Fi page! I will be happy to help with the codes purchased. https://ko-fi.com/dolliewrld

[lanayrucodes]

????? paypal is randomly holding ALL of the ko-fi donations people sent me to fund my move and i’m on the phone with them right now and they said that i need to send a “purchase receipt” to everyone, despite me insisting these are not purchases, and then they need to get personal confirmation from EVERY individual donor that a receipt was delivered. obviously this isn’t possible. i’m fighting with them right now to have my funds released, but just a heads up to other bloggers that after years of this never being an issue (as recently as last month when I needed to raise money for emergency medical expenses), paypal seems to be officially considering all ko-fi tips as “goods and services” even on personal, non-business accounts and will require proof of services delivered. which of course is inherently incompatible with ko-fi as a platform, which allows people to collect “tips” simply for general content creation.

if someone randomly tips an artist because they like their art, does that artist need to send a receipt for each tip?

likewise, any tips & donations over $600 need to be reported to the IRS as income (in the U.S.) and will be taxed, because they’re considered goods and services. that isn’t necessarily new, but the money withheld is.

paypal has also discontinued its fundraiser function as of this month, so it seems dedicated fundraising platforms like GoFundMe are the only secure option.

[lanayrucodes]

I'd also second the timeline that Shani gave. Minimum, I expect it'll take me four weeks/one month from start to finish for a skin; sometimes, it can take upwards of several months.

If I'm lucky - and I mean really, really lucky - I can finish a skin a lot faster, but that assumes a lot of circumstances that I don't always get. Shorter timelines also assume that I have complete creative control, and the inspiration/motivation to do it, let alone the availability around other responsibilities to sit down and code.

For example, if I'm making a commissioned skin, it's going to take a lot longer - because I also have to show the commissioner what I've come up with and let them proof/review it, before I can even begin translating a mock-up design into an actual coded piece. And time zones are a thing that exists, so I may not get feedback for hours or days at a time.

Based on previous experience:

A commission piece that I had a lot of creative control over, or the commissioner didn't request many/any changes to, I was able to finish in a month.

A commission piece that I had little creative control over, or the commissioner requested a lot of changes to, took me upwards of six months.

A number of things factor into those timelines, some of which Shani touched on - things like making the UI clean and easy to navigate, while also making sure our coding itself is understandable to people who don't code.

(Most of us have to operate under the assumption that it'll be used by someone who has no coding experience. Not only do we have to make the end-user experience pleasant, but the actual coding itself has to be intuitive to someone who may have no idea what they're looking at.)

The above doesn't even begin to touch on things like responsiveness, which also takes time to accomplish, or needing to add accessibility features for folks like the visually impaired. (Who, sadly, tend to be forgotten by the vast majority that don't need accessibility tools.)

And after all of that, we still need to hit it really hard - several dozen times! - with a hammer to make sure that your most coding-illiterate member won't accidentally break the whole thing with a misplaced </div> tag.

How long does it truly take to code a skin?

~