FIRST ROW: Three NPCs for an ongoing RP event, two drawn for friends of mine! Argo the Exalted (for Arcade), Vince (for Sety), and Arte, in that order.
SECOND ROW: Custom D-Link/Drive Form for Sora for that same RP, based on Phainon and Mydei! Drawn for Vale!
This is a little code I threw together to be able to make pain-free tabs and toggles for themes and websites without any fuss and without using larger frameworks like Bootstrap, and since it's pretty easy to use and could be of use to others, I decided to share it!
This snippet can be used both in Tumblr themes and other websites such as Neocities.
↓↓ INSTALLATION AND TUTORIAL UNDER THE CUT! ↓↓
STEP 1: INSTALLATION
In your website/theme code, above </body> paste the following code:
This loads the script into the theme and initializes everything once the page loads.
STEP 2: SET UP THE TABS
Create a container that will hold the tabs. You can either use a set height/width combined with overflow: hidden to keep the container from messing with the page layout, or set them to height: auto if you don't mind the size changing.
Inside this container, put as many tabs as you want. Make sure they have the "tab" class, and for whatever tab is meant to show on load, include the "active" class. You can style the tabs however you want from there, such as padding and the like. The code includes a preloaded <style> section that adds basic formatting.
Give each tab a unique ID (such as "#TAB1" or "#HOME"). This will be referenced by the toggles.
STEP 3: SET UP THE TOGGLES
This code is flexible to allow anything to be used as a toggle: a button, an image, a <div>, a link, whatever, as long as it includes the proper classes and two custom data attributes. You can style it as you desire, as well.
Set up whatever you want to use as the toggles, giving them the "toggle" class. Make sure whatever toggle corresponds to the active tab also includes the "active" class.
When setting up the toggle, make sure to include the custom attributes data-tab="" and data-tab-toggle="". The first attribute identifies the toggle itself, while the second targets the tab. Make sure that data-tab-toggle="" includes the # sign (such as data-tab-toggle="#TAB1") or the code WILL NOT WORK!
Your toggles can be customized to have a visible indicator that they are "active" using specified CSS selectors! For the example above, styling button.active (or, if you really want to be specific, button.toggle.active) would cause the button's design to change only if it was toggled.
HOW IT WORKS
Under the hood, the script is pretty basic, and was mainly just me testing if I could do it. For those who want to know how it works or are skeptical on the function, here's a quick guide! Step by step from the top of the code to the bottom, it performs the following actions:
The code creates a custom <style> element.
The code adds standardized rules for the tab and toggle elements, along with a simple fading animation. These standardized rules hide inactive tabs by setting them to display: none and showing active tabs with display: block!important to override, set the tabs to 100% of their container element's height and width, and sets the tabs to have overflow: auto for scrolling.
The code inserts the new <style> element into the page <head>.
The code initializes four variables: tabs, btns, activeToggle, and activeTab, and creates arrays of all tabs (checking for the ".tab" class) and toggles (checking for the ".toggle" class).
The code uses the forEach() function to add an event listener that calls the main function of the code when clicking on a toggle.
The code sets up the actual function, toggleTab(). The function first uses forEach() to remove the "active" class from the tabs and toggles. Then, it checks the values of the toggle that was clicked on and uses them with the activeToggle and activeTab variables; activeToggle lets the function select the toggle that was clicked. Afterwards, it applies the proper classes to the tab and toggle to change tabs.
I finished the artwork to be used for a PNGTube Remix model, but the software crashed as soon as it picked up my voice. Then, I tried using it as a RahiTuber model, but it's too freaking big. So, I'm using this as a Veadotube Mini PNGtuber model while I redraw everything.
BUT! The design is finally done! Meet Shaula, my Vtuber persona over on @constellariumvt!
Bills are tight and me missing time due to a myriad of IRL things means my coming paycheck is going to suck so bad next week, but since I work an 8AM - 5PM desk job, it means I have free access to a computer, and that means I can write!
So I'm opening one-shot writing commissions for a bit of extra money!
PRICE: $1.50USD per 100 words (rounded to nearest 100), max 2,500 words
You can check what fandoms I'll write for and what I will and won't write on my commission page, as well as place an order there!
Bills are tight and me missing time due to a myriad of IRL things means my coming paycheck is going to suck so bad next week, but since I work an 8AM - 5PM desk job, it means I have free access to a computer, and that means I can write!
So I'm opening one-shot writing commissions for a bit of extra money!
PRICE: $1.50USD per 100 words (rounded to nearest 100), max 2,500 words
You can check what fandoms I'll write for and what I will and won't write on my commission page, as well as place an order there!
Admittedly, Phainon already had concerns about Mydeimos when he noticed that the boy barely spoke, and looked like a bundle of sticks wearing soggy clothes, but those concerns became ever more clear as he watched Mydeimos once they had gone inside.
There was an obvious reluctance in his mannerisms, staying tucked within the safety of the blanket Audata had wrapped around him to dry him off and keep him warm. He remained close to Phainon, a hand gripping the edge of his tunic, as if something would pull him away at any moment, and once they were inside, he shrunk in a little closer, avoiding the furniture as best he could.
Snowy, for his part, had taken a quick liking to Mydeimos, plastering himself to the boy’s side and attempting to shove his head under his free arm to comfort him. Thankfully Mydeimos now knew that Snowy was just as harmless as he looked, and took to petting between his ears to keep himself calm.
“I can’t even begin to imagine how you ended up here,” Audata continued to ramble, sorting through cupboards and cabinets. “And from Castrum Kremnos at that, that’s so far away!”
“Not Kremnos,” Mydeimos timidly spoke up, his voice quiet as he shook his head. “Sea. Dark sea.”
“You...came from the sea?” She paused, leaning around the open cupboard door to gaze at him, then looking to Phainon, who spoke up in turn.
“He was floating out by the docks when we found him,” he explained. “He wasn’t breathing and he didn’t have a heartbeat, but when I performed first aid like Miss Pythia taught me, he woke up.”
“Sweetie, that doesn’t make any of this make any more sense. And you saying that he drowned doesn’t make this any better!”
“Die lots.”
amandla
2087
ellievsbear
vaporwave
germansingergirl