TESTING Playground

RalewayQuicksandOswaldRoboto; Merienda; Euphoria Script; Fjalla One;
Welcome to my Playground!


Hi there! This is where I abuse play with bbcodes for fun. I'm a weird person who uses coding on Iwaku as a stress reliever :'D

Please do not post on my thread (unless you have my permission to); you can always just create your own test thread. It's free. You wont get in trouble for having your own. Accidentally posting on my thread is fine, I won't chew you out for it or anything.

Please do credit me if you use my codes. I don't really mind if you use my codes without my permission (though it is preferable if you do ask first), just please credit me. Coding here may be a stress reliever for me, but I still do work hard on my codes and spend quite a bit of time on each of them. Even the simpler ones take at least an hour.

Not all my works are mobile friendly. Some of my older works aren't mobile friendly at all, but majority, if not all, of my recent works are mobile friendly. Someday I'll rework my older ones to make them readable on mobile. I usually put a note at the top of my post saying whether or not it's mobile friendly, but if there's none, it's probably mobile friendly and I was just too lazy to add it in.


2022 / 05 / 06 - HELLO! I AM ALIVE YES. A lot of my older works on this thread are broken as I haven't been around for several forum updates and obviously wasn't able to update them accordingly. I plan on slowly fixing some while completely redoing others. Layouts that aren't really broken may also receive a small tweak here and there, mostly to make them more responsive and appear less awkward on certain screen sizes.


//note to self: columns to be changed to accordions

Finished Works

Characters
Aureole Scriven - CS
Asher Fay - CSIC1IC2
Izabella Zielinski - CSIC
Gareth Himura - CS IC
Ren Griffin - CSIC
Fujimoto Nanami - CSIC
Nikandros Volkov - CS
Zedekiah Blackbourne - CSIC
Carina Fang - CS
Zoe Sinclair - CS
Han Seo-Hyeon - CS
Lucas - CS

Roleplays
Hogwarts 1975
Info Post
Wanderlust
Roleplay Thread
• Announcements
GM Post

Miscellaneous
Mobile Phone
Base
Messenger
Character Banner
Signature
 
Last edited:
I learned a new flex trick at work
Resize browser to see
🤞🏼 it actually works cause i have no idea since i'm on mobile while making this
Edit: it works! Yayyyy!
Todo: implement calc


 

#ffffff
(font)

#99ccff
(highlight)

#333b51
(background)



❭❱ PERSONALITY
Asher was never the sociable type. He's more reserved and kept his circle of friends small. He's the type of person who'd rather stay at home, than go out to a party. It wasn't until Heather that he started attending parties. He didn't like it, but he could hardly ever say no to the girl. It doesn't really help that he's pretty easily persuaded, espcially by his friends. He'd complain whenever they ask something of him, but in the end he'd still willingly go with their whims. He has a lot of patience in him. With friends like his, he definitely needs it. Like most people though, there is a limit to his patience. It takes a while for it to run thin, but once it does, Asher blows up and lets his frustrations be known. The silent treatment comes after.


❭❱ BIOGRAPHY
He was once just someone who blended in with the sea of students. Asher wasn't a extremely shy, but he didn't really make an effort to expand beyond his already existing friend group. He was content with where he was in the school's social hierarchy. His life at home was just as normal as well. They weren't wealthy, but they were happy.

His life took a turn when Heather came in.

Heather was a transfer student who was quickly taken in by the popular kids. Admitedly, Asher had a bit of a crush on her, but who could blame him? The girl was really pretty. He did nothing about this though, it was just a crush after all, plus he knew he didn't have a chance with her. It came as great surprise to him when he found her approaching him one day. She claims that he had caught her eye which baffled him even more. Long story short, they became an item. She brought highs and lows to his life. Heather was trouble, but Asher's little crush turned into something much more, blinding him to the truth for the longest time.

She broke up with him, just before their graduation. Her cold words that day had shattered the boy's heart.


❭❱ RELATIONSHIPS
father: Jonathan Fay
mother: Victoria Fay (née Desroisiers)
ex-girlfriend: Heather Clarke


❭❱ MISCELLANEOUS
pets: Asher has a Quaker Parrot called Gulliver. Gulliver is a rather talkative parrot who's not afraid to sass his owner. A big fan of birds, Asher also has two canaries who love to sing in the morning. Gulliver does not get along with either of these as their singing tends to wake him up.

languages: English and French. Asher is part French, a fact that his mother never lets him forget. She taught him how to speak French and would converse with him in the language.

glasses: Plagued by poor vision since he was in elementary, Asher wore glasses. Once he started dating Heather these were switched out for a pair of contacts instead. He still keeps a pair with him in his bag at all times just in case.

0yuBmhX.png


full name

William Asher Fay


nickname

Asher



age

20 years old


dob

April 02 (Aries)



gender

Male


sexuality

Heterosexual



faceclaim

Carson Hiner


 
Last edited:
Updated slider dimensions to hide the buttons
- Slider moves to next slide when clicking on current slide
- There is no way to go back to the previous one with this unfortunately, you'll have to wait for it to loop around to return to any previous slides


Sample:
Desired dimensions: 500px x 250px
Slider dimensions to input: 594 x 275 (desired width + 94, desired length + 25)

Slide 1
Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lorem tortor. Vestibulum commodo ante ac erat mattis, at fringilla neque elementum. Quisque accumsan magna ornare, auctor augue quis, blandit odio. Aenean eu elit eu enim vehicula ultrices. Aenean aliquet nunc sed orci pharetra finibus. Mauris semper a ligula ut porttitor. Nunc sit amet ante urna. Mauris et augue magna. Quisque ullamcorper consectetur nisl. In et dignissim lectus. Morbi non mi magna. Donec pulvinar, diam non efficitur consequat, nunc lectus placerat metus, in accumsan libero lectus eu nulla. Donec vitae euismod leo, a scelerisque nibh. Nunc et mattis neque, sed tincidunt libero. Nunc tristique euismod turpis, at sagittis ipsum venenatis ac.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse ac lorem tortor. Vestibulum commodo ante ac erat mattis, at fringilla neque elementum. Quisque accumsan magna ornare, auctor augue quis, blandit odio. Aenean eu elit eu enim vehicula ultrices. Aenean aliquet nunc sed orci pharetra finibus. Mauris semper a ligula ut porttitor. Nunc sit amet ante urna. Mauris et augue magna. Quisque ullamcorper consectetur nisl. In et dignissim lectus. Morbi non mi magna. Donec pulvinar, diam non efficitur consequat, nunc lectus placerat metus, in accumsan libero lectus eu nulla. Donec vitae euismod leo, a scelerisque nibh. Nunc et mattis neque, sed tincidunt libero. Nunc tristique euismod turpis, at sagittis ipsum venenatis ac.
Slide 2


Template Code:
[div=max-width:<desired width> !important; overflow:hidden; height:<desired height>;][div=margin:-0 -47px 0; max-width:<desired width + 94px> !important;][slider=<desired width + 94>x<desired height + 25>]
{slide}[div=width:<desired width>; height:<desired height>; background:<desired background>; overflow-y:auto; padding:10px; overflow-y:auto;]Slide 1
[/div]{/slide}
{slide}[div=width:<desired width>; height:<desired height>; background:<desired background>; overflow-y:auto; padding:10px; overflow-y:auto;]Slide 2[/div]{/slide}
[/slider][/div][/div]


Additional notes:
- Slider functionality don't work while in post preview mode? Need to save to actually be able to navigate to next slide via click??
- Untested on mobile; likely doesn't support. Might fix in the futureee, we'll see
- If slider functionality doesn't work right after saving, try refreshing the page. Idk why but that's what fixes it for me 🤷‍♀️
- Also not 100% this works well on all browsers. Currently only tested on chrome

Edit: Checked on my phone earlier, readable but idk how it'll handle larger widths. Will do more experiments in the future maybe. probably
 
Last edited:
redoing one of my old codes; wip


#a4a891

#c6bc99

#e6dcc3

#c9d5c9

#86a69b

#587573



 
  • Love
Reactions: Ardent
New post for permission testing
 
Silvanus Michael Kim
Nickname: Silas
FC: KSM
//placeholder character for the layout

Layout notes:
- predominant colour theme: blue;
Pota nawala ung tinype ko na code :)
- colour options
Will edit to display specific colours later. It's hard to keep switching tabs on mobile. Page keeps on refreshing >:c
#72A0C1
#F0F8FF

// desktop view
- photo on the left side
- nickname at the top of the right side (left aligned)
- content right side
- layout similar to heather layout

// mobile view
- photo collapse to top
- name goes into photo to the left (similar to kass layout)

Idk how to execute the mobile collapse for the name bit atm; might just trash the layout or change the plan completely

edit: lol I can't visualize the layout anymore ;;


Random to test:
Change photo on scroll to certain point
Is it possible to do with inline styles???
… is that not just scrollspy tho
 
Last edited:
Cassian Medeiros

Character art generated from artbreeder

Permanent Marker does not work :(
Anyway. That's enough testing for one day

Font list (manually added) for reference:
Abel
Alegraya
Alfa Slab One
Almendra Display
Almendra SC
Amaranth
Arvo
Caveat
Cinzel
Cinzel Decorative
Cormorant Upright
Creepster
Cute Font
Dancing Script
Eagle Lake
Fjalla One
Fredericka the Great
Handlee
IM Fell English SC
Josefin Sans
Julius Sans One
Jura
Kirang Haerang
Lexend Zetta
Lobster
Major Mono Display
Marcellus
Merienda
Metamorphous
Nosifer
Orbitron
Oswald
Petit Formal Script
Poiret One
Pompiere
Port Lligat Slab
Rakkas
Raleway
Reenie Beanie
Roboto
Ruslan Display
Sail
Satisfy
Shadows Into Light
Viaoda Libre
Yesteryear

Font list from a loaded lib that I found while looking through the site's network tab
Note: to see preview, check fonts.google.com
Additional note: Some fonts don't seem to work tho, so it's still a bit of a trial and error, but at least a more guided one
 
Last edited:
Name: Arabella Jolene Morrison
aj__morrison

Layout style - ig post
use sliders iguess

dark mode theme cause why not

first panel character image
second panel character info
third panel personality but like in an aesthetic way ? *insert sparkles*
or maybe just compress info in the second panel ? tbd


OR OR ORRR
Layout style - ig profile
character info is in pinned stories

i should be sleeping
g'night

todo: change font-family; figure out what ig uses
ig uses instagram sans, will stick with verdana
layout basis is ios




  • aj__morrison



    325
    Posts
    143K
    Followers
    81
    Following
    Arabella Morrison she/her
    Suffering through pre-law, but at least I look good

    Follow

    Message











  • second slide x


  • AJ_MORRISON
    Posts



my brain is refusing to function so I'll continue tomorrow

almost done with the skeleton. functionality to follow
implement using tabs; pinned stories clickable


SKELETON DONE
needs images and content in general
todo: figure out what version of fa iwaku uses

TABS DONE
todo: implement ig story layout


I CAN'T COPY IMG URL ON DEX >:(((



test2

colours
334257
476072
548CA8
EEEEEE


post 1 - "Clothes packed. 10 million items to go."
comments:
- fan 1: "YOU'RE MOVING????????"
- fan 2: "I'm guessing no new ootd posts until you've moved?"
-- bella reply: Yes :)

post 2 - photo of a makeup product
"Ngl, probably one of the best red lipsticks I've tried in a while. Might just start wearing a red lip more. #notspon #notanad"
comments:
- bella: Product is <insert red lippie product name> btw
- fan 1: ooooohhh 👀
- fan 2: would love to hear your thoughts on their <insert product name> mascara, it looked very promising to me!
-- fan 3: not bella but their <mascara name> is soooo good. Its my new holy grail
-- bella: I'll have to check it out then :)

post 3 - "Back at my dorm. I missed my closet."
comments:
- fan 1: welcome back pretty lady!
- fan 2: we missedd youu
- fan 3: AAA that's such a cute skirt, where'd you get it?'

post 4 - "Visiting home for a few days."
comments:
- fan 1: take care bells!
- creep 1: can you post a selfie of you licking a spork??
-- fan 3: tf?????
-- creep 2: sounds hot
-- fan 1: eww men
-- fan 2: @/creep1 @creep2 gtfo you're not wanted here

post 5 - "Exams done. Going out with the girls to celebrate"
- fan 1: have fun!
- fan 3: you look so pretty bella <3
- fan 2: I need everyone to report @/creep3
- creep 3: you'd look better without your clothes

post 6 - "Exam day. Wish me luck."
- fan 2: GOOD LUCK!!
- fan 1: good luck bells!
- creep 3: I can make you sure pass if you do me a favor 😜:eggplant:
-- fan 3: WTF YOU ARE SO DISGUSTING
-- fan 2: We need to get rid of this creep

 
Last edited:
I do not accept defeat
BIG WIP. PLEASE DO NOT STEAL.

Separating the tab ver from the anchor ver incase something breaks



  • aj__morrison



    325
    Posts
    143K
    Followers
    81
    Following
    Arabella Morrison she/her
    Short description

    Follow

    Message














    AJ_MORRISON
    Posts

  • second slide x


error checker. if this disappears then something is wrong
 
Last edited:
Revamping an old layout; content outdated
Original: [link]

It's slightly more mobile responsive now. At least all text can be read, is it the best experience tho? Not quite, but it works! aklhsdalhsd


#99ccff
( accent )

#333b51
( background )

rgba(0, 0, 0, 0.2)
( text bg )

rgba(352, 325, 325, 0.7)
( text )



❭❱ BASICS

name: William Asher Fay
nickname: Ash


age: 18 years old
dob: April 02 (Aries)


gender: Male
sexuality: Heterosexual


face claim: Carson Hiner



❭❱ PERSONA
suave: Ash is a handsome guy, there's no doubt about that. Girls swarm over to him and flirt with him on a daily basis. It was like he was some kind of celebrity--not that he complains; Ash doesn't particularly mind the attention that he receives. He's a smooth talker; his words can make any regular girl swoon and turn into putty in his hands.

non-committal: Unfortunately for the ladies, getting Ash wrapped around one's little finger is an arduous task. He isn't one to easily enter into a relationship with someone. The jealous portion of the male populace along with his other haters claim that he doesn't wish to enter into a relationship with someone, simply because he enjoys playing around with girls--but that is hardly the case. Ash is simply still hung-over his last relationship and hasn't moved on; he still has lingering feelings for his ex-girlfriend and has no interest in entering a relationship with anyone else.

flirtatious: Ever since the break up, Ash has been... different. Well, their relationship changed him as well, but after that he was a mile away who he was in the past. Before, he could hardly gather up enough courage in him to talk to a girl, now he flirts with just about every person of the opposite gender which he deems to be fairly good looking!

loyal: Back when he was still officially in a relationship, Ash barely paid any attention to the advances from other women. He would simply let them down and never flirt back. It's only now that he's single once more that he's begun flirting. But even still, he may flirt with just about every female within decent age, but he never goes beyond that. He isn't one to enter a purely physical relationship. Even kissing is a taboo to him unless it was with the girl he still had feelings for. Ash remains loyal to the one who still holds his heart--even if the said person has already let him go.

impatient: Ash is definitely not known for his patience. He doesn't like to be kept waiting. The mere action of waiting makes him feel agitated for some reason. Needless to say, Ash hates having to queue in line for anything.

open-minded: He doesn't discriminate others based on what they believe in. Ash knows that not everyone has the same opinions and views on things, and he respects that. He isn't the type of person to shove his ideals onto someone else and force them to believe the same as he does. He's also open to new experiences and ideas. Ash doesn't consider himself to be an adventurous person; he doesn't seek new experiences, he simply says yes when the opportunity knocks on his door--though, naturally, if it goes against his moral code then he refuses... at least until someone manages to persuade him.


❭❱ HIS STORY
normal: Asher grew up in an extremely normal family--really, no abuse, no extreme pressure, nothing major at all. His parents would urge him to do good in school, but not to the point where he had to be perfect. His mother and father were both working, but they made it a point to be there for Asher when he needs support and spend time with him. Ash's parents were rather lenient--lenient, but not crazy and stupid. They were still employed by reason, his mother specially. Partying, drinking, and pretty much whatever he wanted to do (except drugs), was alright with them--just as long as he does these things responsibly. Meaning, no excess drinking, no excess partying, etc. Though really, his parents didn't have anything to worry about regarding him back then. Ash didn't drink a lot, a can or beer at most; he didn't smoke, he found it disgusting; and most importantly, he never did drugs. This all changed when he met Heather.

heather clarke: Heather was like a hurricane that came through his life--a hurricane that captured his heart. When she moved in their neighbourhood and transferred into their school, Ash was immediately infatuated with her. He crushed on her hard. Back then, Ash was still a shy lad. He looked vastly different from how he does now. Younger Asher was handsome, that much didn't change, but his handsome features were buried underneath his plain and truthfully awful style. Which was why it came as a great surprise when he found Heather approaching him one day. She claims that he caught her eye which baffled younger Asher. Long story short, they became an item and Heather transformed him. She changed him, inside and out. Gone was the shy boy and emerged from his ashes was this suave lad. Asher loved it. He loved Heather.

the bad: Blinded by his feelings for her, Asher didn't see that Heather was also a bad influence on him. Heather taught him how to smoke cigarettes, Asher found that he didn't like it, but he did so anyway just to please her; took him to parties practically every evening; encouraged him to shoplift with her; and lastly, she taught him how to do drugs... though the most he did was a browniepot. Drugs were the reason why they broke up. She was pushing him smoke some weed, but Asher refused. It was like he saw the light and saw how much of a bad influence Heather had been in his life. He was awakened from the daydream with a slap. Asher broke up with her. Heather was like drug. She made him high (literally), but was very bad for him.

aftermath: That was the last Asher saw of Heather. Two days after they broke up, Ash found out that Heather moved out. He didn't know the reason why, all he thought was 'good riddance.' Yet, despite knowing how much of a bad influence Heather was, Asher still found himself missing her. Heather may have been bad but he had still undeniably developed feelings for her. He found himself unable to let go. Ash thought that maybe distracting himself with a new girl would help him move on, thus, his flirtatious persona came to bloom. Alas, it didn't work. Asher found himself unable to commit to another girl and another relationship. He missed Heather. When he found that the buddies he met thanks to that stupid chair at school were planning to go on a road trip to where Heather lived, Asher found himself agreeing to go as well. For Heather.


❭❱ RELATIONSHIPS
father: Jonathan Fay
mother: Victoria Fay (née Desroisiers)
ex-girlfriend: Heather Clarke

want a relationship with Ash? pm me c:


❭❱ APPEARANCE

hair: Brown

eyes: Green

height: 5'8"

weight: 138 lbs


Asher is a handsome boy who attracts a fair number of women with his looks. His family members have often commented on how he looked a lot like his father. He got inherited most of his traits from his father, the only thing he really did inherit from his mother were her ears. Asher has fluffy straight brown hair which he likes to keeps combed to one side. His eyes are pale green colour with flecks of brown in them, making some people mistake them as brown or hazel under certain lighting. He stands at a height of 5'8", and weighs approximately 138 lbs.


❭❱ MISCELLANEOUS
beat-boxing: Can he beat-box? Oh yes he can! Beat-boxing is Asher's hidden talent. Ever since he learned the concept of beat-boxing and tried it out himself, he found that he could do it. It's something that he doesn't show around others, only his close friends and cousins. Not many can appreciate how he's able to beat-box--even his former girlfriend wasn't able to appreciate it.

turtles & tortoises: Ash has a certain fondness for the shelled creatures. He doesn't know why he likes them, he just does.

smoking: His ex-girlfriend, Heather, taught him how to but he doesn't particularly like it. He only ever did it to please Heather. However, even after the break up, Asher still carries in his bag with him a box of cigarettes and a lighter. Despite him not liking it, Asher finds that the act helps him calm down and thus turns to it whenever he's immensely stressed.



q1jTmIn.png
0yuBmhX.png
 
Last edited: