#jcink tutorial

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

[beedesigns]

How to show/hide elements.

Inspired by a recent conversation with someone on discord that prompted me to make a quick demo on codepen.io I thought I would try to make an actual tutorial out of it. So! For those that are interested, here's how to easily change what different groups see when they're logged in. This tutorial is geared specifically toward JCINK coders, but can easily be adapted to any forum or webpage. Keep reading to find out how.

The first step is to add the group id to your board's body. To do this you need to find the <body> tag in your board wrapper and replace it with:

Now you have that in place, you can use it to dictate what different groups can and can't see. This obviously has a lot of use cases, from changing group colours to hiding certain information or forums. The most common use is to swap the navigation options depending on whether someone is logged in or not.

So, you've created your nav menu, and you want guests to see the "sign-in" link, but what about members who are already signed in? You want them to have the "sign-out" link instead. What we're going to do is wrap each link in a class that corresponds to who we want to see it.

Now, in the stylesheet, we're going to add the CSS to tell the board to show or hide the corresponding link depending on who is logged in. We're going to be using JCINK's default group ids #2 for guests and #3 for members.

First for guests:

This simply says if a guest (.g-2) is viewing the page, then show anything using the class 'guest' and hide anything using the class 'member'.

Then for members:

Much like the above, we're telling the site to show anything using the class 'member' and hide anything using 'guest' when the member group (g-3) is logged in.

And that's it! You can see it in action here, where I've combined it with a colour variable to demonstrate how this method can be extended to include pretty much whatever you want. Hopefully it all makes sense! This is my first ever tutorial, and I'm just a baby coder myself. So, if you see a mistake or something that doesn't make sense, please do reach out and I shall try to correct/clarify it. Thanks for reading :)

[ashleighcodes]

So you’ve seen some fancy templates around and you’ve decided that you want to try your hand at some doHTML? There’s just so much that you can do with coding and you can’t wait to see what you can...

First part of my three part series on basic doHTML. It was written with Jcink doHTML templates in mind but is mostly just basic CSS and HTML that can be used in any coding.

[jcinknetwork]

I’ve gotten quite a few asks lately asking to make a tutorial on how to roleplay on jcink, so I’m going to break it down as easily as I can! If you have any other tutorials that you would like me to do, just send me an ask! If you need me to clarify something, just let me know!

PART i: FINDING A SITE

Okay, so the first thing that you’ll probably do is find a site in order to join it. There are a lot of other great directories out there and I know that a lot of people search through resource sites. A lot of these directories have separate categories or tags which you can use to find just the site that you’re looking for. Here are a few examples:

@jcinknetwork​ - navigation page

@jcinkadverts​ - navigation page

wecode - advertising section

That’s about easy enough! If you’re looking to make a site and want to know if other people might be interested (ex: a real life site based in Washington, D.C, a post potter era adult era site, a fantasy site completely made up), you can usually find an “interest check” tag or section in order to ask. 

PART ii: FORUM BASICS

The majority of sites have a similar layout, so I’m just going to be describing what the general layout is. 

Each forum has different categories, which is the main section. Keep in mind that all skins will usually look different in colors, minor structures, and so on, but the overall design for most skins is generally quite similar. 

In the image above, it’s the part that says “wecode”. Beneath each category is a forum. In the image above, they are important reads, site announcements, and moderation. 

If you click on the forum (we’re going to click on announcements), you’ll see what’s in the picture above (though without all the cool colorful boxes). 

PiNK - That’s a subforum. 

BLUE - This is just going to tell you what forum it’s in, but technically it’s called a maintitle (though that isn’t crucial knowledge).

GREEN - This is a topic. You can usually see who posted it, the description of the topic, the last person who posted in it and when, and how many views and replies it has. 

Now, most sites are set up in a similar way. Here’s a basic rundown of how the forums are structured:

[ Site Name Here ] - Important Reads (member groups, rules, lore, etc) - Announcements (activity checks, announcements) - Moderation / Codes (site codes, topic moderation)

[ Registering ] - Registry (application code, where you post your application) - Claims (canon lists, face claims, other site claims)

[ Development ] - Shippers (where shippers are sorted, usually don’t post here yourself. plot with other characters here!) - Classifieds (requests) - Development (personal character development, post moodboards, aesthetics, etc here) - Communication (quick threads that usually take the form of notes, texts, calls, etc)

[ Location (Hogwarts / Washington, D.C. / DOWNTOWN) ] - The number of location boards varies per site. HP-wise, it might be set between Hogwarts, Hogsmeade, and London. If you’re in DC based site, it might be split between DC, Maryland, and Virginia. The locations listed under the location boards are usually located within the location title.

[ Out of Character ] - Usually just advertising and archives

PART III: ROLEPLAY BASICS

There are a few terms that you should know before you get started roleplaying on jcink because there are times when it might be a bit confusing for newbies, but it’s generally quite user friendly. 

SHIPPER - (Dossier, Plotter, Plot Page) These are used to plot between characters on the site (though the majority of sites now also allow plotting on Discord channels). There’s often a code you can use on the site to post your shipper as most sites generally like it to be uniform or at least to be using their codes. You fill in the shipper which usually includes a platonic, antagonistic, and romantic section for a short general description. Images are also included in these! If you want to plot with someone, you first post in their shipper. They will usually reply in your shipper, so keep an eye on that!

WANTED AD - (Classifieds, Requests) If you want to request people or a certain plot, this is the place to do it. If you aren’t sure what kind of character you want to make, check this section to see if anyone is looking for anyone. 

PROFILE - You can usually click on your name on a site and it will take you to your profile. To access an editing panel, you can usually find the cog in the topbar or someone where on the page and click on edit profile info on the sidebar in order to edit your profile. A lot of sites include multiple images and player or character information on the profile page, so be sure to fill those out. 

APPLICATION - Although getting more rare nowadays, applications are where you apply to join a site. Follow the rules outlined in the application code topic for what your title and description should look like and post a new topic in usually one of two different forums: complete, unfinished. Usually there’s a third forum entitled “pending” for character applications that just need a bit more work. 

SHIPPER APP - Sometimes sites use shipper apps. Instead of just being an application, it’s a shipper as well! Two birds with one stone, eh?

PROFILE APP - When it comes to profile apps, you have to go to your profile and edit it. There’s usually a large textbox for the actual freeform part of the application, though there’s also a lot of just general information to fill out. Completely a profile app usually also requires people to post their shipper before they join. 

MEMBER GROUP - These are groups that your characters are sorted into. These vary depending on the site. A classic example is this: a Harry Potter site is usually separated into Slytherin, Hufflepuff, Gryffindor, and Ravenclaw. You just pick which group your character goes into. By default, you’ll probably be a “member” or something similar. 

PART IV: JOINING A SITE

The first thing that you want to do once you find a site that you like is read the rules. This usually tells you how you’re supposed to register your account. What you register your account as is what everyone else sees, so if you register as Harry J. Potter (with the capitalization), that’s what everyone will see. Most of the time, you just register with your character’s first and last name in proper caps, but this is where reading the rules comes in. Some sites prefer all uppercase, all lowercase, middle initials, and some sites even require you to first register an alias account instead of a character account. Just be sure to read the rules!!! 

The next step is to reserve your faces or characters. Most sites only allow one or two reserves at a time, though be sure to read just to make sure. Usually on a site, there’s a code listed as the “reserve code” that you can use. If the face or character is already taken, you can’t use them.

The next step is creating your shipper or application or editing your profile. It depends on the kind of application (see PART iii). 

Then, you wait. I know, it totally sucks to wait, but it’s what you gotta do. If you’re pended, you’ll get a PM on the site from the staff letting them know what you missed. If you’re accepted, well get on plotting! 

PART V: PLOTTING + THREADING

Visit the shipper forum and plot with other characters. This is totally informal so you can fangirl and sob all you want to. There is usually a code to do this, so be sure to look around before you do so (sometimes it’s just a button). Once you find one that you mesh with or come up with a plot that you absolutely have to do, let the other person know that you want to do a thread with them. If they agree, either start the thread (and let them know that you’ll do it) or ask if they would be willing to start it. Determine the location (ex: Draco and Pansy in Hogsmeade at the Three Broomsticks - I (Draco) would post in the Hogsmeade category in the Three Broomsticks forum.) You would title it anything you want and the description usually tags the person. Example:

Title: ; start a fight Description: pansy parkinson / alias of other person

Then, of course, send the other person a link to the thread you guys are doing. When you guys think that your thread is done, just request to have it archived in the moderation forum. 

PART VI: OTHER THINGS

Now, if you want to keep track of all of the threads you’re doing or have all of your character’s shipper pages in one thread, you can go to development and create something called a tracker. You can edit this page however you want to include all of the threads that you’re character or characters are involved in so you can access them quickly.

Don’t forget to join your site’s Discord as well to interact with other players!

QUESTIONS? COMMENTS? SUGGESTIONS?

If I missed something (which, tbh, I probably have) or if you need me to clarify something, don’t hesitate to send me an ask. If you want it answered privately, please let me know. 

[nicolecodes]

tutorial: styling tables with css

caution, shadowplay

guide on using css to style tables

[nicolecodes]

tutorial: multiple css transitions

caution, shadowplay

how to achieve transitions with different timing on the same element

[nicolecodes]

tutorial: mini-profile/profile membergroup colours

caution, shadowplay, shine

changing mini-profiles and custom profile colours to match membergroup colours

[femmefatale-rps]

hey btw if anyone knows any good jcink tutorials for someone who’s never forum-rp’d before (literally jcink for dumb dumbs) pls point me in their direction, because I’m on the prowl and I’m determined