Resource ❀ — 𝗍𝗁𝖾 𝖼𝗈𝖽𝖾 𝗀𝖺𝗋𝖽𝖾𝗇 ( 𝗋𝖾𝗂𝗇𝗏𝖾𝗇𝗍𝖾𝖽! )

[natasha.]

THE CODE GARDEN

hello! i'm nat and i'm back with a new thread to offer free codes! these will be more compatible with the original bbcode that was in place before the introduction of bbcode+ (hopefully) and will also likely be more mobile friendly, compared to older codes of mine!

now, just a bit of a preface but you'll have to bear with me since certain aspects of some of the codes will be limited, and unfortunately, because of the nobr tag being removed, all the text is going to be bunched together since line breaks will space things out and make it all look wonky.

everything here is free to use and you're always welcome to reach out with questions if you have any! i'm trying to remember as much as i can about what will and won't work once bbcode+ is gone so if i make any mistakes that you catch, please do let me know about those too! we could all do with a little learning. (:

i will also be putting credit for all these codes so please make sure to keep that on there when using any of these!

thanks for stopping by!

 

[natasha.]

01. DAFFODILS

first code!! this is an in character code that i came up with while testing what would and wouldn't work. it's got a scrollbar and a small strip to put your details such as mentions, location, mood, etc.

you can replace the images by looking for the links and editing in the links for your images! the colour of the strip can easily be changed, though keep in mind that changing the font might result in a bit of wonky spacing between the boxes!

i know it might be hard to locate things with everything so close together but for the sake of preserving the appearance of the code, please try not to add line breaks in between the code!

this is, to my knowledge, mobile friendly! if it isn't visible on your phone though, let me know. please also feel free to reach out if you have any questions/comments/concerns!

CHARACTER NAME

tags, location, outfit etc. this little bar is also scrollable!

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum sed enim eget commodo. Vivamus ut facilisis lectus. Aliquam dictum euismod odio, vel imperdiet sem tincidunt sit amet. Nam euismod eu nibh sed pellentesque. Curabitur ac velit justo. Mauris non libero felis. Praesent eu tempor arcu, sit amet tristique libero.

Sed sed metus condimentum, faucibus orci vel, fringilla metus. Phasellus porta rutrum sagittis. Mauris libero dui, congue ac pharetra eget, accumsan ac felis. Vivamus laoreet at neque et tristique. Aliquam ac venenatis nisl, et tincidunt lacus. Duis at nisi ut ante volutpat venenatis at in erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque accumsan metus cursus urna blandit tempus. Mauris hendrerit vitae diam quis facilisis. Pellentesque ac nibh id ex volutpat mollis in ut dui. Aliquam condimentum tincidunt dui, nec molestie dui vulputate vel. Suspendisse varius in tortor vitae tempor. Proin sit amet ante imperdiet, aliquam dui et, suscipit ante. Fusce dignissim nulla vitae sapien auctor, a ultricies lacus malesuada. Aliquam ut ante eu mauris viverra porttitor. Sed at turpis eu ex interdum mattis.

Maecenas accumsan nunc ut lectus tincidunt, quis congue neque tincidunt. Proin efficitur maximus ligula, ac auctor felis gravida a. Morbi a varius quam, ac rutrum erat. Donec varius nisi ut arcu porta, in tincidunt ex dictum. Sed lacus arcu, semper eu eros eu, sagittis feugiat enim. Vestibulum vitae tellus in magna aliquet cursus. Sed pellentesque malesuada purus, eget bibendum justo gravida ac. Ut in aliquet velit, nec gravida neque. Integer vitae consectetur magna. Duis scelerisque maximus interdum. Integer placerat aliquet consectetur. Curabitur urna ante, blandit at mollis ac, tristique at eros. Proin malesuada scelerisque ex sed finibus.

Phasellus vitae lectus turpis. Nam in dignissim eros, in convallis diam. Cras vulputate urna non felis venenatis dignissim. Donec vestibulum eleifend eros, eget posuere odio. Mauris vel imperdiet ante. Mauris pellentesque auctor dapibus. Integer at ligula nec erat maximus bibendum. Praesent faucibus nunc tellus, in egestas lorem vulputate vitae. Proin sapien nunc, dictum vitae dui rutrum, finibus ultrices neque. Fusce varius metus magna, in varius nulla eleifend sit amet. Nulla rhoncus euismod condimentum. Sed id quam dictum, pulvinar turpis eu, ultrices nisi.

Fusce sit amet risus rutrum, lobortis tellus id, viverra sapien. Mauris suscipit mi vitae metus maximus, ut imperdiet urna commodo. Suspendisse ut pharetra risus, sed fermentum risus. Donec feugiat, velit sed mattis commodo, mi arcu sodales lorem, sit amet efficitur tortor turpis non turpis. Nullam bibendum volutpat euismod. Nulla sit amet sapien at tortor suscipit dapibus eu quis felis. Phasellus faucibus, libero ac scelerisque bibendum, dolor lectus aliquet ante, eu volutpat urna nisi sit amet justo. Nulla sed ultrices nunc. Nulla faucibus nulla ut velit volutpat, nec viverra erat aliquet. Praesent leo lectus, interdum vitae metus non, congue malesuada nisl. Nunc a vulputate risus. Nunc scelerisque erat aliquet mauris dignissim finibus. Donec accumsan fermentum hendrerit.

coded by natasha.

Spoiler: code

[bg=transparent; max-width: 800px; margin: auto; background: #f4f4f4; padding: 20px; font-size: 12px; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important;][row]
[column=span2][bg=transparent; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; height: 150px; background-position: 50% 50%; border: 10px solid #fff;][/bg]
[bg=transparent; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; height: 150px; background-position: 50% 50%; border: 10px solid #fff;][/bg]
[bg=transparent; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; height: 150px; background-position: 50% 50%; border: 10px solid #fff;][/bg][/column][column=span6][bg=transparent; line-height: 22px; font-size: 50px; color: #000; padding: 10px; text-align: center;][font=Abril Fatface]CHARACTER NAME[/font][/bg]
[bg=transparent; background: #dec254; color: #dec254; padding: 10px;][scroll=15px][color=#fff]tags, location, outfit etc. this little bar is also scrollable![/color][/scroll][/bg]
[bg=transparent; background: #fff; color: #fff; padding: 10px; border: 1px solid #eee; line-height: 22px;][scroll=450px][justify][color=#000]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum sed enim eget commodo. Vivamus ut facilisis lectus. Aliquam dictum euismod odio, vel imperdiet sem tincidunt sit amet. Nam euismod eu nibh sed pellentesque. Curabitur ac velit justo. Mauris non libero felis. Praesent eu tempor arcu, sit amet tristique libero.

Sed sed metus condimentum, faucibus orci vel, fringilla metus. Phasellus porta rutrum sagittis. Mauris libero dui, congue ac pharetra eget, accumsan ac felis. Vivamus laoreet at neque et tristique. Aliquam ac venenatis nisl, et tincidunt lacus. Duis at nisi ut ante volutpat venenatis at in erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque accumsan metus cursus urna blandit tempus. Mauris hendrerit vitae diam quis facilisis. Pellentesque ac nibh id ex volutpat mollis in ut dui. Aliquam condimentum tincidunt dui, nec molestie dui vulputate vel. Suspendisse varius in tortor vitae tempor. Proin sit amet ante imperdiet, aliquam dui et, suscipit ante. Fusce dignissim nulla vitae sapien auctor, a ultricies lacus malesuada. Aliquam ut ante eu mauris viverra porttitor. Sed at turpis eu ex interdum mattis.

Maecenas accumsan nunc ut lectus tincidunt, quis congue neque tincidunt. Proin efficitur maximus ligula, ac auctor felis gravida a. Morbi a varius quam, ac rutrum erat. Donec varius nisi ut arcu porta, in tincidunt ex dictum. Sed lacus arcu, semper eu eros eu, sagittis feugiat enim. Vestibulum vitae tellus in magna aliquet cursus. Sed pellentesque malesuada purus, eget bibendum justo gravida ac. Ut in aliquet velit, nec gravida neque. Integer vitae consectetur magna. Duis scelerisque maximus interdum. Integer placerat aliquet consectetur. Curabitur urna ante, blandit at mollis ac, tristique at eros. Proin malesuada scelerisque ex sed finibus.

Phasellus vitae lectus turpis. Nam in dignissim eros, in convallis diam. Cras vulputate urna non felis venenatis dignissim. Donec vestibulum eleifend eros, eget posuere odio. Mauris vel imperdiet ante. Mauris pellentesque auctor dapibus. Integer at ligula nec erat maximus bibendum. Praesent faucibus nunc tellus, in egestas lorem vulputate vitae. Proin sapien nunc, dictum vitae dui rutrum, finibus ultrices neque. Fusce varius metus magna, in varius nulla eleifend sit amet. Nulla rhoncus euismod condimentum. Sed id quam dictum, pulvinar turpis eu, ultrices nisi.

Fusce sit amet risus rutrum, lobortis tellus id, viverra sapien. Mauris suscipit mi vitae metus maximus, ut imperdiet urna commodo. Suspendisse ut pharetra risus, sed fermentum risus. Donec feugiat, velit sed mattis commodo, mi arcu sodales lorem, sit amet efficitur tortor turpis non turpis. Nullam bibendum volutpat euismod. Nulla sit amet sapien at tortor suscipit dapibus eu quis felis. Phasellus faucibus, libero ac scelerisque bibendum, dolor lectus aliquet ante, eu volutpat urna nisi sit amet justo. Nulla sed ultrices nunc. Nulla faucibus nulla ut velit volutpat, nec viverra erat aliquet. Praesent leo lectus, interdum vitae metus non, congue malesuada nisl. Nunc a vulputate risus. Nunc scelerisque erat aliquet mauris dignissim finibus. Donec accumsan fermentum hendrerit.[/color][/justify][/scroll][/bg]
[/column]
[/row]
[bg=transparent; font-size: 11px; color: #aaa; text-align: center;]coded by natasha.[/bg][/bg]

 

[leviathan.]

gasp. i love it already. stunning >:0

 

[natasha.]

gasp. i love it already. stunning >:0

that emoticon is everything but also ty ilu

 

[ameuSHhen1Tn2ba]

As always, still a coding queen. Should I expect anything less than pure talent?

 

[natasha.]

As always, still a coding queen. Should I expect anything less than pure talent?

kajshdkasjh why do u make me blush so much omg :') but thank you so much for believing in me no pressure at all

 

[AnimeGenork]

already 100% better than anything I've ever done, I bow to the true master *kowtows*

 

[yousmelldead]

Q U E E N !

 

[natasha.]

already 100% better than anything I've ever done, I bow to the true master *kowtows*

pffft that is a lie but you flatter me askdjahsd tysm

 

[natasha.]

Q U E E N !

UR MY QUEEN

 

[natasha.]

02. CHERRY BLOSSOMS

here's another in character code that was working on to replace some of the ic codes i have in several ongoing rps! i was able to replicate an old code i made using bbcode+ but it wasn't hard to shift over to original bbcode!

you can replace the images by looking for the links and editing in the links for your images! the colours and fonts can all be changed according to your preference.

once again, locating things in the code might be difficult because it's all too close together but if you need any help at all, please feel free to reach out!

this is, to my knowledge, mobile friendly! if it isn't visible on your phone though, let me know. please remember not to remove the credit either!

character name

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum sed enim eget commodo. Vivamus ut facilisis lectus. Aliquam dictum euismod odio, vel imperdiet sem tincidunt sit amet. Nam euismod eu nibh sed pellentesque. Curabitur ac velit justo. Mauris non libero felis. Praesent eu tempor arcu, sit amet tristique libero.

Sed sed metus condimentum, faucibus orci vel, fringilla metus. Phasellus porta rutrum sagittis. Mauris libero dui, congue ac pharetra eget, accumsan ac felis. Vivamus laoreet at neque et tristique. Aliquam ac venenatis nisl, et tincidunt lacus. Duis at nisi ut ante volutpat venenatis at in erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque accumsan metus cursus urna blandit tempus. Mauris hendrerit vitae diam quis facilisis. Pellentesque ac nibh id ex volutpat mollis in ut dui. Aliquam condimentum tincidunt dui, nec molestie dui vulputate vel. Suspendisse varius in tortor vitae tempor. Proin sit amet ante imperdiet, aliquam dui et, suscipit ante. Fusce dignissim nulla vitae sapien auctor, a ultricies lacus malesuada. Aliquam ut ante eu mauris viverra porttitor. Sed at turpis eu ex interdum mattis.

Maecenas accumsan nunc ut lectus tincidunt, quis congue neque tincidunt. Proin efficitur maximus ligula, ac auctor felis gravida a. Morbi a varius quam, ac rutrum erat. Donec varius nisi ut arcu porta, in tincidunt ex dictum. Sed lacus arcu, semper eu eros eu, sagittis feugiat enim. Vestibulum vitae tellus in magna aliquet cursus. Sed pellentesque malesuada purus, eget bibendum justo gravida ac. Ut in aliquet velit, nec gravida neque. Integer vitae consectetur magna. Duis scelerisque maximus interdum. Integer placerat aliquet consectetur. Curabitur urna ante, blandit at mollis ac, tristique at eros. Proin malesuada scelerisque ex sed finibus.

Phasellus vitae lectus turpis. Nam in dignissim eros, in convallis diam. Cras vulputate urna non felis venenatis dignissim. Donec vestibulum eleifend eros, eget posuere odio. Mauris vel imperdiet ante. Mauris pellentesque auctor dapibus. Integer at ligula nec erat maximus bibendum. Praesent faucibus nunc tellus, in egestas lorem vulputate vitae. Proin sapien nunc, dictum vitae dui rutrum, finibus ultrices neque. Fusce varius metus magna, in varius nulla eleifend sit amet. Nulla rhoncus euismod condimentum. Sed id quam dictum, pulvinar turpis eu, ultrices nisi.

location

info

mood

info

outfit

info

tags

info

coded by natasha.

Spoiler: code

[bg=transparent; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; background: #f6f6f6; padding: 60px 20px 50px 20px; box-sizing: border-box;][bg=transparent; max-width: 1000px; margin: auto; padding: 0px; box-sizing: border-box;][row][column=span2][bg=transparent; padding: 0px; height: 540px; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; background-position: 50% 50%; box-sizing: border-box;][/bg][/column][column=span4][bg=transparent; box-sizing: border-box; padding-top: 15px; height: 100px; color: #fff; background: #e3afbb; margin-bottom: 20px; text-align: center; font-family: Abril Fatface; text-transform: uppercase; font-size: 40px; overflow: hidden;]character name[/bg][bg=transparent; padding: 0px; background: #fff; border: 1px solid #eee; padding: 20px;][bg=transparent; padding: 0px; height: 380px; box-sizing: border-box; overflow-y: auto; line-height: 22px; color: #999; font-size: 12px; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc elementum sed enim eget commodo. Vivamus ut facilisis lectus. Aliquam dictum euismod odio, vel imperdiet sem tincidunt sit amet. Nam euismod eu nibh sed pellentesque. Curabitur ac velit justo. Mauris non libero felis. Praesent eu tempor arcu, sit amet tristique libero.

Sed sed metus condimentum, faucibus orci vel, fringilla metus. Phasellus porta rutrum sagittis. Mauris libero dui, congue ac pharetra eget, accumsan ac felis. Vivamus laoreet at neque et tristique. Aliquam ac venenatis nisl, et tincidunt lacus. Duis at nisi ut ante volutpat venenatis at in erat. Vestibulum ante ipsum primis in faucibus orci luctus et ultrices posuere cubilia curae; Quisque accumsan metus cursus urna blandit tempus. Mauris hendrerit vitae diam quis facilisis. Pellentesque ac nibh id ex volutpat mollis in ut dui. Aliquam condimentum tincidunt dui, nec molestie dui vulputate vel. Suspendisse varius in tortor vitae tempor. Proin sit amet ante imperdiet, aliquam dui et, suscipit ante. Fusce dignissim nulla vitae sapien auctor, a ultricies lacus malesuada. Aliquam ut ante eu mauris viverra porttitor. Sed at turpis eu ex interdum mattis.

Maecenas accumsan nunc ut lectus tincidunt, quis congue neque tincidunt. Proin efficitur maximus ligula, ac auctor felis gravida a. Morbi a varius quam, ac rutrum erat. Donec varius nisi ut arcu porta, in tincidunt ex dictum. Sed lacus arcu, semper eu eros eu, sagittis feugiat enim. Vestibulum vitae tellus in magna aliquet cursus. Sed pellentesque malesuada purus, eget bibendum justo gravida ac. Ut in aliquet velit, nec gravida neque. Integer vitae consectetur magna. Duis scelerisque maximus interdum. Integer placerat aliquet consectetur. Curabitur urna ante, blandit at mollis ac, tristique at eros. Proin malesuada scelerisque ex sed finibus.

Phasellus vitae lectus turpis. Nam in dignissim eros, in convallis diam. Cras vulputate urna non felis venenatis dignissim. Donec vestibulum eleifend eros, eget posuere odio. Mauris vel imperdiet ante. Mauris pellentesque auctor dapibus. Integer at ligula nec erat maximus bibendum. Praesent faucibus nunc tellus, in egestas lorem vulputate vitae. Proin sapien nunc, dictum vitae dui rutrum, finibus ultrices neque. Fusce varius metus magna, in varius nulla eleifend sit amet. Nulla rhoncus euismod condimentum. Sed id quam dictum, pulvinar turpis eu, ultrices nisi.[/bg][/bg][/column][column=span2][bg=transparent; padding: 0px; height: 160px; margin-bottom: 20px; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; box-sizing: border-box; box-sizing: border-box; background-position: 90% 50%;][/bg][bg=transparent; height: 320px; background: #fff; border: 1px solid #eee; padding: 20px;][bg=transparent; padding: 0px; height: 320px; box-sizing: border-box; overflow-y: auto; color: #999; font-size: 12px; line-height: 22px;][bg=transparent; font-family: Abril Fatface; color: #e3afbb; font-size: 20px; text-transform: uppercase; padding: 0px; margin-bottom: -15px;]location[/bg]
info

[bg=transparent; font-family: Abril Fatface; color: #e3afbb; font-size: 20px; text-transform: uppercase; padding: 0px; margin-bottom: -15px;]mood[/bg]
info

[bg=transparent; font-family: Abril Fatface; color: #e3afbb; font-size: 20px; text-transform: uppercase; padding: 0px; margin-bottom: -15px;]outfit[/bg]
info

[bg=transparent; font-family: Abril Fatface; color: #e3afbb; font-size: 20px; text-transform: uppercase; padding: 0px; margin-bottom: -15px;]tags[/bg]
info[/bg][/bg][/column][/row][/bg][bg=transparent; padding-top: 10px; box-sizing: border-box; font-size: 11px; color: #aaa; text-align: center;]coded by natasha.[/bg][/bg]

 

[natasha.]

03. BLUEBELLS

here's a character sheet code! i made this for a group rp i'm applying for and it's a little long but i kinda like the look of it!

the tags can be customised to fit whatever sheet template you need to use, though i did use font awesome icons on the side of the personality bar to highlight three main personality traits! you can look through font awesome icons and change them to what you think works best.

the colours can be changed as well though you'll need to hunt for the colour's hex code all through the code and change it manually. hunt for the links and you'll be able to change the pictures throughout the sheet!

this is, to my knowledge, mobile friendly! if it isn't visible on your phone though, let me know. please remember not to remove the credit either and feel free to reach out if you need any help with the code, or have any questions/comments/concerns!

full name

info here.

nicknames

info here

age

info here

gender

info here

sexuality

info here

occupation

info here

appearance

info here

trait

trait

trait

personality

lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sagittis massa, id ultrices tortor accumsan eu. Duis mattis metus nisl, sed condimentum nunc congue ac.

likes

lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sagittis massa, id ultrices tortor accumsan eu. Duis mattis metus nisl, sed condimentum nunc congue ac.

dislikes

lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sagittis massa, id ultrices tortor accumsan eu. Duis mattis metus nisl, sed condimentum nunc congue ac.

ailments

lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sagittis massa, id ultrices tortor accumsan eu. Duis mattis metus nisl, sed condimentum nunc congue ac.

a small quote
can come here.

family

lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sagittis massa, id ultrices tortor accumsan eu. Duis mattis metus nisl, sed condimentum nunc congue ac.

background

lorem ipsum dolor sit amet, consectetur adipiscing elit. Ut scelerisque sagittis massa, id ultrices tortor accumsan eu. Duis mattis metus nisl, sed condimentum nunc congue ac.

theme song

info here

misc

info here

coded by natasha.

Spoiler: code

[bg=transparent; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; padding: 20px; background: #fff;][bg=transparent; box-sizing: border-box; padding: 0px; max-width: 600px; margin: auto;][bg=transparent; padding: 0px; height: 200px; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; background-position: 50% 50%; overflow: hidden;][bg=transparent; height: 200px; background: #51a6d6; opacity: 0.6; box-sizing: border-box;][/bg][/bg][bg=transparent; box-sizing: border-box; background: #333; padding: 20px;][bg=transparent; padding: 0px; height: 170px; overflow-y: auto; font-family: Montserrat; color: #eee; font-size: 12px;][bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]full name[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here.[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]nicknames[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]age[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]gender[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]sexuality[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]occupation[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]appearance[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg][/bg][/bg][bg=transparent; padding: 20px 13px 20px 13px; background: #f6f6f6;][row][column=span2][bg=transparent; padding: 0px; position: relative; top: -10px; text-align: center; font-size: 40px; color: #51a6d6;][fa]fal fa-grin[/fa]
[bg=transparent; padding: 0px; font-family: Montserrat; color: #333; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; margin-top: -10px;]trait[/bg]
[bg=transparent; padding: 0px; height: 1px; border-top: 1px dashed #ddd; margin-top: -50px; margin-bottom: -65px;][/bg]
[fa]fal fa-meh[/fa]
[bg=transparent; padding: 0px; font-family: Montserrat; color: #333; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; margin-top: -10px;]trait[/bg]
[bg=transparent; padding: 0px; height: 1px; border-top: 1px dashed #ddd; margin-top: -50px; margin-bottom: -65px;][/bg]
[fa]fal fa-frown[/fa]
[bg=transparent; padding: 0px; font-family: Montserrat; color: #333; letter-spacing: 2px; font-size: 11px; text-transform: uppercase; margin-top: -10px;]trait[/bg][/bg][/column][column=span6][bg=transparent; padding: 0px; height: 280px; overflow-y: auto; font-family: Montserrat; color: #333; font-size: 12px;][bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]personality[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]likes[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]dislikes[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]ailments[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg][/bg][/column][/row][/bg][bg=transparent; padding: 40px; background: #51a6d6; box-sizing: border-box;][row][column=span5][bg=transparent: padding: 0px; margin-right: 30px; text-align: center;]
[bg=transparent; padding: 0px; font-size: 40px; color: #fff; margin-top: -30px;][fa]fas fa-quote-left[/fa][/bg]
[bg=transparent; padding: 0px; font-size: 20px; color: #fff; font-family: Montserrat; margin-top: -10px; margin-bottom: -10px;]a small quote
can come here.[/bg]
[bg=transparent; padding: 0px; font-size: 40px; color: #fff;][fa]fas fa-quote-right[/fa][/bg][/bg][/column][column=span3][bg=transparent; padding: 0px; box-sizing: border-box; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; background-position: 50% 50%; border: 10px solid #fff; height: 250px;][/bg][/column]
[/row][/bg][bg=transparent; box-sizing: border-box; background: #333; padding: 20px;][bg=transparent; padding: 0px; height: 170px; overflow-y: auto; font-family: Montserrat; color: #eee; font-size: 12px;][bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]family[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]background[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]theme song[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg]

[bg=transparent; padding: 0px; font-size: 15px; margin-bottom: -15px; color: #51a6d6; text-transform: uppercase;]misc[/bg]
[bg=transparent; padding: 0px 0px 0px 25px; text-align: justify; line-height: 22px;]info here[/bg][/bg][/bg][/bg][bg=transparent; padding-top: 10px; font-family: Avenir; box-sizing: border-box; font-size: 11px; color: #aaa; text-align: center;]coded by natasha.[/bg][/bg]

 

[Virus]

Noooooo!!! You're back at it, queen. Why must you make these to beautiful again?

 

[natasha.]

Noooooo!!! You're back at it, queen. Why must you make these to beautiful again?

asdgasd you flatter me, thank you so much

 

[neon reverie]

i adored your codes when you were utilizing bb-code + but these new codes are looking equally as amazing !!
i feel like we are all v lucky to have you here with your coding talent ;u;

 

[natasha.]

i adored your codes when you were utilizing bb-code + but these new codes are looking equally as amazing !!
i feel like we are all v lucky to have you here with your coding talent ;u;

aaah gosh you're too kind. that means so much to me, thank you so much!

 

[Creza11]

I'm so excited to see more that you come up with! The ones you have so far are truly stunning!

 

[natasha.]

I'm so excited to see more that you come up with! The ones you have so far are truly stunning!

aaaah thank you so much!!

My goodness, these are so pretty! Thank you so much

thank you, you're too kind!! i'm glad you like them

 

[natasha.]

04. ROSES

here's an in character code i made recently! this one is [UPDATE!] now mobile friendly!

you can feel free to change the icons on the right to whatever you'd like it to be. that section also scrolls so you can write as much as you want there or add as many icons there as you want!

the colours can be changed as well though you'll need to hunt for the colour's hex code all through the code and change it manually.

please remember not to remove the credit either and feel free to reach out if you need any help with the code, or have any questions/comments/concerns!

character name

the role

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis sapien purus. Integer tincidunt, orci nec finibus elementum, ante erat semper nisi, vel posuere lectus neque rhoncus enim. Proin sollicitudin lobortis rhoncus. Aenean efficitur quis nunc aliquet imperdiet. Ut id dapibus lectus, ornare interdum eros. Vestibulum ex elit, condimentum a tellus quis, varius sollicitudin ligula.

Donec purus quam, commodo ac ipsum et, vulputate vestibulum leo. Sed tristique a quam placerat efficitur. Ut sodales vitae mauris eu molestie. Duis eleifend nulla sit amet aliquet laoreet. Donec malesuada augue vel massa sodales, id luctus odio consequat. Suspendisse arcu felis, efficitur pulvinar ex et, rutrum laoreet eros. Etiam tristique eros rhoncus, euismod sapien at, sagittis tortor.

Proin et lacus feugiat, fringilla tortor a, finibus dui. Integer vitae dignissim ex. Donec convallis erat bibendum, blandit nulla ut, volutpat tortor. Duis egestas eget ipsum non bibendum. Maecenas magna odio, cursus a quam id, elementum ultrices lorem. Morbi dignissim, risus non eleifend finibus, nisl magna lacinia lacus, sed egestas lectus purus a purus. Vestibulum et pretium quam. Nunc pulvinar erat eu sem fermentum, sed varius enim porta. Nunc sed tellus nulla. Mauris eu tempus orci.

Suspendisse auctor, lacus ac faucibus sollicitudin, massa lacus consequat elit, nec congue felis tellus quis sapien. Aliquam posuere ante ac ante congue maximus. Aliquam tristique ex at odio placerat, ac finibus massa sollicitudin. Nullam blandit nisi sem, id venenatis erat iaculis vel. Vestibulum consequat tincidunt rutrum. Curabitur vel odio eu dui viverra maximus. Nam mattis mollis eros, sed porttitor lectus feugiat eu. Nullam faucibus rhoncus ligula, tempor faucibus dolor vestibulum in. Phasellus mollis, lorem bibendum elementum tincidunt, eros tortor fringilla odio, vitae molestie ante risus et tellus. Sed et velit nec est semper dictum quis ac ex. Quisque libero ipsum, feugiat et felis vitae, fringilla euismod metus. Phasellus placerat consequat magna, vel tincidunt ligula pellentesque nec. Ut maximus porttitor lacus eget iaculis. Curabitur vitae ante eros. Cras massa orci, ultrices in risus nec, ullamcorper blandit urna. Nulla vel accumsan dui.

Donec pharetra venenatis augue ut imperdiet. Integer nisi purus, sollicitudin in vulputate eu, blandit nec lacus. Donec ac turpis sit amet sem bibendum semper. Nulla viverra venenatis nunc, vulputate commodo nisl pulvinar non. Mauris fermentum enim vel ipsum aliquam, at varius lectus venenatis. Proin lectus metus, congue eget dolor quis, pulvinar ornare odio. Vivamus suscipit tincidunt nunc. Sed ultricies lectus diam, nec placerat nulla aliquet eu. Fusce bibendum iaculis efficitur. Morbi sit amet lacinia tellus. Mauris a lectus non turpis elementum tempor. Sed dictum orci at magna elementum, a semper libero molestie. Mauris eu accumsan odio.

location info here.

mood info here.

outfit info here.

tags / interactions here

coded by natasha.

Spoiler: code

[bg=transparent; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; padding: 0px 0px 50px 0px; background: #f2f2f2; margin: auto;][bg=transparent; padding: 0px; height: 335px; background: #b04141; position: absolute; width: 100%;][/bg][bg=transparent; padding-top: 60px; max-width: 900px; margin: auto; position: relative;][row][column=span2][bg=transparent; padding: 0px; height: 550px; margin-left: -10px; box-sizing: border-box; border: 10px solid #fff; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; background-position: 50% 50%;][/bg][/column][column=span4][bg=transparent; padding: 20px; box-sizing: border-box; background: #fff; height: 550px; font-size: 12px; color: #333;][row][column=span6][bg=transparent; padding: 0px; font-family: Abril Fatface; color: #333; text-transform: uppercase; font-size: 25px; margin-top: -10px;]character name[/bg][/column][column=span2][bg=transparent; padding: 0px; font-family: Avenir; text-transform: uppercase; color: #b04141; font-size: 14px; text-align: right; letter-spacing: .5px; box-sizing: border-box; padding-top: 1px;]the role[/bg][/column][/row][bg=transparent; padding: 0px; height: 470px; margin-top: 10px; overflow-y: auto; line-height: 22px; text-align: justify;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nam quis sapien purus. Integer tincidunt, orci nec finibus elementum, ante erat semper nisi, vel posuere lectus neque rhoncus enim. Proin sollicitudin lobortis rhoncus. Aenean efficitur quis nunc aliquet imperdiet. Ut id dapibus lectus, ornare interdum eros. Vestibulum ex elit, condimentum a tellus quis, varius sollicitudin ligula.

Donec purus quam, commodo ac ipsum et, vulputate vestibulum leo. Sed tristique a quam placerat efficitur. Ut sodales vitae mauris eu molestie. Duis eleifend nulla sit amet aliquet laoreet. Donec malesuada augue vel massa sodales, id luctus odio consequat. Suspendisse arcu felis, efficitur pulvinar ex et, rutrum laoreet eros. Etiam tristique eros rhoncus, euismod sapien at, sagittis tortor.

Proin et lacus feugiat, fringilla tortor a, finibus dui. Integer vitae dignissim ex. Donec convallis erat bibendum, blandit nulla ut, volutpat tortor. Duis egestas eget ipsum non bibendum. Maecenas magna odio, cursus a quam id, elementum ultrices lorem. Morbi dignissim, risus non eleifend finibus, nisl magna lacinia lacus, sed egestas lectus purus a purus. Vestibulum et pretium quam. Nunc pulvinar erat eu sem fermentum, sed varius enim porta. Nunc sed tellus nulla. Mauris eu tempus orci.

Suspendisse auctor, lacus ac faucibus sollicitudin, massa lacus consequat elit, nec congue felis tellus quis sapien. Aliquam posuere ante ac ante congue maximus. Aliquam tristique ex at odio placerat, ac finibus massa sollicitudin. Nullam blandit nisi sem, id venenatis erat iaculis vel. Vestibulum consequat tincidunt rutrum. Curabitur vel odio eu dui viverra maximus. Nam mattis mollis eros, sed porttitor lectus feugiat eu. Nullam faucibus rhoncus ligula, tempor faucibus dolor vestibulum in. Phasellus mollis, lorem bibendum elementum tincidunt, eros tortor fringilla odio, vitae molestie ante risus et tellus. Sed et velit nec est semper dictum quis ac ex. Quisque libero ipsum, feugiat et felis vitae, fringilla euismod metus. Phasellus placerat consequat magna, vel tincidunt ligula pellentesque nec. Ut maximus porttitor lacus eget iaculis. Curabitur vitae ante eros. Cras massa orci, ultrices in risus nec, ullamcorper blandit urna. Nulla vel accumsan dui.

Donec pharetra venenatis augue ut imperdiet. Integer nisi purus, sollicitudin in vulputate eu, blandit nec lacus. Donec ac turpis sit amet sem bibendum semper. Nulla viverra venenatis nunc, vulputate commodo nisl pulvinar non. Mauris fermentum enim vel ipsum aliquam, at varius lectus venenatis. Proin lectus metus, congue eget dolor quis, pulvinar ornare odio. Vivamus suscipit tincidunt nunc. Sed ultricies lectus diam, nec placerat nulla aliquet eu. Fusce bibendum iaculis efficitur. Morbi sit amet lacinia tellus. Mauris a lectus non turpis elementum tempor. Sed dictum orci at magna elementum, a semper libero molestie. Mauris eu accumsan odio.[/bg][/bg][/column][column=span2][bg=transparent; padding: 40px 20px 20px 20px; margin-right: -10px; box-sizing: border-box; background: #fff; color: #333; font-size: 12px; text-align: center; line-height: 22px; height: 550px;][bg=transparent; padding: 0px; height: 490px; overflow-y: auto;][bg=transparent; padding: 0px; font-size: 25px; color: #b04141; margin-bottom: -10px; margin-top: 2px;][fa]fal fa-map-marker-alt[/fa][/bg]
location info here.
[bg=transparent; padding: 0px; height: 1px; border-top: 1px dashed #ddd; margin-top: 30px; margin-bottom: 10px;][/bg]
[bg=transparent; padding: 0px; font-size: 25px; color: #b04141; margin-bottom: -10px;][fa]fal fa-heartbeat[/fa][/bg]
mood info here.
[bg=transparent; padding: 0px; height: 1px; border-top: 1px dashed #ddd; margin-top: 30px; margin-bottom: 10px;][/bg]
[bg=transparent; padding: 0px; font-size: 25px; color: #b04141; margin-bottom: -10px;][fa]fal fa-tshirt[/fa][/bg]
outfit info here.
[bg=transparent; padding: 0px; height: 1px; border-top: 1px dashed #ddd; margin-top: 30px; margin-bottom: 10px;][/bg]
[bg=transparent; padding: 0px; font-size: 25px; color: #b04141; margin-bottom: -10px;][fa]fal fa-tags[/fa][/bg]
tags / interactions here [/bg][/bg][/column]
[/row][/bg][/bg][bg=transparent; padding-top: 10px; font-family: Avenir; box-sizing: border-box; font-size: 11px; color: #aaa; text-align: center;]coded by natasha.[/bg]

 

[leviathan.]

bro this one pops tf off !!!! love it!!

 

[natasha.]

bro this one pops tf off !!!! love it!!

dkjahsdaksj UR TOO KIND ILU

 

[natasha.]

UPDATE:
the code for roses (ic) has been edited and it is now mobile friendly! ​

 

[natasha.]

05. DUTCH TULIPS

here's another in character code i made for a group rp i'm in! this is mobile friendly, but please let me know if you can't view it on your phone!

you'll need to fiddle with the background-position in the main image at the top since the visibility depends on the picture you use. altering the second vale=ue (the one which is currently at 65%) will get the image to move higher or lower, depending on what percentage you set it to!

you can feel free to change the icons at the bottom for the mood/location/etc, and you can add more tags too! don't worry about writing as little as possible to fit it all because the whole section expands to fit the text so write as much as you want! just keep in mind that the more you write, the longer the entire layout will be.

the colours can be changed as well though you'll need to hunt for the colour's hex code all through the code and change it manually.

please remember not to remove the credit either and feel free to reach out if you need any help with the code, or have any questions/comments/concerns!

character name

the role goes here

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo fringilla turpis quis imperdiet. Aliquam facilisis erat eget massa tempor rutrum. Vestibulum dignissim ligula diam, non convallis mi rutrum ac. Aenean auctor velit at sapien venenatis, eget blandit urna accumsan. Suspendisse aliquam suscipit dui, a iaculis sapien placerat in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae iaculis massa. Maecenas ultricies fermentum aliquam. Sed vitae urna consectetur massa interdum rutrum at eu diam. Nam nec ornare tortor, pellentesque pellentesque nulla. Vestibulum luctus mattis mi. Vestibulum efficitur risus at dui lobortis, non lacinia velit laoreet. Phasellus varius ante non porta imperdiet. Duis dignissim tincidunt placerat. Duis a pulvinar enim, ac volutpat urna. Suspendisse vitae laoreet augue, et sollicitudin est.

Aliquam scelerisque hendrerit sollicitudin. Cras viverra vitae sem nec pharetra. Nullam non nisi feugiat, congue purus nec, dignissim nisl. Donec rhoncus nulla et ipsum gravida sollicitudin. Donec laoreet nec felis sed porttitor. Etiam odio erat, pretium tincidunt orci ut, accumsan efficitur est. Sed dictum ullamcorper neque vel fringilla. Vivamus pulvinar vel mauris dictum blandit. Cras a malesuada est. Aenean eget urna in odio facilisis dapibus eu et quam. Vestibulum eu quam ac arcu auctor ornare. Mauris consectetur imperdiet nibh ut tincidunt.

Praesent porta lobortis augue, vitae vulputate libero luctus ac. Duis id tincidunt quam, a dictum arcu. Aliquam tincidunt porta lectus vel ultricies. Nunc lorem elit, accumsan eu quam nec, rutrum aliquet lorem. Vivamus in magna vel orci malesuada pulvinar id sed orci. Fusce lacus nulla, ullamcorper non tincidunt eget, aliquam at tortor. Nullam justo est, gravida id pharetra vitae, condimentum sed est.

location info

mood info

outfit info

interactions / tags and stuff

coded by natasha.

Spoiler: code

[border=0px; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; padding: 0px; overflow: hidden; max-width: 550px; margin: auto; background: #f6f6f6;][border=0px; height: 280px; position: relative; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); filter: grayscale(100%); background-size: cover; background-position: 50% 65%; -webkit-clip-path: polygon(0 0, 100% 0, 100% 63%, 0 80%);][/border][border=0px; height: 310px; position: relative; top: -300px; background: #fc7d1c; mix-blend-mode: multiply;  -webkit-clip-path: polygon(0 0, 100% 0, 100% 63%, 0 80%);][/border][border=0px; padding: 0px 20px 0px 20px; position: relative; top: -460px; box-sizing: border-box;][row][column=span3][border=0px; box-sizing: border-box; padding: 0px;][border=8px solid #222; box-sizing: border-box; border-radius: 100%; margin: auto; width: 175px; height: 175px; background: url(https://i2.wp.com/www.charitycomms.org.uk/wp-content/uploads/2019/02/placeholder-image-square.jpg?ssl=1); background-size: cover; background-position: 50% 50%;][/border][/border][/column][column=span5][border=0px; box-sizing: border-box; padding: 75px 0px 0px 0px; box-sizing: border-box; font-size: 30px; color: #222; font-family: Abril Fatface; text-transform: uppercase; text-align: center;]character name
[border=0px; padding: 0px; font-size: 13px; letter-spacing: 4px; text-transform: uppercase; color: #fc7d1c; font-family: Avenir; text-align: center; margin-top: -5px;]the role goes here[/border][/border][/column][/row][/border][border=0px; margin: 20px; height: 310px; margin-top: -445px; font-size: 12px; color: #222; line-height: 20px; text-align: justify; overflow-y: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus commodo fringilla turpis quis imperdiet. Aliquam facilisis erat eget massa tempor rutrum. Vestibulum dignissim ligula diam, non convallis mi rutrum ac. Aenean auctor velit at sapien venenatis, eget blandit urna accumsan. Suspendisse aliquam suscipit dui, a iaculis sapien placerat in. Pellentesque habitant morbi tristique senectus et netus et malesuada fames ac turpis egestas. Donec vitae iaculis massa. Maecenas ultricies fermentum aliquam. Sed vitae urna consectetur massa interdum rutrum at eu diam. Nam nec ornare tortor, pellentesque pellentesque nulla. Vestibulum luctus mattis mi. Vestibulum efficitur risus at dui lobortis, non lacinia velit laoreet. Phasellus varius ante non porta imperdiet. Duis dignissim tincidunt placerat. Duis a pulvinar enim, ac volutpat urna. Suspendisse vitae laoreet augue, et sollicitudin est.

Aliquam scelerisque hendrerit sollicitudin. Cras viverra vitae sem nec pharetra. Nullam non nisi feugiat, congue purus nec, dignissim nisl. Donec rhoncus nulla et ipsum gravida sollicitudin. Donec laoreet nec felis sed porttitor. Etiam odio erat, pretium tincidunt orci ut, accumsan efficitur est. Sed dictum ullamcorper neque vel fringilla. Vivamus pulvinar vel mauris dictum blandit. Cras a malesuada est. Aenean eget urna in odio facilisis dapibus eu et quam. Vestibulum eu quam ac arcu auctor ornare. Mauris consectetur imperdiet nibh ut tincidunt.

Praesent porta lobortis augue, vitae vulputate libero luctus ac. Duis id tincidunt quam, a dictum arcu. Aliquam tincidunt porta lectus vel ultricies. Nunc lorem elit, accumsan eu quam nec, rutrum aliquet lorem. Vivamus in magna vel orci malesuada pulvinar id sed orci. Fusce lacus nulla, ullamcorper non tincidunt eget, aliquam at tortor. Nullam justo est, gravida id pharetra vitae, condimentum sed est.[/border][border=0px; padding: 20px; background: #222; text-align: center; color: #fff; font-size: 12px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap;][border=0px; display: inline; padding: 5px 10px 5px 10px; background: #222;][border=0px; padding: 0px 5px 0px 0px; display: inline; color: #fc7d1c;][fa]far fa-map-marker-alt[/fa][/border] location info[/border] [border=0px; display: inline; padding: 5px 10px 5px 10px; background: #222;][border=0px; padding: 0px 5px 0px 0px; display: inline; color: #fc7d1c;][fa]far fa-heartbeat[/fa][/border] mood info[/border] [border=0px; display: inline; padding: 5px 10px 5px 10px; background: #222;][border=0px; padding: 0px 5px 0px 0px; display: inline; color: #fc7d1c;][fa]far fa-tshirt[/fa][/border] outfit info[/border] [border=0px; display: inline; padding: 5px 10px 5px 10px; background: #222;][border=0px; padding: 0px 5px 0px 0px; display: inline; color: #fc7d1c;][fa]far fa-tags[/fa][/border] interactions / tags and stuff[/border][/border][/border][bg=transparent; padding-top: 10px; font-family: Avenir; box-sizing: border-box; font-size: 11px; color: #aaa; text-align: center;]coded by natasha.[/bg]

 

[Jormir24]

Hello! I am new to RP Nation and I was wanting to use one of your code templates but I find myself in the predicament of not knowing how to insert one and use it. Thank You for your help!

 

[natasha.]

06. MOONFLOWER

comin' back after a long time with an in character code i made! i decided to throw this up because i tried to make it so that you can switch between light & dark mode (which was def inspired by the one time Uxie did it back when bbcode+ was around). this is super not mobile friendly though, sorry!

you can change the main accent colours for the dark and light mode in the very first div next to --lightcolor and --darkcolor respectively! if you change it there, it'll change throughout the entire code. the first major chunk of the code is solely for the layout and colours, and the main body of the code where you write your text is closer to the bottom — i've mentioned it in the code though so it should be easy to find!

you can also change the icons used for the mood/location/outfit parts of the layout! again, you'll find this in the main body part of the code and you can google font awesome icons to browse through a large library of potential icons you might want to use as a replacement.

please remember not to remove the credit either and feel free to reach out if you need any help with the code, or have any questions/comments/concerns!

• 1
• 1

• 
  

  
  

  code by natasha.
• 
  

  
  

  code by natasha.

character name

the role name

location

mood

outfit

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor lorem, efficitur id felis ut, auctor pulvinar ex. Pellentesque est arcu, mollis nec orci in, finibus aliquet elit. Fusce nisl ante, faucibus ut vehicula nec, ornare vel orci. Sed eu eros sit amet tellus dignissim malesuada ac quis tellus. Vestibulum porta felis mi, a commodo ante fermentum sit amet. Mauris fermentum neque aliquet suscipit sagittis. Fusce in facilisis nunc, ut blandit arcu. Maecenas sed erat vel arcu ultricies imperdiet. Mauris ultricies sapien sit amet erat elementum imperdiet. Maecenas sed velit lobortis erat mollis semper. Curabitur nulla velit, pharetra ac nulla sed, suscipit mollis magna. Aenean sagittis sapien eget lacus tincidunt porttitor. Vivamus eleifend pharetra imperdiet.

Nullam bibendum ac quam sed faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae ante porta, vehicula est ut, dignissim eros. Duis at ultrices sapien. Mauris orci enim, bibendum ut neque sed, semper maximus neque. Aenean sollicitudin ut eros nec vulputate. Duis luctus nisl sed rutrum vestibulum.

Aliquam lobortis erat dolor, a scelerisque tortor imperdiet eu. Integer hendrerit, tellus sit amet hendrerit venenatis, urna elit tempus orci, in sagittis enim diam aliquet augue. Donec egestas orci vitae luctus cursus. Maecenas mattis augue ut congue commodo. Morbi eget mauris finibus, rhoncus lectus sed, malesuada felis. In dapibus lorem non tortor sodales, eget facilisis erat porttitor. Morbi bibendum semper dui sed venenatis. Nunc faucibus tempor augue efficitur euismod. Ut nibh eros, ornare at maximus tempus, vestibulum sit amet diam. Aenean libero ex, efficitur non condimentum ut, venenatis a turpis. Suspendisse tristique hendrerit massa ut tristique. Morbi pellentesque, diam in consequat tempor, nunc felis pharetra nisl, a blandit lorem tellus sit amet est. Sed quis enim in dui consequat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse faucibus aliquam arcu pulvinar tristique.

Vivamus lobortis neque ut sem sodales maximus. Mauris a pellentesque augue. Integer condimentum laoreet feugiat. Morbi dapibus porttitor condimentum. Sed et justo non enim mollis mollis. Donec ornare sodales mi, vitae ullamcorper ex faucibus ac. Maecenas cursus efficitur magna, vitae cursus nunc cursus ac.

mentions / interactions

Spoiler: code

[border=none; padding: 0px; height: 830px; cursor: url(https://66.media.tumblr.com/232c090ebdd37ae4bc17adb54e1e0344/tumblr_inline_ol4nwhvSwg1uxxza6_75sq.png), auto!important; --lightcolor: #ccd4eb; --darkcolor: #6f83bd;][border=none; width: 155px; margin-left: 600px; overflow-hidden; padding-top: 60px;][tabs][tab=1][comment]

-------light tab code------[/comment][border=none; padding: 0px; width: 1350px; position: absolute; left: 0px; margin-left: 10px; margin-top: -110px; opacity: 1; background: #f6f6f6; pointer-events: none;][border=none; padding: 0px; margin: auto; width: 160px; text-align: center; display: flex; flex-direction: row; justify-content: space-evenly; padding-top: 60px; padding-bottom: 20px; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; margin: auto; border-radius: 100%; background: #222; color: #fff; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 14px; margin-right: -10px;][fa]fas fa-sun[/fa][/border][border=none; padding: 0px; height: 30px; width: 30px; margin: auto; border-radius: 100%; background: #f6f6f6; color: #222; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 14px;][fa]fas fa-moon[/fa][/border][/border]
[border=none; padding: 0px 20px 100px 20px; background: #f6f6f6; z-index: 1;][border=none; padding: 0px; height: 200px; margin-top: 100px; border-radius: 100%; position: absolute; width: 200px; background: var(--lightcolor); margin-left: 130px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 40px; margin-top: 400px; border-radius: 100%; width: 40px; background: var(--lightcolor); margin-left: 100px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 150px; margin-top: 340px; border-radius: 100%; width: 150px; background: var(--lightcolor); margin-left: 1010px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 50px; margin-top: 170px; border-radius: 100%; width: 50px; background: var(--lightcolor); margin-left: 1160px;][/border][border=none; margin: auto; z-index: 2; position: relative; padding: 0px; max-width: 900px; display: flex; flex-direction: justify-content: space-evenly; flex-wrap: wrap;][comment]

----LEFT----[/comment][border=none; padding: 0px; width: 280px; background: #f6f6f6; margin-right: 20px;][border=none; padding: 0px; background-size: cover; background-position: 50% 50%; height: 483px; margin-bottom: 20px;][/border][border=none; padding: 42px; background: #fff; box-sizing: border-box; border: 1px solid #eee; text-align: center; color: #abc2ab; height: ][/border][/border][comment]


----RIGHT----[/comment][border=none; padding: 0px; width: 600px; background: #f6f6f6;][comment]

-----specs-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; margin-bottom: 20px;][comment]

---location---[/comment][border=none; padding: 0px; width: 180px; margin-right: 20px;][border=none; padding: 0px; background: #fff; border-right: 5px solid var(--lightcolor); display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; background: var(--lightcolor);][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;][/border][/border][/border][comment]

---mood---[/comment][border=none; padding: 0px; width: 200px;][border=none; padding: 0px; background: #fff; border-right: 5px solid var(--lightcolor); display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; background: var(--lightcolor);][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;][/border][/border][/border][comment]

---outfit---[/comment][border=none; padding: 0px; width: 180px; margin-left: 20px;][border=none; padding: 0px; background: #fff; border-right: 5px solid var(--lightcolor); display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; background: var(--lightcolor);][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;][/border][/border][/border][/border][comment]

-----content-----[/comment][border=none; padding: 20px; box-sizing: border-box; font-size: 13px; font-family: Rubik; background: #fff; border: 1px solid #eee; color: #000; line-height: 22px; text-align: justify;][border=none; padding: 0px; height: 437px;][/border][/border][border=none; padding: 19px; background: var(--lightcolor); box-sizing: border-box; font-size: 12px; color: #111; font-family: Rubik; text-transform: lowercase; text-align: center; margin-top: 20px;][/border][/border]
[/border][/border][border=none; padding: 0px; text-align: center; font-family: Rubik; color: #bbb; font-size: 9px; letter-spacing: 3px; position: relative; margin-top: -80px; text-transform: uppercase;]code by natasha.[/border][/border][comment]

-------end of light tab code------[/comment][/tab][tab=1][comment]

-------dark tab code------[/comment][border=none; padding: 0px; width: 1350px; position: absolute; left: 0px; margin-left: 10px; margin-top: -110px; opacity: 1; background: #222; pointer-events: none;][border=none; padding: 0px; margin: auto; width: 160px; text-align: center; display: flex; flex-direction: row; justify-content: space-evenly; padding-top: 60px; padding-bottom: 20px; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; margin: auto; border-radius: 100%; background: #222; color: #fff; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 14px; margin-right: -10px;][fa]fas fa-sun[/fa][/border][border=none; padding: 0px; height: 30px; width: 30px; margin: auto; border-radius: 100%; background: #f6f6f6; color: #222; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 14px;][fa]fas fa-moon[/fa][/border][/border]
[border=none; padding: 0px 20px 100px 20px; background: #222; z-index: 1;][border=none; padding: 0px; height: 200px; margin-top: 100px; border-radius: 100%; position: absolute; width: 200px; background: var(--darkcolor); margin-left: 130px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 40px; margin-top: 400px; border-radius: 100%; width: 40px; background: var(--darkcolor); margin-left: 100px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 150px; margin-top: 340px; border-radius: 100%; width: 150px; background: var(--darkcolor); margin-left: 1010px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 50px; margin-top: 170px; border-radius: 100%; width: 50px; background: var(--darkcolor); margin-left: 1160px;][/border][border=none; margin: auto; z-index: 2; position: relative; padding: 0px; max-width: 900px; display: flex; flex-direction: justify-content: space-evenly; flex-wrap: wrap;][comment]

----LEFT----[/comment][border=none; padding: 0px; width: 280px; background: #222; margin-right: 20px;][border=none; padding: 0px; background-size: cover; background-position: 50% 50%; height: 483px; margin-bottom: 20px;][/border][border=none; padding: 42px; background: #fff; box-sizing: border-box; border: 1px solid #eee; text-align: center; color: #abc2ab; height: ][/border][/border][comment]


----RIGHT----[/comment][border=none; padding: 0px; width: 600px; background: #222;][comment]

-----specs-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; margin-bottom: 20px;][comment]

---location---[/comment][border=none; padding: 0px; width: 180px; margin-right: 20px;][border=none; padding: 0px; background: #fff; border-right: 5px solid var(--darkcolor); display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; background: var(--darkcolor);][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;][/border][/border][/border][comment]

---mood---[/comment][border=none; padding: 0px; width: 200px;][border=none; padding: 0px; background: #fff; border-right: 5px solid var(--darkcolor); display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; background: var(--darkcolor);][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;][/border][/border][/border][comment]

---outfit---[/comment][border=none; padding: 0px; width: 180px; margin-left: 20px;][border=none; padding: 0px; background: #fff; border-right: 5px solid var(--darkcolor); display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; background: var(--darkcolor);][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;][/border][/border][/border][/border][comment]

-----content-----[/comment][border=none; padding: 20px; box-sizing: border-box; font-size: 13px; font-family: Rubik; background: #fff; border: 1px solid #eee; color: #000; line-height: 22px; text-align: justify;][border=none; padding: 0px; height: 437px;][/border][/border][border=none; padding: 19px; background: var(--darkcolor); box-sizing: border-box; font-size: 12px; color: #111; font-family: Rubik; text-transform: lowercase; text-align: center; margin-top: 20px;][/border][/border]
[/border][/border][border=none; padding: 0px; text-align: center; font-family: Rubik; color: #bbb; font-size: 9px; letter-spacing: 3px; position: relative; margin-top: -80px; text-transform: uppercase;]code by natasha.[/border][/border][comment]

-------end of dark tab code------[/comment][/tab][/tabs][/border][comment]



--------MAIN BODY------[/comment][border=none; width: 1350px; position: absolute; left: 0px; margin-top: -10px;][border=none; padding: 0px; height: 200px; margin-top: 100px; border-radius: 100%; position: absolute; width: 200px; margin-left: 130px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 40px; margin-top: 400px; border-radius: 100%; width: 40px; margin-left: 100px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 150px; margin-top: 340px; border-radius: 100%; width: 150px; margin-left: 1010px;][/border][border=none; z-index: 1; position: absolute; padding: 0px; height: 50px; margin-top: 170px; border-radius: 100%; width: 50px; margin-left: 1160px;][/border][border=none; margin: auto; z-index: 2; position: relative; padding: 0px; width: 900px; position: relative; display: flex; flex-direction: justify-content: space-evenly; margin-top: -6px;][comment]

----LEFT----[/comment][border=none; padding: 0px; width: 280px; margin-right: 20px;][border=none; padding: 0px; background: url(https://www.globalpharmatek.com/wp-content/uploads/2016/10/orionthemes-placeholder-image.jpg); background-size: cover; background-position: 50% 50%; height: 483px; margin-bottom: 20px;][/border][border=none; padding: 12px 10px 16px 10px; box-sizing: border-box; text-align: center; color: #000;][border=none; padding: 0px; font-family: Raleway; font-size: 30px;]character name[/border][border=none; margin-top: -5px; margin-bottom: 5px; padding: 0px; font-family: Rubik; font-size: 10px; text-transform: uppercase; letter-spacing: 4px; color: #000;]the role name[/border][/border][/border][comment]


----RIGHT----[/comment][border=none; padding: 0px; width: 600px;][comment]

-----specs-----[/comment][border=none; padding: 0px; display: flex; flex-direction: row; justify-content: space-evenly; flex-wrap: wrap; margin-bottom: 20px;][comment]

---location---[/comment][border=none; padding: 0px; width: 180px; margin-right: 20px;][border=none; padding: 0px; display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; ][fa]fas fa-map-marker-alt[/fa][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;]location[/border][/border][/border][comment]

---mood---[/comment][border=none; padding: 0px; width: 200px;][border=none; padding: 0px; display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; ][fa]fas fa-heart[/fa][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;]mood[/border][/border][/border][comment]

---outfit---[/comment][border=none; padding: 0px; width: 180px; margin-left: 20px;][border=none; padding: 0px; display: flex; flex-direction: row; box-sizing: border-box;][border=none; padding: 0px; height: 30px; width: 30px; text-align: center; display: flex; flex-direction: column; justify-content: space-evenly; font-size: 12px; color: #fff; ][fa]fas fa-tshirt[/fa][/border][border=none; padding: 0px; display: flex; flex-direction: column; justify-content: space-evenly; box-sizing: border-box; padding-left: 10px; color: #000; font-size: 13px; font-family: Rubik;]outfit[/border][/border][/border][/border][comment]

-----content-----[/comment][border=none; padding: 20px; box-sizing: border-box; font-size: 13px; font-family: Rubik; color: #000; line-height: 22px; text-align: justify;][border=none; padding: 0px; height: 437px; overflow-y: auto;]Lorem ipsum dolor sit amet, consectetur adipiscing elit. Nunc tortor lorem, efficitur id felis ut, auctor pulvinar ex. Pellentesque est arcu, mollis nec orci in, finibus aliquet elit. Fusce nisl ante, faucibus ut vehicula nec, ornare vel orci. Sed eu eros sit amet tellus dignissim malesuada ac quis tellus. Vestibulum porta felis mi, a commodo ante fermentum sit amet. Mauris fermentum neque aliquet suscipit sagittis. Fusce in facilisis nunc, ut blandit arcu. Maecenas sed erat vel arcu ultricies imperdiet. Mauris ultricies sapien sit amet erat elementum imperdiet. Maecenas sed velit lobortis erat mollis semper. Curabitur nulla velit, pharetra ac nulla sed, suscipit mollis magna. Aenean sagittis sapien eget lacus tincidunt porttitor. Vivamus eleifend pharetra imperdiet.

Nullam bibendum ac quam sed faucibus. Interdum et malesuada fames ac ante ipsum primis in faucibus. Praesent vitae ante porta, vehicula est ut, dignissim eros. Duis at ultrices sapien. Mauris orci enim, bibendum ut neque sed, semper maximus neque. Aenean sollicitudin ut eros nec vulputate. Duis luctus nisl sed rutrum vestibulum.

Aliquam lobortis erat dolor, a scelerisque tortor imperdiet eu. Integer hendrerit, tellus sit amet hendrerit venenatis, urna elit tempus orci, in sagittis enim diam aliquet augue. Donec egestas orci vitae luctus cursus. Maecenas mattis augue ut congue commodo. Morbi eget mauris finibus, rhoncus lectus sed, malesuada felis. In dapibus lorem non tortor sodales, eget facilisis erat porttitor. Morbi bibendum semper dui sed venenatis. Nunc faucibus tempor augue efficitur euismod. Ut nibh eros, ornare at maximus tempus, vestibulum sit amet diam. Aenean libero ex, efficitur non condimentum ut, venenatis a turpis. Suspendisse tristique hendrerit massa ut tristique. Morbi pellentesque, diam in consequat tempor, nunc felis pharetra nisl, a blandit lorem tellus sit amet est. Sed quis enim in dui consequat vestibulum. Interdum et malesuada fames ac ante ipsum primis in faucibus. Suspendisse faucibus aliquam arcu pulvinar tristique.

Vivamus lobortis neque ut sem sodales maximus. Mauris a pellentesque augue. Integer condimentum laoreet feugiat. Morbi dapibus porttitor condimentum. Sed et justo non enim mollis mollis. Donec ornare sodales mi, vitae ullamcorper ex faucibus ac. Maecenas cursus efficitur magna, vitae cursus nunc cursus ac. [/border][/border][border=none; padding: 10px; box-sizing: border-box; font-size: 12px; color: #111; font-family: Rubik; text-transform: lowercase; text-align: center; margin-top: 22px;]mentions / interactions[/border][/border][/border]
[/border][/border]