#kaecodes

More importantly, I've been doing a lot of reading & observing of the Jcink RPC & I am really gutted by the lack of free resources I've seen become manifest. As a result, I've been percolating some easy design methods I could use to fast track totally free skins to give out as bi-monthly as I can manage in the near future.

Because I'm not one to stick to an aesthetic or design style so much as following a settled philosophy of coding, each of my skins will be entirely unique (no reused assets besides utility scripts, perhaps fonts, etc) but will all be;

Designed to be entirely responsive, with fallback & default setups for Custom Fields, image appearance or omission, etc.

Designed to load in a second & half or under, universally.

Neatened to be readable, cascade-organized, & fully notated with CSS & HTML notes to explain important components, how they work, & how to edit them.

Provided with a dark, light, & middle theme colour option as well as High Contrast option.

Provided with Staff, Member & Character profile & miniprofiles.

Provided with a full Custom BBCode suite of site templates to match the skin.

Based on the UI/UX design of a game with striking visuals that can be used for similar genres.

Now, this is a tall order, but I really want to flex my muscle & try to give folks something to be optimistic over in a landscape of drama-blog wastelanded distress. I want to put out something productive & positive, to make the community better & bring us together a bit <3 As a result, I'm going to need a little help from you all. I need to figure out which "Inspos" to work off of first based on desire for them, to fill the starving niches from most important to "least" so to speak. For the next few weeks, I'll post some polls & would be endlessly grateful if you all paid it forward by boosting but also voting on the games whose vibes you want to see MOST PRESSINGLY manifested as skins in the Jcink RPC.

I will, also, eventually port each one to Forumactivo, so for my Forumactivo folks, please let me know when you get specific polls so I can prioritize converting those skins for you! You deserve just as much love!

I've been on vacation but finally got back to this & to keep myself accountable I'm posting this update even if It's only one view, it is a fairly intricate work of a mockup. This is the default desktop post view for an IC account, the OOC will simply have some elements changed slightly, not enough to need a variant made.

Hey, do you have a site with a lot of forums? Does your host allow you to use Javascript? Boy does this weirdo have a deal for you! For the low low price of free, you can get right now access to a scroll button that swaps directions when you scroll automatically, as well as changing the target & title on hover! Act fast, this deal won't last! I kid, but enough of the ShamWowery. In reality, this is a very simple script that reads how far you have scrolled a window, & applies or removes a class to your scroll button, as well as changing the target of said scroll button & adjusting the title to reflect which way it will take you!

It's so simple, crediting me seems superfluous but if you want, feel free to credit with a link to my blog <3 I hope the new verse of our song is eminently kind to everyone!

See it In Action(Click, or look Below):

I currently use this code on two different WIPS, so feel free to check out some gifs;

To Begin

Before the end of your </body> tag in your wrappers(for Jcink) or wherever the HTML templates go on other sites, you want to place this script:

<script> $(window).scroll(function() { if ($(this).scrollTop() > 800) { $('#scroll').attr("title","To Top?").attr("href","#Top").addClass('totop'); } else { $('#scroll').attr("title", "To Bottom?").attr("href","#Bottom").removeClass('totop'); } });</script>

This seeks out an id of Scroll to adjust the href & title as needed depending on the scroll position within the relevant window. The scroll amount is in px, so to change how quickly it changes the button, alter the number 800 to whatever you desire, fiddle with it; one size never fits all.

The Styling

Once you've saved that, move to your CSS, or wherever your Style tag is to add styling for the link itself. Keep in mind the link should be contained within a container that handles its positioning for it as otherwise the script will fuck with the positioning as well as the transformation & you really just want it to spin upwards.

The styling for the link should be as follows;

#scroll { display: inline-block; positioning: relative; transform: rotate(0deg); transition: transform .5s ease-in-out; /*** ^ change the .5s to alter duration or the ease-in-out to alter the timing of the transition between button states ***/ }

#scroll.totop { transform: rotate(180deg); }

The first statement defines the default state (linking to the bottom) of the scroll button on the load of the page, the second defines the change of position once the window has been scrolled far enough to activate one's script.

The HTML

Now you've got the behaviour defined via JS & the styling defined via CSS, it's time to input the HTML, or the bone structure of the code itself. In your wrappers, template, or wherever HTML goes on your host, locate three places;

One, where you want the TOP scroll location to be. This is where the scroll button will take you once it has changed states on scrolling a certain distance. Here, you place an anchor span as follows;

<span id="Top"></span>

Two, Where you desire for the BOTTOM or BODY scroll location to be, as in where the scroll button will take you on click initially. This could also be a scroll to the start of content, in which case I recommend changing #Bottom & id="Bottom" respectively to reflect the syntax, it's entirely up to you. Here, you place an anchor span as follows;

<span id="Bottom"></span>

Finally, It's time to add the scroll button. Keep in mind, where you put it is a function of utility & design choice. Some like it persistently hovering in a fixed position, some like it in a sidebar or on userlinks, some prefer it in the navigation bar.

Wherever you place it, try to ensure that it's easily accessible on any device, screen size, & matches the User Interface logic you've used everywhere else. If you have all text buttons, don't use just an icon, if you have all icons, don't suddenly use just text. Match your action calls, so users don't feel confused while using your site.

Once you've decided where you want it, place the following code, NOTING that there should be a container for this code that positions it for you. I've provided two options; the Icon Font option (courtesy of Phosphoricons -- a free & reliable Icon Font I recommend -- As well as one which includes text, so both UI/UX design philosophies are accommodated.

Note the option with text will only rotate the caret from downwards to upwards, so the scroll text shouldn't need editing unless you want to add or supplement flavourtext.

Please choose the appropriate option for yourself;

Icon Font

<a id="scroll" class="ph-fill ph-caret-down"></a>

Icon Font with Text

<span>Scroll <a id="scroll" class="ph-fill ph-caret-down"></a>?</span>

Some Notes:

I just want to add a bit of info:

If your browser isn't scrolling smoothly to your anchors? Check your settings, & be sure the root of your CSS has scroll-behaviour: smooth; in it.

If you use this guide & have problems getting it to work, please let me know! I will troubleshoot this for you & tumblr has strange coding, I may have futzed something up, I want this to be as accessible as possible, so don't be silent; questions help!

If you are not using Jcink, or another host with a Jquery library pre-loaded, be aware that one is needed for this script to work. Most hosts will have a default Jquery library, but if yours doesn't or you're self hosting, any should do. The Jcink file is below, however, if you want to just use that.

It's nothing fancy, or finite, but I've been working on a resource repository for aeons & decided this year is the year I make something legitimate instead of just sketches, dreams & anxieties. To keep myself accountable, & remind myself tomorrow when I look at it again that I can design things I don't hate, I'm posting it here! I hope the new verse of the song has started out kindly for everyone <3

The plan so far is:

A Stats, Profile & Post View mockup coming hopefully tomorrow if I can get my shit together & stay on this roll.

Several alternative skin schemes; a High Contrast Low Saturation Skin, a Low Saturation Normal Contrast Skin, a Light Skin, a Darker Skin, & perhaps any others requested.

Scaling fonts based on a Custom User Profile Field

A Mobile first structure that will replace the mobile mode in functionality.

A full custom BBCODE template suite to serve for posting resources, trackers, & funsy optional member stuffs.

A lightweight (hopefully) blocking system that allows members to add a user ID & see a spoiler over posts of those blocked.

As I mentioned before, I intend to put out a series of Free to Use skins with consistent features & standards that are easy to install, edit, & use. These will be designed off of the inspiration of specific games, series of games, & genres of games.

I will, however, only be using games I can clearly see a visual language in the UI of. I went through a few hundred games yesterday perusing UIs & considering atmosphere to determine the shapes, themes, & vibes they might offer that would work in a skin.

I now have a working, if incomplete, list to pull from. So now, I'm going to post a weekly poll with games to choose from & brief descriptions of their general design philosophy. That said, I am already working on two skins that are inspired by games; Alan Wake 2 & Control both from Remedy games.

A sampler of the Alan Wake skin, which will be called Vigil. My notes for the skin were: Green, Moody, Noire/Surreal Detective, Lovecraftian/Unknown Menace.

As you can see, the header starts with a greeting for logged out members, or an announcement brief in the case of the logged in member. Clicking the username or briefing button in the box will bring up a full page modal containing userlinks, quicklinks, & a large custom account switcher if logged in, or featured wanteds if not. It's nothing fancy, but I thought a visual would help folks know how I design based on what will seem like vague/brief descriptors in the polls.

Speaking of which, it's time to get to the first of them. Of course, the Remedy inspired skins will be my first works, but I'd like to collate a list for what comes after, so when I hit a block or am just doodling while busy, I can get a head start on designing others...

I wanted to post this with an update on the skin I'm working on, but since Tumblr keeps erroring out on me erratically & I have successfully lost two post attempts to it, I will simply toss up another Poll to follow the very successful, very well-answered one of last week before I forget to <3 Again, to be clear & transparent:

I will use these polls to gauge interest in various skin designs & inspirations to better organize the list order in which I work on them, but my pie in the sky plan is to do them all in time!

The number of votes per game will matter, not just which ones win. So even if your favourite isn't winning, it's always good to toss a vote its way as I am keeping track of the numbers, not just the percentages.

The short descriptions of the directions I'd take are short because the poll demands it & I'd like to keep these posts to an accessible size. When the subsequent favourite showdowns begin, each will come with a quick design board piece & clearer descriptions of the direction I plan so you can make a more informed choice.

Please be nice, I am doing this for free & have gotten some interesting asks already. If I'm not your cuppa as a coder, that's fine! But I don't need to be reading alladat.

As before, follow your heart, there's no wrong answer & none are being eliminated, just moved up or down in priority on the queue. Update to the Vigil skin coming as soon as Tumblr stops eating it <3