made this for something random, but feel free to use this for whatever and customize it if you want !

succulents

& a subheader

In botany, succulent plants, also known as succulents, are plants that have some parts that are more than normally thickened and fleshy, usually to retain water in arid climates or soil conditions. The word "succulent" comes from the Latin word sucus, meaning juice, or sap.[1] Succulent plants may store water in various structures, such as leaves and stems. Some definitions also include roots, thus geophytes that survive unfavorable periods by dying back to underground storage organs may be regarded as succulents. In horticultural use, the term "succulent" is sometimes used in a way which excludes plants that botanists would regard as succulents, such as cacti. Succulents are often grown as ornamental plants because of their striking and unusual appearance.

Many plant families have multiple succulents found within them (over 25 plant families).[2] In some families, such as Aizoaceae, Cactaceae, and Crassulaceae, most species are succulents. The habitats of these water preserving plants are often in areas with high temperatures and low rainfall. Succulents have the ability to thrive on limited water sources, such as mist and dew, which makes them equipped to survive in an ecosystem which contains scarce water sources.

Code:

<link href="https://fonts.googleapis.com/css?family=Amatic+SC|Charmonman" rel="stylesheet"> [style] .succ {background: #ccc url('https://i.imgur.com/iZVlLO3.jpg') bottom center no-repeat; padding: 20px; border: 20px solid #e8e0e6; margin: auto; height: 300px;} .succ1 {padding: 20px; text-align: justify; color: #837e79; background-color: #ffffff85; font-family: arial; font-size: 10px; margin: auto; overflow: auto; height:87%; margin-left: 50%; position: relative; top: -70px;} .succh1 {font-family: charmonman; font-size: 30px; color: #fff; position: relative; width: 50%; text-align: center; top: 220px;} .succh2 {font-family: Amatic SC; font-size: 20px; letter-spacing: 1px; color: #fff9; position: relative; text-transform: uppercase; top: 210px; width: 50%; text-align: center;}[/style] <div class="succ"><div class="succh1">header/name</div><div class="succh2">& a subheader</div><div class="succ1">text here</div></div>

simple little code that's f2u! quote for code because i'm lazy lmao <3

bay-bee pink !

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Etiam luctus nisi vel massa ultrices pretium. Quisque et enim in velit aliquam pellentesque nec ut lorem. Integer eget libero luctus, condimentum orci convallis, imperdiet ipsum. Duis pellentesque, nibh et luctus dictum, est nunc finibus metus, in porttitor dolor lacus ut mi. In volutpat rhoncus suscipit. Phasellus scelerisque sapien ut iaculis feugiat. Praesent tempus ultrices ante, et luctus purus sollicitudin interdum. Vivamus malesuada magna sit amet elit condimentum fringilla.

"Aenean tortor neque, consequat at condimentum sit amet, ornare ac mauris. Donec scelerisque imperdiet ligula, ac sollicitudin risus condimentum id."

Pellentesque sollicitudin semper commodo. Cras vel ullamcorper felis. Suspendisse at tellus eu ligula aliquet ornare. Donec interdum dolor nec nunc scelerisque, efficitur commodo lorem suscipit. Nunc at tortor ac sapien elementum pellentesque. Fusce et tincidunt diam. Aenean interdum viverra lacus, eu blandit enim venenatis eu. Sed eget ligula gravida, luctus justo sit amet, tristique augue. Donec scelerisque ex risus, nec laoreet sem rhoncus nec. Ut sed semper diam. In volutpat convallis enim sit amet porttitor.

How to use jcink tables on Origin:

If you like table premades such as the ones from Caution to the Wind, here is how to easily convert them for use on Origin.

Let's look at this one, by CTTW user Blitzy.

Code:

[dohtml]<center>

<div class="blitzpoutline">

<img src="IMAGE URL GOES HERE" width="300" />
<div class="blitzplyricst">Love is a polaroid</div>
<div class="blitzplyricsb">I'm a day late two face I'm a burnout quick pace I am a headcase I am the color of boom that's never arriving  and you are the opera always on time and on tune and I am the color of boom all my life I've been living in the fast lane can't slow down I'm a rolling freight train one more time gotta start all over can't slow down I'm a lone red rover</div>

Post goes here.  Don't forget to use <p> tags to separate paragraphs

<a href="http://cttw.jcink.net/index.php?showuser=1845"><div class="blitzpcreditsl">Tag // Words // Notes</div></a>

</div>

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed|Alegreya' rel='stylesheet' type='text/css'>
&lt;style type="text/css"&gt;
.blitzpoutline { width: 300px; background-color: #FDFDFD; border: 1px #EAEAEA solid; padding: 20px; line-height: 107%; text-align: justify; font-size: 12px; font-family: calibri; color: #0F0F0F; }
.blitzplyricst { margin-top: 15px; margin-bottom: 10px; text-align: center; text-transform: lowercase; text-shadow: 1px 1px #030303; font-size: 35px; font-family: alegreya; font-style: italic; font-weight: 900; color: #a2223e; }
.blitzplyricsb { margin-bottom: 10px; line-height: 106%; text-transform: uppercase; font-size: 10px; font-family: oswald; color: #3D3D3D; }
.blitzpcreditsl { background-color: #a2223e; padding-top: 4px; padding-bottom: 4px; text-align: center; text-transform: uppercase; font-size: 10px; font-family: open sans condensed; color: #FEFEFE; }
.blitzpcreditsl a { color: #FEFEFE; }
&lt;/style></center>[/dohtml]

Three things to note:
1. We do not need [dohtml] -- Delete those tags.
2. We use bbcode style (square brackets) and not 'style type'.
3. Remove all of the linbreaks in the CSS.

Change the code to look like this (note you are mostly changing the way the css looks):

Code:

<center>

<div class="blitzpoutline">

<img src="IMAGE URL GOES HERE" width="300" />
<div class="blitzplyricst">Love is a polaroid</div>
<div class="blitzplyricsb">I'm a day late two face I'm a burnout quick pace I am a headcase I am the color of boom that's never arriving  and you are the opera always on time and on tune and I am the color of boom all my life I've been living in the fast lane can't slow down I'm a rolling freight train one more time gotta start all over can't slow down I'm a lone red rover</div>

Post goes here.  Don't forget to use <p> tags to separate paragraphs

<a href="http://cttw.jcink.net/index.php?showuser=1845"><div class="blitzpcreditsl">Tag // Words // Notes</div></a>

</div>

<link href='https://fonts.googleapis.com/css?family=Open+Sans+Condensed|Alegreya' rel='stylesheet' type='text/css'>
[style].blitzpoutline { width: 300px; background-color: #FDFDFD; border: 1px #EAEAEA solid; padding: 20px; line-height: 107%; text-align: justify; font-size: 12px; font-family: calibri; color: #0F0F0F; } .blitzplyricst { margin-top: 15px; margin-bottom: 10px; text-align: center; text-transform: lowercase; text-shadow: 1px 1px #030303; font-size: 35px; font-family: alegreya; font-style: italic; font-weight: 900; color: #a2223e; } .blitzplyricsb { margin-bottom: 10px; line-height: 106%; text-transform: uppercase; font-size: 10px; font-family: oswald; color: #3D3D3D; } .blitzpcreditsl { background-color: #a2223e; padding-top: 4px; padding-bottom: 4px; text-align: center; text-transform: uppercase; font-size: 10px; font-family: open sans condensed; color: #FEFEFE; } .blitzpcreditsl a { color: #FEFEFE; } [/style]</center>

Tada! See below.

Love is a polaroid

I'm a day late two face I'm a burnout quick pace I am a headcase I am the color of boom that's never arriving and you are the opera always on time and on tune and I am the color of boom all my life I've been living in the fast lane can't slow down I'm a rolling freight train one more time gotta start all over can't slow down I'm a lone red rover

Post goes here. Don't forget to use

tags to separate paragraphs

Tag // Words // Notes

hmmmmmm meh lol as always feel free to do w/e
if you want to use outside of origin please link to this post, ty!

the berth surrounding my body
crushing every bit of bone

name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nisl at ex lacinia, vitae cursus tortor pellentesque. Fusce vel risus dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eros quam, molestie quis nulla vitae, tincidunt fermentum sapien. Morbi in suscipit nunc, semper fringilla nulla. Morbi sed imperdiet mi. Phasellus ac lacus tincidunt ex efficitur lacinia. Nulla laoreet magna vel tincidunt cursus. Proin ligula sapien, efficitur quis odio non, viverra pretium odio. In vulputate ipsum porttitor, vehicula tortor sed, facilisis neque. Curabitur luctus massa elit, sed sagittis neque dignissim hendrerit. Curabitur ultricies nulla nulla, in convallis dui faucibus ac. Maecenas malesuada placerat libero nec maximus. Praesent dapibus sagittis libero, at suscipit felis dictum eu.


"Pellentesque quis porta mi." Nam tempus quis elit et laoreet. Integer aliquam commodo fringilla. Nullam sed odio eu tortor commodo mattis id at nisl. Nulla ut gravida lectus, nec porta nisi. Sed sed justo vel libero pharetra cursus in ut augue. Vivamus vitae pharetra nisl, non molestie eros.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Suspendisse porta nisl at ex lacinia, vitae cursus tortor pellentesque. Fusce vel risus dolor. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Maecenas eros quam, molestie quis nulla vitae, tincidunt fermentum sapien. Morbi in suscipit nunc, semper fringilla nulla. Morbi sed imperdiet mi. Phasellus ac lacus tincidunt ex efficitur lacinia. Nulla laoreet magna vel tincidunt cursus. Proin ligula sapien, efficitur quis odio non, viverra pretium odio. In vulputate ipsum porttitor, vehicula tortor sed, facilisis neque. Curabitur luctus massa elit, sed sagittis neque dignissim hendrerit. Curabitur ultricies nulla nulla, in convallis dui faucibus ac. Maecenas malesuada placerat libero nec maximus. Praesent dapibus sagittis libero, at suscipit felis dictum eu.

Pellentesque quis porta mi. Nam tempus quis elit et laoreet. Integer aliquam commodo fringilla. Nullam sed odio eu tortor commodo mattis id at nisl. Nulla ut gravida lectus, nec porta nisi. Sed sed justo vel libero pharetra cursus in ut augue. Vivamus vitae pharetra nisl, non molestie eros.

i wait on you inside
the bottom of the deep blue sea

Code:

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap" rel="stylesheet"> <div style="margin: auto; width: 400px; background-image: url('https://i.imgur.com/zCc8o2k.jpg'); padding: 100px; background-position: top; background-size: 1500px; border: 40px solid #132533;">
<div style="font-family: bebas neue, sans-serif; font-size: 50px; color: #fff; width: 600px; position: relative; left: -100px; top: -50px; line-height: 40px; text-align: center; cursor: default;">the berth surrounding my body<br/>crushing every bit of bone</div><div style="font-family: bebas neue, sans-serif; font-size: 50px; color: #fff; width: 600px; position: absolute; left: -70px; top: 275px; text-align: right; cursor: default;">name</div><div style="background-color: #081219e6; padding: 40px; overflow-y: auto; scrollbar-width: thin; max-height: 400px; color: #bdc3c7; text-align: justify; font-size: 11px;"> your posts here. <span style="color: #fff; font-weight: bold;">"speaking"</span>

<br/>&nbsp;</div>
<div style="font-family: bebas neue, sans-serif; font-size: 50px; color: #fff; width: 600px; position: relative; left: -100px; bottom: -50px; line-height: 40px; text-align: center; cursor: default;">i wait on you inside<br/>the bottom of the deep blue sea</div></div>

--

as css/html
CHANGE "NAME" TO YOUR CHARACTERS NAME

Code:

[style] @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); .NAME-bg {margin: auto; width: 400px; background-image: url('https://i.imgur.com/zCc8o2k.jpg'); padding: 100px; background-position: top; background-size: 1500px; border: 40px solid #132533;} .NAME-lytop {font-family: bebas neue, sans-serif; font-size: 50px; color: #fff; width: 600px; position: relative; left: -100px; top: -50px; line-height: 40px; text-align: center; cursor: default;} .NAME-lybottom {font-family: bebas neue, sans-serif; font-size: 50px; color: #fff; width: 600px; position: relative; left: -100px; bottom: -50px; line-height: 40px; text-align: center; cursor: default;} .NAME-nm {font-family: bebas neue, sans-serif; font-size: 50px; color: #fff; width: 600px; position: absolute; left: -70px; top: 310px; text-align: right; cursor: default;} .NAME-txt {background-color: #081219e6; padding: 40px; overflow-y: auto; scrollbar-width: thin; max-height: 400px; color: #bdc3c7; text-align: justify; font-size: 11px;} .NAME-txt>b {color: #fff;} .NAME-txt>i {color: #fff9;}[/style]

Code:

<div class="NAME-bg">
<div class="NAME-lytop">the berth surrounding my body<br/>crushing every bit of bone</div><div class="NAME-nm">name</div><div class="NAME-txt">post here

<br/>&nbsp;</div>
<div class="NAME-lybottom">i wait on you inside<br/>the bottom of the deep blue sea</div></div>

Modern Memo

Is a super simplistic, customizable table for all your IC and OOC needs. Yes, I made the name up on the spot. It has a few associated codes: <'b'> and <'i'> are colored, and there's also <'tle'> for titles or headings. You may notice there's dropdown codes included but I don't recommend using them since they're clunky as hell and only look good in certain contexts lol

You can put the smaller version (see below) in here like some weird nesting doll

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin neque tellus, cursus in nisl nec, cursus mollis dolor. Nulla a porta mauris. Fusce quis magna massa. Pellentesque ligula urna, egestas a hendrerit id, imperdiet quis sapien. Nam rhoncus lacus eu neque ultrices eleifend. Duis pretium justo sed nisi varius, vitae semper enim eleifend. Nulla nec interdum nibh. 'Sed ullamcorper mi dictum est vestibulum facilisis.' Donec sit amet orci leo. Nunc aliquet sollicitudin neque, vitae lobortis sem vulputate vel.

"Integer interdum, lectus sit amet porttitor venenatis, felis augue congue magna, vitae sagittis nulla ex in ipsum." Praesent vitae tellus sed quam tempor laoreet quis vitae massa. Donec lectus turpis, ornare ac diam eget, porta congue dui. Sed ullamcorper scelerisque eros id condimentum. Curabitur ut lacus lacinia, bibendum purus et, fermentum urna.

Code:

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Antic+Slab&display=swap" rel="stylesheet">[style] .mod {background: #fff; width: 600px; border-left: 5px solid #HEX;  text-align: justify; margin: auto; color: #383838; box-shadow: 7px 7px 10px #ebebeb;} .mod summary {color: #383838; font-family: 'Nanum Gothic', sans-serif;} .mod details {color: #383838; font-family: 'Nanum Gothic', sans-serif;} .mod>p {padding: 20px; font-family: 'Nanum Gothic', sans-serif;} .mod>p b {color: #HEX;} .mod>p i {color: #HEX;} .mod>p tle {color: #HEX; font-size: 15px; font-weight: bold; font-family: 'Antic Slab', serif;}[/style]

Code:

<div class="mod"><p>Your post here.</p></div>

Heres a smaller version, if you wanna use it in a profile or just like tiny codes!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Proin neque tellus, cursus in nisl nec, cursus mollis dolor. Nulla a porta mauris. Fusce quis magna massa. Pellentesque ligula urna, egestas a hendrerit id, imperdiet quis sapien. Nam rhoncus lacus eu neque ultrices eleifend. Duis pretium justo sed nisi varius, vitae semper enim eleifend. Nulla nec interdum nibh. 'Sed ullamcorper mi dictum est vestibulum facilisis.' Donec sit amet orci leo. Nunc aliquet sollicitudin neque, vitae lobortis sem vulputate vel.

"Integer interdum, lectus sit amet porttitor venenatis, felis augue congue magna, vitae sagittis nulla ex in ipsum." Praesent vitae tellus sed quam tempor laoreet quis vitae massa. Donec lectus turpis, ornare ac diam eget, porta congue dui. Sed ullamcorper scelerisque eros id condimentum. Curabitur ut lacus lacinia, bibendum purus et, fermentum urna.

Code:

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Nanum+Gothic&display=swap" rel="stylesheet"><link href="https://fonts.googleapis.com/css2?family=Antic+Slab&display=swap" rel="stylesheet">[style] .pmod {background: #fff; width: 480px; border-left: 5px solid #HEX;  text-align: justify; margin: auto; color: #383838; box-shadow: 7px 7px 10px #ebebeb;} .pmod summary {color: #383838; font-family: 'Nanum Gothic', sans-serif;} .pmod details {color: #383838; font-family: 'Nanum Gothic', sans-serif;} .pmod>p {padding: 20px; font-family: 'Nanum Gothic', sans-serif;} .pmod>p b {color: #HEX;} .pmod>p i {color: #HEX;} .pmod>p tle {color: #HEX; font-size: 14px; font-weight: bold; font-family: 'Antic Slab', serif;}[/style]

Code:

<div class="pmod"><p>Your post here.</p></div>

name here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec est vitae ligula varius tempus sit amet eu nisi. Suspendisse lacinia, augue eget aliquam feugiat, sapien justo varius enim, nec vestibulum sapien orci in arcu. Nulla vestibulum augue ac nibh pharetra, a rutrum augue tincidunt. Quisque ornare vel justo et posuere. Proin tristique sit amet erat vel lacinia. Mauris nibh ante, bibendum eget augue eu, malesuada sagittis risus. Integer feugiat hendrerit eleifend. Sed mi leo, luctus at lorem at, vulputate efficitur neque.

Nulla consequat ipsum nec mi viverra, ut vestibulum massa sodales. Curabitur vestibulum ullamcorper pellentesque. Proin convallis fringilla ex, lobortis vulputate leo auctor et. Sed varius tortor vitae nunc efficitur, et consequat lacus maximus. Mauris porttitor, sem in hendrerit ultrices, tellus elit efficitur mi, rutrum vulputate sapien erat sed ante. Aliquam tincidunt diam malesuada erat maximus dignissim. Cras vel commodo ipsum. Suspendisse potenti. Donec mollis scelerisque commodo. Vestibulum vel odio felis. Proin arcu risus, tristique et semper eget, euismod vitae risus. Vestibulum pellentesque faucibus nibh, quis tristique nulla maximus ac. Nam bibendum at sapien vitae malesuada. Aliquam egestas aliquam venenatis. Integer rutrum non mi a euismod.

Maecenas ultricies neque lacus, vel fermentum tortor tincidunt et. Aenean sollicitudin purus vel odio ultricies, vel ultricies mauris dignissim. Nunc feugiat blandit ex non finibus. Praesent viverra egestas lacus, eget finibus nisl iaculis eget. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Vivamus non metus vitae purus mollis congue et nec velit. Nam tempor, lacus id convallis facilisis, lorem ante pulvinar risus, nec scelerisque elit sem vitae ante.

Integer sed tristique mi, sit amet tincidunt urna. Suspendisse potenti. Proin id ornare arcu. Ut tincidunt tortor velit, a accumsan tellus tempor nec. Aliquam gravida aliquet ipsum ac scelerisque. Integer fermentum eros ut est fermentum tincidunt. Suspendisse ipsum quam, ornare quis molestie a, bibendum quis libero. Sed fermentum eros sed libero faucibus placerat. Integer sit amet nunc tortor. Suspendisse in turpis vitae risus egestas bibendum. Phasellus posuere tincidunt felis nec aliquet. In tristique molestie ligula.

some days, some nights, some live, some die
in the way of the samurai
some fight, some bleed, sun up to sun down
the sons of a battlecry

Code:

[style]  @import url('https://fonts.googleapis.com/css2?family=La+Belle+Aurore&display=swap'); .wheat1 {background: #ada9a5 url('https://img.nickpic.host/ljG1xd.png') no-repeat center bottom; width: 600px; padding: 80px 40px 40px 40px; border: 5px solid #fff; box-shadow: 0 0 10px #0003; color: #fff; margin: auto;} .wheat1 p {padding: 20px; border: 1px solid #fff; color: #fff; font-size: 10px; letter-spacing: 1px; font-family: times; line-height: 20px; text-align: justify; background-color: #7d79739e;} .wheatpic {width: 100px; height: 100px; margin-top: -40px; margin-right: -30px; float: right; border: 1px solid #fff; background-color: #ddd; border-radius: 100px; background-image: url('https://img.nickpic.host/ljGJqG.png'); box-shadow: 0 0 10px #fff;} .wheatname {font-family: 'La Belle Aurore', cursive; font-size: 50px;text-shadow: 0 0 10px #fff;color: #fff;float: left;position: relative;top: -23px;margin-bottom: -70px;left: 50px; cursor: default;} .wheatly {font-family: 'La Belle Aurore', cursive; font-size: 30px;text-shadow: 0 0 10px #fff;color: #fff; text-align: center; cursor: default; margin-top: 40px;} [/style]

Code:

<div class="wheat1"><div class="wheatpic"></div><div class="wheatname">name here</div><p> post here </p><div class="wheatly">lyrics</div></div>

A hover table code for all those big, massive images you have! Refreshed for the modern era, after I brought that godawful code from like 2012 here.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tincidunt euismod. Ut quis dui efficitur, dignissim urna vel, eleifend neque. Maecenas pellentesque gravida sem vel auctor. Etiam vel erat at quam sollicitudin varius id nec tellus. Sed laoreet efficitur ligula, at finibus nunc. Nunc justo lacus, mattis ac dignissim sit amet, faucibus in ipsum. Aenean finibus ante eget iaculis imperdiet. Donec id mauris at massa condimentum malesuada eget vitae nisi. Sed et semper odio. Integer bibendum odio nec nunc semper, suscipit porta nisi convallis. Maecenas quis odio vestibulum, maximus justo vitae, dignissim sapien. Suspendisse rhoncus nunc quis mattis sagittis. Sed fermentum tortor quam, vel scelerisque eros rhoncus nec. Morbi egestas auctor turpis, in volutpat dui pellentesque auctor.

Integer orci metus, lacinia vel nibh in, scelerisque sagittis purus. Pellentesque dictum facilisis fermentum. Donec commodo commodo arcu blandit convallis. Proin cursus sit amet tortor vitae hendrerit. Phasellus tincidunt tincidunt posuere. Donec ac lobortis sem, et tincidunt elit. Morbi gravida eros in dui volutpat congue. Duis ut vestibulum sapien. Proin porttitor ultricies rutrum. Cras ut purus auctor, convallis magna non, maximus risus. Morbi non nisi eros. Etiam accumsan nisl ut magna tempor lacinia. Curabitur suscipit enim in neque auctor imperdiet. Cras sed sollicitudin dolor. Proin eget aliquam tortor, in convallis leo.

Vivamus ut congue sem, vitae volutpat neque. Suspendisse tincidunt blandit lorem in mollis. Morbi nec nunc tincidunt, auctor augue eu, gravida ligula. Ut eu tincidunt purus. Sed ac velit massa. Aenean hendrerit tempor lacus, ac elementum nibh. Donec vulputate libero tincidunt sollicitudin rhoncus. Suspendisse sollicitudin lectus mi, vitae eleifend libero venenatis condimentum. Pellentesque rhoncus aliquam erat sed tincidunt. Nunc nibh dui, rhoncus nec pharetra id, gravida ut tortor. Donec venenatis tortor nulla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. In congue tincidunt euismod. Ut quis dui efficitur, dignissim urna vel, eleifend neque. Maecenas pellentesque gravida sem vel auctor. Etiam vel erat at quam sollicitudin varius id nec tellus. Sed laoreet efficitur ligula, at finibus nunc. Nunc justo lacus, mattis ac dignissim sit amet, faucibus in ipsum. Aenean finibus ante eget iaculis imperdiet. Donec id mauris at massa condimentum malesuada eget vitae nisi. Sed et semper odio. Integer bibendum odio nec nunc semper, suscipit porta nisi convallis. Maecenas quis odio vestibulum, maximus justo vitae, dignissim sapien. Suspendisse rhoncus nunc quis mattis sagittis. Sed fermentum tortor quam, vel scelerisque eros rhoncus nec. Morbi egestas auctor turpis, in volutpat dui pellentesque auctor.

Integer orci metus, lacinia vel nibh in, scelerisque sagittis purus. Pellentesque dictum facilisis fermentum. Donec commodo commodo arcu blandit convallis. Proin cursus sit amet tortor vitae hendrerit. Phasellus tincidunt tincidunt posuere. Donec ac lobortis sem, et tincidunt elit. Morbi gravida eros in dui volutpat congue. Duis ut vestibulum sapien. Proin porttitor ultricies rutrum. Cras ut purus auctor, convallis magna non, maximus risus. Morbi non nisi eros. Etiam accumsan nisl ut magna tempor lacinia. Curabitur suscipit enim in neque auctor imperdiet. Cras sed sollicitudin dolor. Proin eget aliquam tortor, in convallis leo.

Vivamus ut congue sem, vitae volutpat neque. Suspendisse tincidunt blandit lorem in mollis. Morbi nec nunc tincidunt, auctor augue eu, gravida ligula. Ut eu tincidunt purus. Sed ac velit massa. Aenean hendrerit tempor lacus, ac elementum nibh. Donec vulputate libero tincidunt sollicitudin rhoncus. Suspendisse sollicitudin lectus mi, vitae eleifend libero venenatis condimentum. Pellentesque rhoncus aliquam erat sed tincidunt. Nunc nibh dui, rhoncus nec pharetra id, gravida ut tortor. Donec venenatis tortor nulla.

The code below is rather bare-bones; it'll be up to you to add any styling, customization, etc. (Our CSS/HTML Guides and the website W3Schools are very helpful for this!)

This is what you'll paste in your Signature (via your UCP) and tick off the "Enable For All Posts" button:

Code:

[style] .char-bg {margin:auto; width:600px; height:600px; background:url('DIRECT LINK HERE') no-repeat;} .char-box {padding:50px; height:500px; background:rgba(20,20,20,.7); opacity:0; transition:0.8s linear;} .char-box:hover {opacity:1;} .char-box > n {display:block; padding:0 25px 0 0; height:500px; overflow:auto; text-align:justify; scrollbar-width: thin; scrollbar-color: #HEXCODE #HEXCODE;} .char-box > n::-webkit-scrollbar {width:5px;} .char-box > n::-webkit-scrollbar-track {background:#HEXCODE;} .char-box > n::-webkit-scrollbar-thumb {background:#HEXCODE;} [/style]

... and this is what you'll use for making actual posts:

Code:

<div class="drac-bg"><div class="drac-box"><n>Blargh!</n></div></div>

Some things to note about this code:

1. Make sure that you change all instances of char to your character's name so that it doesn't conflict and eat other people's code!
   
   
2. The first color in scrollbar-color will be the button (that you click) and the second will be the track. This is all the compatability Firefox has for custom scrollbar coding lol
   
   
3. Watch your padding! Feel free to change the width and height of the .char-bg class, but make sure that you subtract 100px from the height of .char-box when you do change it.

Have fun!

For those of you looking for something clean to use for your more orderly characters, here's a paragraph table for y'all! You're free to change it however you see fit.

At Mother's movement, Pallas gingerly stepped forward, leaning into her touch and rumbling. The movement- it meant more than any parsed emotion could, filling his head with love compounded. 'Thank you, Mother,' he purred in his mind, his breathing deep as love and grief swirled together.

For her, he would be proud. He would be confident. Stepping back, Pallas waited and watched the Praetors, tail twitching as he turned to follow. It certainly wasn't hard to understand that he should ride one- and with Butler there, it was easy to know what steed he would choose. There was a practiced, quick climb up the designated Praetor's side, resulting in Pallas nestling in just behind Butler's head, resting on the thorax where he typically stayed during their travels.

Once he'd settled his paws comfortably onto Butler, he nodded. "I am ready."

Normal text. "Speaking text." 'Thinking text.'

Code:

<link rel="preconnect" href="https://fonts.gstatic.com"><link href="https://fonts.googleapis.com/css2?family=Benne&display=swap" rel="stylesheet">
[style].order {background: url("https://cdn.discordapp.com/attachments/501974279127171074/854678646588702790/possessed-photography-vi0wfknF46M-unsplash.png") center; background-size:cover; text-align: justify; font-size: 14px; border: 2px solid #525d73; padding: 25px 30px 25px 30px; width: 575px; margin: auto; color: #f3f7ff; font-family: 'Benne', serif;}
.order p {background:url("https://cdn.discordapp.com/attachments/501974279127171074/854680428848873482/gdfg.png"); padding: 15px 20px 15px 20px; border-radius:50px; -webkit-box-shadow: 0px 0px 19px 19px rgba(127,130,148,0.8); box-shadow: 0px 0px 19px 19px rgba(127,130,148,0.8);}
.order thk {color: #d9e3f6; font-weight:bold; font-style: italic;}
.order spk {color: #f3f7ff; font-weight: bold;}[/style]

In addition: a battle report!

ROUND 1/3

100%

ATTEMPT: attack!!
DEFENSE: defense? naw
INJURIES: oof owiee

Code:

[style].battlehead {width: 25%; border-radius: 10px;text-align: center; font-family: raleway; font-weight: bold; font-size; 15px; letter-spacing: 2px; color: #5a5a5a; margin-bottom: -5px; margin: auto;} .battlepost {border-radius: 8px; background-color: #f5f5f5; padding:10px; margin:auto; width:350px; text-align:justify;}[/style]

<div class="battlehead">ROUND /
[hp=100]</div><div class="battlepost">
<b>ATTEMPT:</b>
<b>DEFENSE:</b>
<b>INJURIES:</b> </div>

somebody once told me
that there's two sides to this life, what's yours?

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." Curabitur nec est vitae ligula varius tempus sit amet eu nisi. Suspendisse lacinia, augue eget aliquam feugiat, sapien justo varius enim, nec vestibulum sapien orci in arcu. Nulla vestibulum augue ac nibh pharetra, a rutrum augue tincidunt. Quisque ornare vel justo et posuere. Proin tristique sit amet erat vel lacinia. Mauris nibh ante, bibendum eget augue eu, malesuada sagittis risus. Integer feugiat hendrerit eleifend. Sed mi leo, luctus at lorem at, vulputate efficitur neque.

Sed quis mollis mauris. Nulla fringilla quam odio, at eleifend mi volutpat sit amet. Ut sagittis quam at eros accumsan tempor. Morbi blandit nisi vitae ipsum accumsan pretium. Sed fermentum ultrices rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas maximus nulla arcu, eu sollicitudin turpis gravida eu. Cras maximus mauris quam. Pellentesque ac ante in mauris venenatis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam imperdiet justo eu viverra fringilla.

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." Curabitur nec est vitae ligula varius tempus sit amet eu nisi. Suspendisse lacinia, augue eget aliquam feugiat, sapien justo varius enim, nec vestibulum sapien orci in arcu. Nulla vestibulum augue ac nibh pharetra, a rutrum augue tincidunt. Quisque ornare vel justo et posuere. Proin tristique sit amet erat vel lacinia. Mauris nibh ante, bibendum eget augue eu, malesuada sagittis risus. Integer feugiat hendrerit eleifend. Sed mi leo, luctus at lorem at, vulputate efficitur neque.

Sed quis mollis mauris. Nulla fringilla quam odio, at eleifend mi volutpat sit amet. Ut sagittis quam at eros accumsan tempor. Morbi blandit nisi vitae ipsum accumsan pretium. Sed fermentum ultrices rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas maximus nulla arcu, eu sollicitudin turpis gravida eu. Cras maximus mauris quam. Pellentesque ac ante in mauris venenatis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam imperdiet justo eu viverra fringilla.

take it away, my head is in its own hell
sing to me, i am not doing well

Code:

[style] .pcon p {text-align: justify; color: #333; background-color: #d5d5d5d6; padding: 20px; margin:auto; font-size: 10px;letter-spacing: 1px;line-height: 15px;font-family: source sans pro; max-height: 400px; overflow-x: auto; scrollbar-width: thin; scrollbar-color: #9e3b3b transparent;} .pcon p::-webkit-scrollbar {width:5px;} .pcon p::-webkit-scrollbar-track {background:transparent;} .pcon p::-webkit-scrollbar-thumb {background:#9e3b3b;} .pcon p b {color: #931919;font-weight: normal; text-shadow: 0 0 5px #f2a3a3;} .pcon p i {color: #b05f5f;}  @import url('https://fonts.googleapis.com/css2?family=Bebas+Neue&display=swap'); .ptit1 {font-family: bebas neue; font-size:30px; text-align: right; line-height: 25px; margin-bottom: 2px;} .ptit2 {font-family: bebas neue; font-size:30px; text-align: left; line-height: 25px; margin-top: 5px;} .pcon {width: 500px; margin:auto; background: url('https://origin.boreal-nights.space/images/cjtables/mountains1.png') no-repeat bottom center; padding: 100px 50px; color: #fff; border: 30px solid #b6bcbc;}[/style]

Code:

<div class="pcon">
<div class="ptit1">lyrics top</div>
<p> post here <b>"speech"</b> <i>thinking</i> </p>
<div class="ptit2">lyrics bottom</div>
</div>

i really like this one without a border but the border code is in there if you want to use it. suggest 10px but whatever you like

oh i love it and i hate it at the same time
hiding all of our sins from the daylight

"Lorem ipsum dolor sit amet, consectetur adipiscing elit." Curabitur nec est vitae ligula varius tempus sit amet eu nisi. Suspendisse lacinia, augue eget aliquam feugiat, sapien justo varius enim, nec vestibulum sapien orci in arcu. Nulla vestibulum augue ac nibh pharetra, a rutrum augue tincidunt. Quisque ornare vel justo et posuere. Proin tristique sit amet erat vel lacinia. Mauris nibh ante, bibendum eget augue eu, malesuada sagittis risus. Integer feugiat hendrerit eleifend. Sed mi leo, luctus at lorem at, vulputate efficitur neque.

Sed quis mollis mauris. Nulla fringilla quam odio, at eleifend mi volutpat sit amet. Ut sagittis quam at eros accumsan tempor. Morbi blandit nisi vitae ipsum accumsan pretium. Sed fermentum ultrices rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas maximus nulla arcu, eu sollicitudin turpis gravida eu. Cras maximus mauris quam. Pellentesque ac ante in mauris venenatis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam imperdiet justo eu viverra fringilla.

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Curabitur nec est vitae ligula varius tempus sit amet eu nisi. Suspendisse lacinia, augue eget aliquam feugiat, sapien justo varius enim, nec vestibulum sapien orci in arcu. Nulla vestibulum augue ac nibh pharetra, a rutrum augue tincidunt. Quisque ornare vel justo et posuere. Proin tristique sit amet erat vel lacinia. Mauris nibh ante, bibendum eget augue eu, malesuada sagittis risus. Integer feugiat hendrerit eleifend. Sed mi leo, luctus at lorem at, vulputate efficitur neque.

Sed quis mollis mauris. Nulla fringilla quam odio, at eleifend mi volutpat sit amet. Ut sagittis quam at eros accumsan tempor. Morbi blandit nisi vitae ipsum accumsan pretium. Sed fermentum ultrices rhoncus. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Maecenas maximus nulla arcu, eu sollicitudin turpis gravida eu. Cras maximus mauris quam. Pellentesque ac ante in mauris venenatis dapibus. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Nullam imperdiet justo eu viverra fringilla.

character name

Code:

[style] /* image credit: https://unsplash.com/photos/a-black-and-white-photo-of-trees-in-the-snow-RRKmDxkeIs0 */ @import url('https://fonts.googleapis.com/css2?family=Lora:ital,wght@0,400;0,500;0,600;0,700;1,400;1,500;1,600;1,700&display=swap'); .winter-daylight {width: 360px; background: #1d2435 url('https://origin.boreal-nights.space/images/cjtables/winter1.png') center no-repeat; margin: auto; padding: 60px; border: 0px solid #1a2030;} .winter-daylight p {background-color: #1a1e2ef5; padding: 0 30px; color: #d9e5f2; margin: auto; text-align: justify; max-height: 500px; overflow: auto; scrollbar-width: thin; scrollbar-color: #51637e transparent; font-family: lora;} .winter-daylight p::-webkit-scrollbar {width:5px;} .winter-daylight p::-webkit-scrollbar-track {background:transparent;} .winter-daylight p::-webkit-scrollbar-thumb {background:#51637e;} .winter-daylight p b {font-weight: 600;color:#fcfcfe; text-shadow: 0 0 3px #51637e;} .winter-daylight p i {color:#fcfcfe;} .winter-daylight .ly {background-color: #1a1e2ef5; padding: 30px; color: #fff; font-family:lora; text-align:center; font-style: italic; font-size:10px;}[/style]

<div class="winter-daylight">
<div class="ly">oh i love it and i hate it at the same time<br/>hiding all of our sins from the daylight</div>
<p>post <b>"talk"</b> <i>think</i></p>
<div class="ly" style="letter-spacing: 2px;">character name</div>
</div>