lanayru coding

(Figured it's about time to make one of these so I can pin it, lol.)

For anyone new to my blog, hi! I'm Lanayru (or Lana, if you prefer) and I make Jcink codes and skins for roleplay forums. This blog, @lanayrucodes, is my portfolio blog where I post my current skins that are available, WIPs of projects, answer questions, and occasionally take requests or commissions. I also reblog resources - some for writing, mostly for coding - that I think would be helpful for other people, or that I want to bookmark for later.

I also have a few pages on my blog that are helpful if you're interested in my stuff:

Information: My information page describes the state of my commission queue, as well as the process of beginning a request with me, and the process of completing a commission.

Packages: This page describes all my package tiers for commissions, their price estimates, and what is included. There are also individual pages for each tier of package with examples of my work. (Basic / Full / Premium)

Terms & Conditions: What it says on the tin. (The terms and conditions for using my coding!)

Other pages that aren't directly related to transactions with me that are helpful in navigating my blog:

Tags: A page categorizing all of my completed skins, with links to either the individual project itself (in the case of custom commissions or single-sale premades) or the /tagged page for multi-sale P2U/F2U skins.

Hi there! Apologies for the delay, Tumblr didn't notify me that I had anything to answer </3

Now your question "How do you upload multiple images for different locations?" reads as "How do I upload multiple different images for a singular board, and how can I do that for all of the locations on my site?" to me - as in you'd like the images to rotate through a group of images for a single forum. (You can feel free to tell me if I'm wrong, but that's how I interpreted it when I first saw it.)

A thousand apologies, but that's not possible. At least, not without overhauling the way images are done on forums, which would involve re-coding that section of the skin and CSS entirely to use a different method. (You can do that, but I don't think a Tumblr ask is the best medium to give instructions on how to do that if you don't already know how to do it yourself. Which is why I won't be doing that.)

With the way I designed and coded the skin, it was designed to only use one image per board, using the Jcink File Manager as its source to minimize modifications needed while setting it up, while also keeping your images safe in the event there's server downtime.

The images for forums are considered background images (via CSS) and like most instances of a background, it assumes that the background is only going to display one thing: a singular image, color, etc. There are no instructions for using multiple images because that's not the intended way of using images on forums, and wasn't set up for it.

I've finally reached the point where the only major work left to do is finishing a singular post template which has been stumping me for a while now. Afterwards, I plan to proof it for a small degree of responsiveness - although it will definitely NOT be fully responsive - to make sure it fits on a variety of monitors, just to check that nothing looks completely busted on a laptop or a tablet, which will also take a few extra days.

Assuming all goes well, I may be looking at releasing Garden of Dreams sometime next week, or the week after (Nov 17th - 28th) depending on how long it takes me to write the installation guide for it. (Which I'm anticipating will be a lengthy endeavor, or at least lengthier than my usual guides, due to the amount of customization the skin can have.)

In the meanwhile, here are some peeks at the remaining sections of the skin that were previously incomplete (board stats, main profile, member list, etc.)

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.

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.

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.