Y2k pink, myspace, tumblr, vibes <33

Leave the credits, the code is posted below on a link to CodePen

Untitled

Untitled

New wallpost code!

Coloured Haze: Wallpost Code

Here’s to all those weirdo layouts I am absolutely in love with. I’m back with a brand-new wallpost, and wouldn’t ya know it, I’m obsessed. It’s heavily inspired by a Carrd design I found on Pinterest, although I have added my own touches and edits.

As usual, WoX wallposts are supremely finnicky, so against my wishes, I must advise not to play around with the layout and code unless you know exactly what you’re doing. The code is commented throughout, and I’ve also included instructions on how to easily change the colour scheme of the wallpost.

Please don’t steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!

I made two versions, partially to test out the very editing instructions I’ve included in the code, so here you go!

Codepen: Sunset Haze Code

Codepen: Bluebell Haze Code

[Where dreams…] - WALLPOST

Hey guys!

I’m not feeling super well today, so this is going to be a bit shorter than usual.
Still, I wanted to share something I worked on.

I made three new wallposts, all with the same base but in different color schemes, so you can pick whatever fits your vibe best:

○ V.I (purple)
○ V.II (grey)
○ V.III (red)

As always, feel free to change things around and customize them. Just keep in mind that big structural changes can break the code on WoX sites, so tweak carefully.

Hope one of them is useful for you or your characters.
Take care and happy RP ✨

Trix [Darcy] - Article/Lesson Code

TRIX [DARCY] - ARTICLE/LESSON

Hello there!
I am way to tired to write a lot of text here, so we keep it short, ok?
I had a request for an article code. And I asked her, if I am allowed to share the code - she said yes - so I changed the colors and added Darcy ;D

The code is responsive and you can use it for an article and also for your lessons~
Like always: play with the colors ;D

Timewoven: Backstory Code

Tada! My best work yet! This code might not look like much, but I’m extremely proud of it, not least because I changed directions halfway through on how to code it, and had to revamp the whole thing.

It’s a backstory code in the form of a vertical timeline, more for people who want to showcase multiple events rather than describe the character’s life in long paragraphs. The backstory starts on a simple name/image page, but as you scroll, a spine appears, with cards (events) appearing to either side.

The main aspect of this code is the ease of editing though. A few variables in the beginning of the code, and you can change everything from font to layout to colours.

• Each event is assigned its own theme (which are, again, defined at the very top)
• The themes decide the card’s colour, and the colour of the part of the spine it corresponds to.
• Since the cards aren’t directly connected to the spine, coloured circles correspond to the card’s place on the timeline, with an icon inside.
• Hovering makes the card and its corresponding icon-circle to glow, so its easy to tell which icon belongs to which card.
• The cards have options for titles, subtitles, dates, and participant orbs.
• Participant orbs are little circular images at the bottom of the card that showcase people that particular event may have involved or been connected to. They can be turned into links, should someone wish to link them to user profiles.

Please don’t steal my credits, but go ahead an add your own! I would also love to see any versions anyone makes!

Since I particularly wanted to display the flexibility of the design, I’ve made two versions, both linked below.

Codepen: Timewoven Cloud Nine Code
Codepen: Timewoven Glitch Code

Inkbound: Article Code

I am back from a vacation, a cold, and a very long dilemma (of deciding what to code) with… this!

It’s a very overly-neat-newspaper coded design, and it can be used as both an article or a book. Essentially, it has a page system for books, and the comments (very extensively) explain how to remove the page-ification to turn it into an article.

It’s extremely easy to use and edit:

• Change three variables at the beginning of the CSS (the section in the markers) as explained in the comments to change the entire colour scheme
• use tags to make things stand out or divide boxes into different sections, as explained in the comments
• Also explained in the comments (how very surprising), is how the page and box system works (including the alternating sizes and how to override them)

If I missed anything, rest assured, they’re explained in the comments :D

Please don’t steal my credits (feel free to add your own, though), and go forth and ✨edit✨

Codepen: Inkbound Article Code

brought a kiss to the knife fight ♡

– wallpost

someone (jokingly but like i was in dire need of being told what to do i have way too many wips 😔✋) asked me to make another wallpost and i’m nothing if not ready to make wallpost codes all day every day (still struggling hard with making them but f it we ball)

this is a wallpost meant for the introduction of a character! i originally made it for my main wox char izekiel (come say hello if you’re on WoO DE <3) since he’s recently gotten a new job on site and a new introduction wp was loooong overdue, but i’m still sharing it since i’m pretty happy with it!

here’s another version of the code!

this code has:
♡ loads and loads of images, including a header, three header pics, one section with four images, one with three big images and one with five more pics.
♡ a lot of space for writing! you get three boxes that you can write as much as you want in, the height adjusts automatically.
♡ space for two quotes
as always: don’t put breaks in the code, only use <br> or other html tags or else it’ll mess up the spacing, wallposts are fragileeee - also, the pics have to fit the ratio (e.g. 100px width, 100px height) or else they might warp. AND if you use tags like <b> or <i> - remember to change the font-colour to the original colour or else wox darkmode will override the colour.

the code looks a bit different in codepen (like the images in the preview of v2) but the preview-vid is what it looks like on site!

one more note for v1 of this code:
if you switch out the fontmeme link, you have to adjust the margin-top of the following div due to the decorative thingy that the font has. just change the “margin-top:-80px” to something along the lines of -20px (whatever fits your font). if you are struggling with that, you can just use V2 of the code!

aaand that is it!
please read my pinned post for my toa and leave the credits, like, please, just leave em.
you can find this code via this link:
V1: wp – brought a kiss to the knife fight
V2: XIX v2 - wp. for my next trick i need a gun

and if you do end up using it, please feel free to show me your version! i’m always happy to see people using my codes u guys <3

XIX - wp. brought a kiss to the knife fight

look hot, be cold - backstory

definitely didn’t forget to go to sleep because i was busy making this, liar, liar told you that 😔✋
i desperately needed to reset my brain since I’ve spent the last few weeks obsessively watching edits of my two pretty hockey gays (ilya rozanov just one chance pls) so i did the only sane thing and started a rewatch of winx club as one does

orginally started making this code with the vibes of my dnd character killian valencia-covington in mind (because i’m very proud of myself for not full on dying in our last session and actually being useful for once, look at me go), but switched themes halfway through. but look at him you guys, i love this diva (he’s the worst rogue alive and should be in prison and also threatened a god last session (again))

OKAY, enough with the yapping, back to the actual code!
this is another backstory code with pretty little character cards that enable you to give the reader some short info on the characters important to your ocs backstory. i love doing that for my own wox ocs, so i’m just putting it into all of my backstory codes atp lol - you can easily remove the overlay and just keep the images tho if you don’t want the character info!
i put a lot of comments into the code itself to make it easier to edit - but it’s pretty simple, all in all. most of the questions are answered in either the code or my pinned tumblr posts, but if you ever need help, feel free to hit me up. <3
i made two versions with slightly different layouts so you can go and pick your preferred one!

you can find the codes via these links:
Icy version: XVIII v1. - bs. turn it around, wicked witch (i’m brainrotted beyond help or redemption)
Bloom version: XVIII v2. - bs. ofc fairies are real i exist you guys!!!!

leave the credits or else… idk what else i’m busy watching heated rivalry i won’t be doing anything lol
just leave them though! <3 it took a lot of work and brainrot to make these codes trust me

have fun editing, mwah mwah mwah! if you do end up using one of the codes, feel free to tell me, I’d love to see your version! it honestly makes me so incredibly happy to see my codes on wox sites you guys, i love you <3

XVIII v2. - bs. ofc fairies are real i exist you guys!!!!

XVIII v1. - bs. flip it around, wicked witch (i’m brainrotted beyond help or redemption)

SAKURA - PROFILE CODE

Hey guys 🌸

I only disappeared for a few hours and re-emerged covered in cherry blossoms, silk textures, and way too many gradients … and honestly? Worth it. Finally something that feels more like me. Most of the time I prefer structured layouts. The last code I did was way to overstimulating for me. I already hate it HAHAHA.

I’ve been itching to finally do a Japanese-inspired layout, and this one kind of poured out of me once I let myself lean into it.
Yes, I know - Where Winds Meet is technically Chinese - but I’ve been playing it lately and it completely rewired my brain into “soft fabric, lethal grace, poetic violence” mode. And once that door was open… well. Here we are.

On top of that:
Memoirs of a Geisha has been living rent-free in my head since forever.
It’s one of my favorite books.
The movie absolutely wrecked me as a kid (in the best way).
And I even had a hand-painted geisha on my wall back then - which explains a lot about my lifelong aesthetic choices, frankly.

Technically speaking:

✦ CSS-only theming via variables
✦ Fixed header + scrollable content (no awkward cut-offs)
✦ Relations that can actually hold long RP text without breaking the layout
✦ Zero unnecessary JS drama - just clean grid, flex, and intentional overflow

Here’s the code:
🌸 Sakura
https://codepen.io/mahricodes/pen/ByKXzBo?editors=1000

Steal it.
Re-theme it.
Turn it into something entirely unrecognizable.

Just don’t remove the credits.
And if it sparks something in you - tell people I exist.

apple strawberry shortcake - club code

a couple of really cool people asked me if this code is free to use so i got my lazy butt up and finally reworked it look at me being productive

okay, so: not so new code! i’m currently working on fixing up and improving the codes i made back when i was practicing coding for the first time - and this club code is one of them! it’s simple and not perfect like- at all but it IS cutesy af (in my own personal humble opinion)

the updates i made for this code are:
- better scrollbar (the old one was blocky and didn’t work well with the rounded corners) it was kinda defying gravity and stuff
- variables instead of a bunch of hex codes
- fixed pngs
- scrollable textblocks
- and a bunch of little fixes!

with this code, you get four pages: one introduction, rules, space for information and a page for your club and team members! there’s also this little apple thingy (you can switch out the png by just removing the background of a picture of your choice and adding it in - i’ve added some advice on how to do that into the code).
I’ve also made another version to show the versatility of this code!

the code is tested on site and has a little thingy where the first name of the user reading the code appears in the welcome message (the video was made with the code uploaded on site, that is why it says Zarek - that name will appear as the users name instead <3).

you can find this code via this link: VII - club. apple strawberry shortcake
version 2: VII - club. version 2 - where’s your whimsy bro

as always: keep the credits and i’ll keep my composure. you can of course change the font and colour to match your aesthetic, just keep them visible!
go read the instructions in the code before you start editing - if you still have any questions, feel free to ask, i can totally help and i don’t bite!
and if you actually end up using this code please please show it to me, seeing people use my codes makes me so unbelievably happy you guys ily

kisses, love u all!
empyrean

VII - club. apple strawberry shortcake

Hyperfixations are all fun and games until it’s all you wanna do haha. Another wallpost code :)
This one was inspired by the beautiful article code I shared earlier from @rising-mooncat <3 Not gonna lie, I really like that one! Even though I’m not entirely happy with the spacing.

Please don’t remove credits if you use it :)

Golden Academia

I did it!! My first PT :DD
It’s quite simple and I had a little bit of help from a friend to figure out the issue I had with it for two days haha. It’s not half as amazing as all the other PT codes on here, but I like it :>

Please don’t remove the credits if you use it!

traveller in the woods pt fixed

Hello everyone! It’s been a while again, but i present you a new wallpost code!
Unfortunately rounded corners don’t work on wox walls apparently, I’m so sad about that - that was the whole idea that started this code! Haha. The images attached are what it looks like posted!

Please don’t remove credits if you use it <3

daughter of the moon

Running through a library~~

and working in my dream workplace… but yeah an ARTICLE CODE.

Yeah, i’ve decided to post the codes that i’ve created over the past weeks and this works for the blog too and any article you want to create.

Dont touch the credits and im maybe going to clean it up. dont know when though. But if you habe questions, something isnt working, then write me per tumblr or my discord.

Have fun with this library aesthetic <3

running through a library

Colorless Fun <3

is that???? yes a new code O.O

Ehh yeah, its grey and there are no buttons. You can scroll nearly everything.

Leave the credits and have fun.

colorless fun

do re mi fa so done with u - profile text

…because of course i made another pt. i love making pts bro
I originally made this one for my WoO EU character Loretta! It’s a cd case turned profile text cuz my little rock star brat needs a music themed pt to match… well, everything about her.
this is another version of the code - it’s pretty versatile, you can match it perfectly to ur desired aesthetic!

I put one big block of instructions in the code, pls read them if you use it, I promise it will make the editing process easier! I’ve added explanations on everything that is a bit more complicated, but if you still have any questions, feel free to DM me.
since this code is music based, there are loads of embedded spotify players! besides that, this code is a bit more simple, but i personally still really really like it (was doubting myself hard halfway through, but the vision kinda worked out in the end lol)
AS ALWAYS - if you use this code on site, save it straightaway without leaving the source tab, don’t look at it or click through it in the preview before saving - that might break the code, WoX is weird about that.
you can find this code on my codepen: XIII - pt. do re mi fa so done with u
follow the instructions given in the code - especially the “not removing the credits”-part, pretty please - and you’ll be golden! and, if you actually end up using this code, feel free to show your version to me, i’d love to see it.
kisses!

XIII - pt. do re mi fa so done with u

source? divine intuition, bro
- profile text

i was actually planning on waiting a bit before posting again cuz i didn’t want to spam you guys with codes - however, i have recently finished this profile text, and honestly, after thinking it over, I just decided to post it anyways. look at it! i was inspired by yonaka’s “call me a saint” and ofc pinterest, and i don’t know, i’m kinda in love. like, bro, that’s my child right there, i want to show it off.
all in all it’s… simple? i honestly don’t know what qualifies as simple and what doesn’t, but i’m still kinda new to coding and honestly winging it 99% of the time, which means none of my codes are perfect or incredibly elaborate, lol
now, this code has loads of space for information and images, six pages + a cover page and, in lack of a better word, a big circle. you can add images as the background in there, however, most importantly, the main information for each and every page can be displayed, too. There is also a hover-effect, where the overlay with the text fades away and the circle shows off the image! also, there’s a cute little gradient moment going on there, making the image “fade” into its border.
I’ve added loads of instructions to the code to make it easier to edit!

I’ve also made two other versions, just to play around with the colours for a bit and to show off how versatile this pt really is:

it’s perfect for everyone that loves to add loooads of images (me. it’s me. i love pretty pictures)!
if you have any questions or something breaks, feel free to reach out to me!
AS ALWAYS - if you use this code on site, save it straightaway without leaving the source tab, don’t look at it or click through it in the preview before saving - that might break the code, WoX is weird about that.
you can find this code here:
XI - PT. source? divine intuition.
follow the instructions - especially the “not removing the credits”-part, pretty please - and you’ll be golden! and, if you actually end up using this code, feel free to show your version to me, i would LOVE to see it.

XI - PT. source? divine intuition.

Lesson Codes ;D

Hey everyone,

Had about an hour to kill before real life responsibilities kick back in, so I decided to do something creative again. I’ve been trying my best to stick to my new rule: keep layout codes for classes or articles as simple as humanly possible (for the sake of everyone’s sanity ).

Since a lot of people still struggle with adding CSS into HTML properly, I did it this time for you. In the future, I’ll make sure it’s even easier to understand, promise! ;’)

The layout itself is totally up for repurposing - feel free to twist it however you want. It’s super mobile friendly (because honestly, who doesn’t check stuff on their phone these days) and I played around a lot with transparency, so all you really need to do is change the main color. Boom, aesthetic achieved.

> Lesson of joy
> Lesson of wine
> Lesson of venus

playin’ with matches - profile text

guess who’s (already) back? back again? shady’s back, tell a friend…
also, i’m back. which is not as great as shady being back but also okay. i guess.

today i am bringing you another one of my codes! this is a profile text with loads (like loads) of pictures and not that much text - perfect for all the lazy people!
with this code, u get one big front picture (with a kinda cool blur effect), an about page with space for short facts and a written introduction which can be as long (or short) as you want. you also get a personality page with traits that can be displayed with pretty percentages and… more pictures (i love pictures, my faceclaims have incredible face cards okay). the appearance page has some short facts and looooads of pictures, same goes for the aesthetics page and then you also get a relations page. with loads of pictures. like… eight pictures per relation. i love pictures.
there’s also some cute hover effects where images change when hovering over them and there’s some space for nice little quotes!
all in all, it’s pretty simple i guess, however, i myself really love this profile text, which is why i wanted to share it with u guys (also, i’m trying my best to post here on the regular lol)

AS ALWAYS - if you use this code on site, save it straightaway without leaving the source tab, don’t look at it or click through it in the preview before saving - that might break the code, WoX is weird about that.

you can find this code by clicking on this link: X - PT. playin’ with matches
enjoy! and if u need any help with editing or have any problems with the code, feel free to hit me up <3

X - PT. playin’ with matches