Help Thread: Roleplay Templates

[moon]

REfer to this thread instead now! : https://www.pokecommunity.com/showthread.php?p=9109525#9109525

 

[moon]

Here's an example post, featuring the css from the OP of this thread!

Spoiler:

Roleplay Templates​

Welcome! In this thread, you can browse and submit templates that can be useful for your RP needs, to make stuff look good. The types of templates we deal with are:

Sign Up Templates (SU)
In Character (Post) Templates (IC)
Roleplay Opening Post Templates (OP)​

This is not the place to go to get help with how the "css" really works, or get answers for your questions! Use this thread over in Computers & Technology for that.

How to use this thread

Anyone can post a template in this thread. If there is nothing wrong with your code, and if your colors etc aren't devastatingly obnoxious, a moderator will add it to the list in this OP as soon as possible.

You can either put it up with the original text and content, or with example/nonsense text just to show off the style since the person adopting your template will likely add their own text anyways!

If you want an explanation or presentation to accompany your template, please put that text at the very top of the post, before the code.

Put your template up within [spoiler] tags (this picture:

). The readers who click the spoiler will see the code as it's supposed to look. To get the code, quote the post and simply fetch what is within the [quote] and [spoiler] tags.

If you want to use or edit a template you found here, go ahead and go wild! There is definitely no need to give credit to the creator. This is basically a place where you donate your templates to others, giving up your right to say "hey, they copied my style!" because by posting it here, you give the rest of us permission to use it as we please. Alright? :)

If you have questions about a particular template, please message its creator instead of asking in this thread.

Questions pertaining to how this thread works or should work? Please message Adventure or Magic.

The template list

Remember that you may, of course, mix and match the code and purposes to your needs! This is just what they were submitted as.


Sign Up Templates

none yet​

In Character (Post) Templates

none yet​

Roleplay Opening Post Templates

none yet​

 

[IamSmart~SMRT]

This is a cool thread! I think it would be a good idea to create an emblem for giving so many templates and such, just to encourage more participation.

I have made a sign-up template. It only has what just about every RP requires. However, you still need to put whatever the GM asks for. For your sign-up section (i.e. Persoality, history, appearance, etc.) that you need to add, just put [*B][*SIZE="4"]Text[*/B][*/SIZE]. Just remove the *s.

The height will automatically adjust to how much text you have.

My sign up template here...

Spoiler:

"Character Name"​

Appearance:

Spoiler:

In place of this spoiler, you can put a description or picture.

Gender: Male or female.

Personality: How your character acts. How they treat others, etc. Put what you need here.

History: Your character's past, their family. Whatever the GM asks for.

Other: Any other information about your character.

I really hope this helps. I think I'm going to make an IC template to go hand-in-hand with this.

 

[gimmepie]

I don't have any templates to give you just yet, although I most certainly will post some a bit later. I just want to say that I'm really glad to see this threading happening now and I look forward to seeing some cool templates submitted by some of our resident CSS wizards.

 

[Sapphire Rose]

I have an example for a Sign-up Template here. If people want to change the background picture I suggest using wallpaper format pictures with an exception for the appearence pictures, I'd suggest smaller ones for those. If they don't know how to change it they can gladly come to me for help~ I suggest using .mp3 links from internet as theme songs. I can also help with that~

Spoiler:

Example Picture​

Insert name here

Insert current location here

Example Theme song:


Example Template

Tada~ This might be a little easier c:

Spoiler:

[div="width: 500px; height: auto; margin-left: auto; margin-right: auto; background: transparent url('Insert wallpaper link here') repeat-y left top; padding-left: 55px; repeat-y right top;  padding-right: 60px; border-top-left-radius: 40px; border-bottom-left-radius: 40px; border-top-right-radius: 40px; border-bottom-right-radius: 40px; font-family: Cambria, Georgia, serif; font-size: 14px; text-align: justify; padding-top: 40px; padding-bottom: 40px;"][color="white"][h2][center][IMG]Insert picture here[/IMG][/center][B][I][glow=red]Insert name here[/glow][/I][/B][/h2]
[h3]Insert current location here[/h3]

[B]Example Theme song:[/B] 
[sound="Avril Lavigne ft. Chad Kroeger: Let me go"]https://onlinekaraoke.tv/assets/songs/49000-49999/49399-let-me-go-feat-chad-kroeger-avril-lavigne--1411579534.mp3[/sound]

Example Template

[/color][/div]

 

[Quest]

Hey guys, this is looking great, but I do have a suggestion! It'll be a lot more easier for people to go about using these templates if one were to use

 tags around the code! It'll make it much easier for one to copy and paste what they need to instead of having to go through thee process of quoting it and then copying it!

Definitely give an example as you've been doing!

[SPOILER][CENTER][div="background-image: url(""); border-color: #000000;  border-style: solid; border-width: 5px; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 15px; moz-border-radius: 15px; width: 800px; text-align: left;"][INDENT]

[div="background-color: #ffffff; border-style: solid;  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; moz-border-radius: 5px; font-size: 12px; "][indent][CENTER][B][h2][SIZE="5"]Genevieve "Jenny" Abbot[/SIZE]
[title="Genevieve Abbot"][url="https://i1054.photobucket.com/albums/s492/TheFinale134/Genevieve_zpsfs0pmnqy.jpg"][img] https://i1054.photobucket.com/albums/s492/TheFinale134/Genevieve%20head%20shot_zpsrwbla4ud.png[/img][/url][/title] 
[SIZE="4"][I]"I like trains. Some of the most exciting stories I've heard about start on one."[/I][/SIZE][/h2][/B]
[I]19 // The Servant Girl // Female[/I][/CENTER]

[B]Appearance and Attire:[/B] For a simple servant girl, many consider Genevieve to be young and beautiful. The girl's dark, brown eyes proudly rest upon her oval-shaped face, giving off a sense of confidence that only seems to be supported by her other features. It isn't uncommon for one to find a smile on her thin lips. Her small, refined nose only seems to match the rest of her face. Her straight auburn hair flows down her back and the long bangs that border her smooth features accentuate the color of her hazel eyes. 

On the day of the journey, Genevieve wore something similar to a princess-line dress that complements her thin frame. It is designed in a panel-like structure where, although it looks like several pieces of clothing, it is actually one singular piece. The "under dress" as it seems to appear like, is plain white with no noticeable decoration aside from the top black piece. The black part of her dress is a sight to behold. With classic Juliet-styled sleeve and frilly wrists, the top part meets the "under dress" at the center of her body. This change, signaled by the lace frills on the inside, are further connected by a belt at the waist and several ribbons that begin at her collar and end just over her stomach. 

[B]Hometown: [/B] Bloomgarden, the Town of Flowers, is a town located Northeast of Bellson and is known far and wide for its beautiful expanse of meadows just outside the town. It is obvious that its citizens are quite proud of the title, as many can be found throughout town, particularly in the hair of young women. In comparison, it is much better economically due to its prime location in terms of trading and other services. As such, it is highly likely that one will run into a popular lord or lady, or more likely there servants, doing their errands around the town. It has been led by the same, humble mayor for years now and many of the populace agree that they wouldn't change anything about the town. 

[B]Personality:[/B] [I]Bloomgarden[/I] is known for its beautiful expanse of flowers -- both in terms of landscape and people. Of all the flowers in Bloomgarden, Jenny is certainly a prime pick. Why, you ask? To start, Genevieve is a genuinely kind, independant girl who constantly strives to be the best as she can be. As such, she always tries to be nice and polite to those around her, particularly when such a demeanor is needed. Its often very likely that one would find her in the midst of a conversation, even if it was with a stranger. She enjoys making friends and loves to joke around, though she would never go too far, such as playing a cruel prank or being mean in her jokes. 

The youth's most defining trait would most likely be her curiosity. Whether it be in talking to a new person in town, exploring the town or forest nearby, or even in reading a new book. At this point, it would be fairly obvious that Genevieve is adventurous. To this day, she enjoys hearing the stories that she grew up with. Tales of intrigue and amazing exploits have always driven her curiosity, pushing her to the resolution that an adventure would be just the thing for her. 

Of course, for one to be a successful adventurer, they needed to be smart. Genevieve definitely isn't lacking in this department and is thus very cautious when such a thing is needed. Even when certain things fascinate her beyond belief, she knows that she must be smart when handling the situation. Though it rarely calls for it in her current life, the auburn-haired girl rarely gets frightened. 

However, things aren't always flowers and adventure. If a situation does end up going out of her control, Jenny could be easily discouraged in her endeavors. She dislikes bullies and won't stand for people who believe they are above others. People like this tend to easily anger or sadden her and often times, she won't calm down until quite a while after the situation is resolved. 

[B]Strengths:[/B]

[I]Charismatic:[/I] There's something about Genevieve that people just seem to like. Not everyone, of course, but enough to tell that she inherited the charisma of a noble. She has a way of making people laugh, and her kindness and sincerity make it hard to believe she means any ill-will (which she never does). Jenny tries to empathize with everyone and in her nineteen years has gotten quite good at making good company with others.

[I]Passionate: [/I]As a passionate person, Genevieve feels strongly about many things. Most important to her, however, is her friends and the adventure. She will often stop at nothing to help a friend in need, going as far as to protect them in dangerous situations, even when she knows she couldn't handle it herself. 

[I]Confident:[/I] Jenny is very confident is almost everything that she does. Be it work, social interaction, or most other activities, she believes that she will do it well. Even with the most stressful of situations, Genevieve strives to accomplish the task with as much poise as possible.

[B]Weaknesses:[/B]

[I]Clumsy:[/I] As with all women who live in a noble home, especially ones with privileges Genevieve received, it is common knowledge to have poise and balance. However, hanging around Genevieve for long enough will make it obvious that she didn't make high grades in this lesson. Jenny is always tripping over rocks, ledges, her feet, and the occasional blade of grass. It's a wonder how she makes it through this world intact. Maybe her knack for falling also comes with the gift of self-healing!

[I]Unyielding:[/I] Of course, being confident in what she does makes her… Stubborn. If Genevieve sets her mind on doing something, she will not stop until it is completely finished or until it has been determined that nothing can be done. If it is impossible to complete what she has set out to do, she will often times blame herself, causing her to be sad or even angry depending on the importance of the situation. 

[I]Impatience:[/I] Genevieve can be very impatient depending on the situation. She doesn't like to wait extra time when the job can be done as quickly as possible. After all, that's time that she can use to explore or talk with others. If she was told at one to get a job done by five, guess when the job was done? 1:15 depending. If only walking didn't take so long. Her impatience can sometimes get in the way of cordial conversations, but her upbringing has taught her to hold fast. She could get through the wait and when she did… Oh boy.

[B]The Reason Why:[/B] Genevieve has always been a girl looking for adventure. Although the bustling town where she had grown up was an amazing place to many outsiders, she found it quite boring after several years. Every time she traveled down the main street, she saw the same methodical actions being performed day after day. She would see the same shops, the same trading caravans, and the same people. Knowing many of the amazing stories that the lord had told her as she grew older, she knew that the only way to get the change of pace that she so desperately craved was to leave the town behind and search for the adventure herself. With the allowance of her family and her lord, she set off. The train was just what she needed.  

[B]Background:[/B] Several generations ago, Genevieve's ancestors were powerful and wealthy, much like many of the lords in the world today. In fact, the Abbot family was as powerful as the Tobba family, a current benefactor of the town of Bloomgarden. Though many would consider the families rivals, they were actually good friends in many ways. This friendship was particularly apparent after the Abbot family found themselves in a mess financially due to assets that were not exactly a good choice to invest in. Due to this bad investment, the family eventually found themselves in debt with no way to pay off what they owed. The generous Tobba family were the first to help the Abbot's and through a legal contract, managed to pay off the families debt in exchange for the Abbot's servitude. 

Generations later, Genevieve was born into the same state of indentured servitude as her father and his father before him.  Of course, it wasn't as if this made her life incredibly hard. Despite the fact that they were servants, the family remained good friends with their lords. Aside from her father, Lord Anthony Tobba has always been one of the nicest men in her life, often considering not only her family, but many of the other in his servitude as equals. He, through his own numerous adventures and reasonable investments, has been one of the most successful lords in his family for more generation than could be remembered. It wasn't uncommon for him to leave for one of his adventures, Genevieve's father, Tully, in tow. 

She couldn't count the number of tales that had been told to her by the men. Each one always seemed more interesting than the last. Though many of the trips probably weren't as exciting as the stories, Genevieve couldn't help but wish for such things to happen to her. 

It wasn't long before Genevieve found herself old enough to explore the town by herself. It was indeed large, particularly to the young girl who had only ever left the town on small walks with her mother. She was finally given a chance to explore the town. She would look for every nook and cranny, talk to anyone she could, and even go as far out of the town as was allowed. However, things quickly became boring. You could only see the same thing so many times and be content about it.   

[B]Personal Effects:[/B] Aside from a few changes of clothing, Genevieve only has two objects that she values: her red scarf given to her by her mother and a small, silver pocket watch that was bestowed upon her by the lord for whom her family had worked. 

[B]RP Sample:[/B] [URL="https://www.pokecommunity.com/showpost.php?p=8012227&postcount=205"]Here~[/URL][/INDENT][/div]

[/div][/INDENT][/CENTER][/SPOILER]

But also use the code!

[SPOILER][HTML][CENTER][div="background-image: url("BACKGROUND IMAGE"); border-color: #000000;  border-style: solid; border-width: 5px; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 15px; moz-border-radius: 15px; width: 800px; text-align: left;"][INDENT]

[div="background-color: #ffffff; border-style: solid;  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; moz-border-radius: 5px; font-size: 12px; "][indent][CENTER][B][h2][SIZE="5"]CHARACTER NAME[/SIZE]
[title="CHARACTER NAME"][img] CHARACTER PICTURE LINK [/img][/title] 
[SIZE="4"][I]QUOTE[/I][/SIZE][/h2][/B]
[I]AGE // TITLE // Gender[/I][/CENTER]

~POST INFORMATION HERE~

[/INDENT][/div]

[/div][/INDENT][/CENTER]

[/SPOILER]

 

[moon]

Hey guys, this is looking great, but I do have a suggestion! It'll be a lot more easier for people to go about using these templates if one were to use

 tags around the code! It'll make it much easier for one to copy and paste what they need to instead of having to go through thee process of quoting it and then copying it!

Definitely give an example as you've been doing!

[SPOILER][CENTER][div="background-image: url("https://designtutorials4u.com/wp-content/uploads/2010/02/05_seamless_background.jpg"); border-color: #000000;  border-style: solid; border-width: 5px; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 15px; moz-border-radius: 15px; width: 800px; text-align: left;"][INDENT]

[div="background-color: #ffffff; border-style: solid;  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; moz-border-radius: 5px; font-size: 12px; "][indent][CENTER][B][h2][SIZE="5"]Genevieve "Jenny" Abbot[/SIZE]
[title="Genevieve Abbot"][url="https://i1054.photobucket.com/albums/s492/TheFinale134/Genevieve_zpsfs0pmnqy.jpg"][img] https://i1054.photobucket.com/albums/s492/TheFinale134/Genevieve%20head%20shot_zpsrwbla4ud.png[/img][/url][/title] 
[SIZE="4"][I]"I like trains. Some of the most exciting stories I've heard about start on one."[/I][/SIZE][/h2][/B]
[I]19 // The Servant Girl // Female[/I][/CENTER]

[B]Appearance and Attire:[/B] For a simple servant girl, many consider Genevieve to be young and beautiful. The girl's dark, brown eyes proudly rest upon her oval-shaped face, giving off a sense of confidence that only seems to be supported by her other features. It isn't uncommon for one to find a smile on her thin lips. Her small, refined nose only seems to match the rest of her face. Her straight auburn hair flows down her back and the long bangs that border her smooth features accentuate the color of her hazel eyes. 

On the day of the journey, Genevieve wore something similar to a princess-line dress that complements her thin frame. It is designed in a panel-like structure where, although it looks like several pieces of clothing, it is actually one singular piece. The "under dress" as it seems to appear like, is plain white with no noticeable decoration aside from the top black piece. The black part of her dress is a sight to behold. With classic Juliet-styled sleeve and frilly wrists, the top part meets the "under dress" at the center of her body. This change, signaled by the lace frills on the inside, are further connected by a belt at the waist and several ribbons that begin at her collar and end just over her stomach. 

[B]Hometown: [/B] Bloomgarden, the Town of Flowers, is a town located Northeast of Bellson and is known far and wide for its beautiful expanse of meadows just outside the town. It is obvious that its citizens are quite proud of the title, as many can be found throughout town, particularly in the hair of young women. In comparison, it is much better economically due to its prime location in terms of trading and other services. As such, it is highly likely that one will run into a popular lord or lady, or more likely there servants, doing their errands around the town. It has been led by the same, humble mayor for years now and many of the populace agree that they wouldn't change anything about the town. 

[B]Personality:[/B] [I]Bloomgarden[/I] is known for its beautiful expanse of flowers -- both in terms of landscape and people. Of all the flowers in Bloomgarden, Jenny is certainly a prime pick. Why, you ask? To start, Genevieve is a genuinely kind, independant girl who constantly strives to be the best as she can be. As such, she always tries to be nice and polite to those around her, particularly when such a demeanor is needed. Its often very likely that one would find her in the midst of a conversation, even if it was with a stranger. She enjoys making friends and loves to joke around, though she would never go too far, such as playing a cruel prank or being mean in her jokes. 

The youth's most defining trait would most likely be her curiosity. Whether it be in talking to a new person in town, exploring the town or forest nearby, or even in reading a new book. At this point, it would be fairly obvious that Genevieve is adventurous. To this day, she enjoys hearing the stories that she grew up with. Tales of intrigue and amazing exploits have always driven her curiosity, pushing her to the resolution that an adventure would be just the thing for her. 

Of course, for one to be a successful adventurer, they needed to be smart. Genevieve definitely isn't lacking in this department and is thus very cautious when such a thing is needed. Even when certain things fascinate her beyond belief, she knows that she must be smart when handling the situation. Though it rarely calls for it in her current life, the auburn-haired girl rarely gets frightened. 

However, things aren't always flowers and adventure. If a situation does end up going out of her control, Jenny could be easily discouraged in her endeavors. She dislikes bullies and won't stand for people who believe they are above others. People like this tend to easily anger or sadden her and often times, she won't calm down until quite a while after the situation is resolved. 

[B]Strengths:[/B]

[I]Charismatic:[/I] There's something about Genevieve that people just seem to like. Not everyone, of course, but enough to tell that she inherited the charisma of a noble. She has a way of making people laugh, and her kindness and sincerity make it hard to believe she means any ill-will (which she never does). Jenny tries to empathize with everyone and in her nineteen years has gotten quite good at making good company with others.

[I]Passionate: [/I]As a passionate person, Genevieve feels strongly about many things. Most important to her, however, is her friends and the adventure. She will often stop at nothing to help a friend in need, going as far as to protect them in dangerous situations, even when she knows she couldn't handle it herself. 

[I]Confident:[/I] Jenny is very confident is almost everything that she does. Be it work, social interaction, or most other activities, she believes that she will do it well. Even with the most stressful of situations, Genevieve strives to accomplish the task with as much poise as possible.

[B]Weaknesses:[/B]

[I]Clumsy:[/I] As with all women who live in a noble home, especially ones with privileges Genevieve received, it is common knowledge to have poise and balance. However, hanging around Genevieve for long enough will make it obvious that she didn't make high grades in this lesson. Jenny is always tripping over rocks, ledges, her feet, and the occasional blade of grass. It's a wonder how she makes it through this world intact. Maybe her knack for falling also comes with the gift of self-healing!

[I]Unyielding:[/I] Of course, being confident in what she does makes her… Stubborn. If Genevieve sets her mind on doing something, she will not stop until it is completely finished or until it has been determined that nothing can be done. If it is impossible to complete what she has set out to do, she will often times blame herself, causing her to be sad or even angry depending on the importance of the situation. 

[I]Impatience:[/I] Genevieve can be very impatient depending on the situation. She doesn't like to wait extra time when the job can be done as quickly as possible. After all, that's time that she can use to explore or talk with others. If she was told at one to get a job done by five, guess when the job was done? 1:15 depending. If only walking didn't take so long. Her impatience can sometimes get in the way of cordial conversations, but her upbringing has taught her to hold fast. She could get through the wait and when she did… Oh boy.

[B]The Reason Why:[/B] Genevieve has always been a girl looking for adventure. Although the bustling town where she had grown up was an amazing place to many outsiders, she found it quite boring after several years. Every time she traveled down the main street, she saw the same methodical actions being performed day after day. She would see the same shops, the same trading caravans, and the same people. Knowing many of the amazing stories that the lord had told her as she grew older, she knew that the only way to get the change of pace that she so desperately craved was to leave the town behind and search for the adventure herself. With the allowance of her family and her lord, she set off. The train was just what she needed.  

[B]Background:[/B] Several generations ago, Genevieve's ancestors were powerful and wealthy, much like many of the lords in the world today. In fact, the Abbot family was as powerful as the Tobba family, a current benefactor of the town of Bloomgarden. Though many would consider the families rivals, they were actually good friends in many ways. This friendship was particularly apparent after the Abbot family found themselves in a mess financially due to assets that were not exactly a good choice to invest in. Due to this bad investment, the family eventually found themselves in debt with no way to pay off what they owed. The generous Tobba family were the first to help the Abbot's and through a legal contract, managed to pay off the families debt in exchange for the Abbot's servitude. 

Generations later, Genevieve was born into the same state of indentured servitude as her father and his father before him.  Of course, it wasn't as if this made her life incredibly hard. Despite the fact that they were servants, the family remained good friends with their lords. Aside from her father, Lord Anthony Tobba has always been one of the nicest men in her life, often considering not only her family, but many of the other in his servitude as equals. He, through his own numerous adventures and reasonable investments, has been one of the most successful lords in his family for more generation than could be remembered. It wasn't uncommon for him to leave for one of his adventures, Genevieve's father, Tully, in tow. 

She couldn't count the number of tales that had been told to her by the men. Each one always seemed more interesting than the last. Though many of the trips probably weren't as exciting as the stories, Genevieve couldn't help but wish for such things to happen to her. 

It wasn't long before Genevieve found herself old enough to explore the town by herself. It was indeed large, particularly to the young girl who had only ever left the town on small walks with her mother. She was finally given a chance to explore the town. She would look for every nook and cranny, talk to anyone she could, and even go as far out of the town as was allowed. However, things quickly became boring. You could only see the same thing so many times and be content about it.   

[B]Personal Effects:[/B] Aside from a few changes of clothing, Genevieve only has two objects that she values: her red scarf given to her by her mother and a small, silver pocket watch that was bestowed upon her by the lord for whom her family had worked. 

[B]RP Sample:[/B] [URL="https://www.pokecommunity.com/showpost.php?p=8012227&postcount=205"]Here~[/URL][/INDENT][/div]

[/div][/INDENT][/CENTER][/SPOILER]

But also use the code!

[SPOILER][HTML][CENTER][div="background-image: url("BACKGROUND IMAGE"); border-color: #000000;  border-style: solid; border-width: 5px; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 15px; moz-border-radius: 15px; width: 800px; text-align: left;"][INDENT]

[div="background-color: #ffffff; border-style: solid;  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; moz-border-radius: 5px; font-size: 12px; "][indent][CENTER][B][h2][SIZE="5"]CHARACTER NAME[/SIZE]
[title="CHARACTER NAME"][img] CHARACTER PICTURE LINK [/img][/title] 
[SIZE="4"][I]QUOTE[/I][/SIZE][/h2][/B]
[I]AGE // TITLE // Gender[/I][/CENTER]

~POST INFORMATION HERE~

[/INDENT][/div]

[/div][/INDENT][/CENTER]

[/SPOILER]

Thanks! This was the way I originally intended the thread to work, but I used the noparse tag instead and some things went haywire. But if the html tag will display even bbcode as unparsed, it's great!

 

[Ice1]

Okay, I thought I'd might share my Railways CSS. It's a simple post layout, and it doesn't try to do anything too fancy.

Spoiler:

Carl Burk​

The Dullton sweeper

Train​

I AM TELLING A STORY


THE END

​

Spoiler:

[CENTER][div="background-image: url('IMAGE LINK'); padding-top: 50px; padding-bottom: 5px; padding-left: 30px; padding-right: 5px; border-top-left-radius: 50px; border-top-right-radius: 50px; moz-border-radius: 15px; height: 180px; width: 800px; text-align: left; background-size:cover; text-align: justify; "][FONT="Berkshire Swash"][SIZE="7"][B][LEFT]CHARACTER NAME[/LEFT][/B][/SIZE]
[SIZE="4"]CHARACTER TITLE/LOCATION/EXTRA INFORMATION[/SIZE][/FONT]
[SIZE="5"][/SIZE][/div][div="background: white; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; moz-border-radius: 15px; width: 800px; text-align: left;"]

[CENTER][B][SIZE="4"]TITLE[/SIZE][/B][/CENTER]


I AM TELLING A STORY


THE END
[/div][INDENT][/INDENT][/CENTER]

If you want to show more information in the upper part, increase the amount the number after height.

height: 180px;

would become

height: 300px;

The second part does not need a set height as it stretches with the text.

 

[gimmepie]

I'll submit more later but I'll start with this.

Below is what I did for my Reapers SU

Spoiler:

Samael Arcanum
Aged 32 | Male | General of the Atlantean Guard​

Appearance​

Samael is a tall man standing at 6'5 and is stocky and well built with thick muscles developed in his years as a shoulder and broad shoulders. His skin bears a light tan, something typical of the Atlantean people but is lighter than many since he spends more time indoors than he once did. Samael has long brown hair, which he wears in a ponytail that reaches the height of his shoulders and has a bear of the same colour that follows his somewhat pronounced jawline. Samael has relatively small brown eyes and is usually seen donning a stern expression.

Samael tends to be working, even if he doesn't spend much time in the field anymore so his clothes tend to be of a style appropriate for one who deals with high-ranking members of society. More often than not, Samael wears simple black pants and a matching tunic, over which he wears a thin but long coat in traditional Atlantean shades of aqua colours. Samael wears long, durable boots made of leather and a matching belt from which a simple axe usually hangs. Over his clothes he tends to wear a poncho that matches his coat and the pendant that signifies his position is always worn around his neck. When Samael is in the field he wears typical Atlantean armour over his tunic and carries a water tank on his back, his armour being gold to signify him as one of high rank. On the off chance you catch him when he isn't working, Samael can be seen wearing just his black pants and tunic, maybe with his coat on if the weather is cold.


Personality

Samael is a stern but caring man and he longs to see his city continue to thrive in peace and for his family to be happy and healthy. He is the type of person who puts up a tough front in public, adopting a stern demeanor fit for his position in public but who is a doting husband and father behind closed doors.

Samael is a man who believes rules are made to be followed. He does not tolerate those who break the law but he is also a reasonable and forgiving person who seeks to reform rather than to punish.

A hard worker, Samael is often scene within the Atlantean Palace where the council and other higher-ups conduct their business and is prepared to go above and beyond the requirements of his position to ensure peace and prosperity for the Atlantean people. Despite this nature though, he is not an ambitious person and is content with his lot in life. He makes a comfortable living and has the respect of his family and comrades and that is all the he asks for.



Weaponry

Other than the weaponry built into the armour he wears in the field, Samael is well known for his tendency to carry around a small axe with which he is surprisingly formidable. Samael is also a competent swordsman and has at least a rudimentary knowledge of other weapons as required by his duties.


Background Info

Samael comes from a family of sea-farmers but ever since he was a child he had no intention of remaining in that profession. His parents and upbringing may have given him a taste for the simple things in life, however Samael always longed to be a soldier as a child. At first he dreamed of glory and honour like all young boys do but as he got older he developed a genuine interest in the safety and prosperity of Atlantis.

This sense of civic duty has never left Samael since its development. Upon his sixteenth birthday he all but immediately signed up to be trained as a member of the Atlantean Guard. He worked hard as a recruit and was quick to be noticed by his superiors for his dedication. He was not the most naturally talented of the group but he was skilled at strategizing and he worked hard to hone his abilities.

It was not long before Samael earned his silver armour and begun to serve as an active member of the Atlantean Guard. It was during these years that he laid the foundations for his future building his reputation with the Guard but also meeting the woman who is now his wife.

After many years in the silver ranks, Samael made it to the golds. He continued his hard work and even when discontent with the council and the guard would rise he was often able to find the best solution for volatile situations. It was because of his ability to simultaneously please the public and carry out his duties that he was offered the position of General and trainer. With his first child on the way, Samael gladly left active duty behind in favour of running things from behind the scenes and training new recruits.

Several years later and Samael is now considered a candidate for the next council elections – although he disagrees with anybody who suggests such a thing – and is continuing his duties as a General and a trainer.



RP Sample

I don't have to give one because I'm a GM :P

This is the CSS template

Spoiler:

[CENTER][div="background-color: white; border: double; border-color: #1E90FF; border-width: 12px; width: 600px;"][CENTER][SIZE="7"][FONT="Abril Fatface"]Name[/FONT][/SIZE]
[SIZE="2"]Age | Gender | Occupation/Something Else[/SIZE][/CENTER]

[cd="float: right; padding: left;"][IMG]https://i.imgur.com/bVw5p4K.png[/IMG][/cd]
[CENTER][cd="background-color: #1E90FF; width: 530px; padding: 12px;"][CENTER][SIZE="3"][COLOR="White"][FONT="Abril Fatface"]Category[/FONT][/SIZE][/CENTER]




[SIZE=3][FONT="Abril Fatface"]Category[/FONT][/SIZE]





[SIZE=3][FONT="Abril Fatface"]Category[/FONT][/SIZE]




[SIZE=3][FONT="Abril Fatface"]Category[/FONT][/SIZE]





[SIZE=3][FONT="Abril Fatface"]Category[/FONT][/SIZE]

[/COLOR][/cd][/CENTER]


[/div][/CENTER]

To change the colours of the border and the matching (if you want it matching anyway) block of colour inside just change the colour code next to border-color: and the second bit that says background-color:

To change the image just select a different image URL and place it between the tags.



Here is an accompanying IC post format to go with the SU one.

[spoiler][CENTER][div="background-color: white; border: double; border-color: #1E90FF; border-width: 12px; width: 600px;"]

[CENTER][cd="background-color: #1E90FF; width: 530px; padding; 12px;"][CENTER][COLOR="white"][SIZE="7"][FONT="Abril Fatface"]Name[/FONT][/SIZE]
[IMG]https://i.imgur.com/7jARvGx.png
Age | Gender | Occupation/Something Else[/COLOR][/CENTER][/cd][/CENTER]

Insert IC text here​

[/div][/CENTER][/spoiler]

Spoiler: Copy for CSS

[CENTER][div="background-color: white; border: double; border-color: #1E90FF; border-width: 12px; width: 600px;"]

[CENTER][cd="background-color: #1E90FF; width: 530px; padding; 12px;"][CENTER][COLOR="white"][SIZE="7"][FONT="Abril Fatface"]Name[/FONT][/SIZE]
[IMG]https://i.imgur.com/7jARvGx.png[/IMG]
[SIZE="2"]Age | Gender | Occupation/Something Else[/SIZE][/COLOR][/CENTER][/cd][/CENTER]

[cd="background-color: white; width: 530px; align: left; color: black; padding: 12px;"] [Left]Insert IC text here[/left][/cd]

[/div][/CENTER]

To change the matching (again assuming you want them matching) border and block of blue change the part that says border-color and also the second background-color. If anyone has any questions about this template they are welcome to message me.

I know I used somewhat bright colours (don't kill me Adventure) but I use a bright skin myself and it looks fine to me so I assume it will to other users of bright skins, especially because I don't normally like bright CSS xD.

 

[Etherion]

Heres something from my new fanfic :)
It can be used for anything, either SU, OP or IC

Title Here

"Neque porro quisquam est qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit...""There is no one who loves pain itself, who seeks after it and wants to have it, simply because it is pain..."

something here

Spoiler:

[center][div="width:600px; height: auto; background-color:#B68D3D ; text-align:left; color:#FAF7F7; font-family: courier new; font-size: 30px; padding-left:30px;border-top-left-radius:2em 1.5em;"][FONT="Berkshire Swash"][span="text-shadow: 2px 2px 0px #111111;"]Title Here[/font][/div][/span][cd=width:600px; padding-left: 30px; padding-top: 10px; padding-right: 40px; padding-bottom: 10px; background-color: #348a6b; text-align: center;]body here
[/cd][div="width:600px; height: auto; background-color:#B68D3D ; text-align:center; color:#FAF7F7; font-family: courier new; font-size: 15px; padding-left:30px;border-bottom-right-radius:2em 1.5em;"][FONT="Berkshire Swash"][i][span="text-shadow: 1px 1px 0px #111111;"]something here[/span][/i][/font][/div][/center]

 

[moon]

Looking good guys! I added that it would be neat if you gave your templates simple, descriptive names. I've already done it for the ones submitted so far but in the future, please do it yourselves :3

 

[gimmepie]

Here, have new CSS for an OP of some sort.

Spoiler: The Forest

Title Here​

INFO BOX ONE​

Make a new one of these for each section of your OP. For example, this one might explain the lore of your roleplay, the next might explain how your characters fit in, the next gameplay and so on.​

Spoiler: Code

[CENTER][div="background-color: #003300; width: 700px; border: solid; border-color: #FFD700; border-width: 17px; border-radius: 20px; padding: 20px;"]
[cd="background-image: url("https://media.giphy.com/media/7cTJ3gWVsoC08/giphy.gif"); width: 600px; height: 280px; padding: 20px;"]




[CENTER][FONT="Merriweather"][B][COLOR="Black"][SIZE="7"]Title Here[/SIZE][/COLOR][/B][/FONT][/CENTER][/cd]


[cd="background-color: #FFD700; width: 600; border: solid; border-color: #FFD700; border-width: 17px; border-radius: 20px; padding: 20px; opacity: 0.7;"][CENTER][SIZE="4"][B]INFO BOX ONE[/B][/SIZE][/CENTER]

[Left][B]Make a new one of these for each section of your OP. For example, this one might explain the lore of your roleplay, the next might explain how your characters fit in, the next gameplay and so on.[/B][/Left]
[/cd]

[/div][/CENTER]

 

[SylveonStar]

here's the one I use for sign ups

Spoiler:

"Let's play"

Name: Lilliana Marie Davis Age: 12 Gender: Female Hometown: Lillycove City, Hoenn

Interests and goals: Lilliana is a very sweet and naive young girl who tends to still act very childish for someone who is almost 13 years old. She's very playful and treats everything as a game, another thing Liliana does is try to get anyone she meets to play with her. Though most misunderstand the term at times nine times out of ten what she wants to play is a pokemon battle. She has a strong love for cute and beautiful Pokemon and she wants to catch all that she can in order to strive for her dream when she goes home to Lillycove, Pokemon contests. Her plan for this journey is to grow as strong as she can and collect all the cute pokemon she is able to in order to become a contest star back home. Another goal for her is to make all the friends she can along the way.

Family: Lilliana grew up with her mother (Aliyah) and her father (Marcus) as well as her twin brother (Alexander) in a well of home in Lillycove City. Her father was a big investor into the Lillycove department store and earned a lot of money back from his investments leaving the small family very well off. Her mother was a Pokemon breeder known throughout Hoenn for her skill and love for Pokemon. Trainers from all over made a point to stop by when in Lillycove to ask for advice and help with their Pokemon. Lilliana growing up spent most of her time caring for her twin Alexander who had been paralyzed in an accident when they where lilttle. What time wasn't with her beloved twin was spent with her mother learning about Pokemon Breeding.

Strengths: Lilliana has a lot of skill when it comes to caring and nuturing Pokemon due to her Mothers lessons growing up. She knows the types of food and berries each Pokemon likes and loves to groom her Pokemon at least once every day. She's also very playful with not only her Pokemon but with others as well. Lilliana also has a very active imagination that enables her to think outside the box when it comes to battling and making her Pokemon's moves look beautiful.

Weaknesses: Lilliana's childish nature can be a bit of a bad things at times. She's very naive and too trusting of People. She can't really tell right away if someone is a bad person that will take advantage of her. Lilliana also has a strong fear of thunder and despite growing up near the ocean doesn't know how to swim.

Starter pokémon:

Marill (Aria) Female Moveset: Aqua Tail, Aqua Ring, Rain Dance, Bubble Beam, Ice Beam

Second pokémon:

Vulpix (Alex) Male Moveset: Fire Spin, Wil-O-Wisp, Feint Attack, Quick Attack, Ember
​

​

The code just change the numbers with # in front of them to change the colors

Spoiler:

[center][cd=background-color: #fff; color: #000000; padding: 30px; width: 700px; text-align: justify; border-top: 20px solid #0033FF; border-bottom: 20px solid #0033FF; border-radius: 20px;][CENTER] [I]character quote[/I]

[cd=width: 600px; border-radius: 15px; background-color: #0066FF; padding: 5px; font-size:15px; color:  #fff;][I][FONT="Cabin Sketch"]name, age, etc[/FONT][/I][/cd]
[cd=float: left; padding-right: 10px;][Img]character image[/Img][/cd]

main sign up info here

[Title= pokemon info][IMG]pokemon image[/IMG][/Title]
[/cd][/center][/center]

and for posts

Spoiler:

Part 6: Boulder Badge earned

Lilliana

Spoiler:

Badges

Spoiler:

After a few moments the dust cleared and Lilliana smiled happily jumping into the air with a cheer. "Yay way to go Aria!" she giggled seeing Brock's Geodude fainted and Aria standing weakly.

"Congrats Kid, you've successfully earned the Boulder Badge" Brock smiled handing her the badge and she quickly pulled out the blue case her father had made for her and fit the Boulder Badge into the correct spot. "That was a great battle, you've got one badge Lilliana seven more to go"

"Thank you for playing with me" Lilliana giggled and called Aria back into her Pokeball. She walked a few steps away from Brock and then turned her head smiling. "Hopefully we'll get the chance to do this again" she waved her hand and ran out of the gym.

First stop the Pokemon Center and then route 3 she thought slowing down as she neared the Pokemon Center. Entering the doors she had a short conversation with Nurse Joy and handed over Aria's and Alex's Pokeballs. "While you heal them is there a video phone I can use?" she asked kindly.

"Yes dear right over there. I'll bring your Pokemon over to you when they're healed" Nurse Joy said pointing at a machine against the wall with a stool in front of it.

"Thank you Nurse Joy" Lilliana bowed her head respectfully like her father had drilled into her. Walking over to the machine she hopped up onto the stool and entered the number for the video phone that was in Alexander's room at home. After a few minutes the ringing stopped and the image of her twin older by five minutes. "Alexander" she smiled happily seeing the boy with the same blue hair and the same eyes as her.

"Lilli just now calling me you said you would as soon as you got there" Alexander smiled at her through the screen.

"I'm sorry Alexander you know how I am I got distracted if I didn't have Aria i would have forgotten what I was here for" Lilliana smiled sheepishly rubbing the back of her head.

"It's alright sis, so what all have you done so far?"

"Well on the way here Aria and I fought a Vulpix and I caught it. I named it Alex. Um...I made a friend named Delta I saved him from a fire in the forest and got him to play tag with me" she smiled happily digging into her bag and pulling out her badge case opening it. "I just earned this"

"Way to go Lilli I'm proud of you" Alexander smiled at her but she could see the longing look in his eyes.

"I'm winning these for you Alexander. I don't wanna be a gym trainer but I know you want to" she frowned a sad look forming on her face as she started to think.

"Lilli! Lilliana look at me" she heard her twin call out and she looked up meeting his eyes and snapping out of her thoughts seeing a look of relief on his face.

"What?" she asked as Nurse Joy came over and handed her two Pokeballs. "Thank you Nurse Joy."

"Nothing Lilli" Alexander smiled softly I just don't want you to remember that day he thought keeping the smile on his face. "It's off to the next gym right? I'd see about catching a grass type or an electric type. Aria's a water type and Alex won't stand a chance against Misty's water type Pokemon."

"That's a great idea bro" Lilliana smiled. "I should get going I want to get as far as I can before it gets too dark"

Alexander looked at her sternly and sighed. "Be careful please if you insist on heading out now maybe try to find someone to go with so your not alone at night please"

"I will Alexander. I love you and tell mom and dad I love them too I'll call again when I reach another Pokemon Center"

"Love you too Sis have fun" Alexander smiled at her and waved his hand making Lilliana hide a wince. She felt so bad knowing her brother could only move his arms but not being able to remember why it had happened.

Ending the call Lilliana got up from the stool and exited the Pokemon Center hoping to run into someone willing to travel with her for the night.
​

​

the code, same as before change the numbers with # in front of them to change the colors.

[CENTER][cd=background-color: #fff; color: #000000; padding: 30px; width: 700px; text-align: justify; border-top: 20px solid #0033FF; border-bottom: 20px solid #0033FF; border-left: 20px solid #0033FF; border-right: 20px solid #0033FF; border-radius: 20px;][CENTER] [I]post title[/I]

[cd=width: 600px; border-radius: 15px; background-color: #0066FF; padding: 5px; font-size:15px; color: #fff;][I][FONT="Cabin Sketch"][SIZE="5"]Lilliana [IMG]character image[/IMG][SPOILER][Title= pokemon info][IMG]pokemon image[/IMG][/Title][Title= pokemon info][IMG]pokemon image[/IMG][/Title][/SPOILER]
Badges
[SPOILER][IMG][/IMG][/SPOILER][/SIZE][/FONT][/I][/cd]

[LEFT]post[/LEFT] 
[/cd][/center][/center]

 

[Ice1]

Time to dump some CSS I've produced over the ages.

The Venice OP CSS. It's made by me, but Foxrally improved it, so it's looks better when you're looking at the code.

Spoiler:

RP TITLE HERE​

There's space I for links I here

Welcome​

THIS IS MY RP OP, I USE THIS TO RP, OKAY​

​

EMPTY BLOCK​

​

Here's the code version:

Spoiler:

[CENTER][cd=width:800px; height: 325px; background-image: url('Image of Choice here'); padding-left: 50px; border-top-left-radius: 15px; border-top-right-radius: 15px][SIZE="7"][COLOR="White"][LEFT][FONT="berkshire swash"]


RP TITLE HERE [/FONT][/LEFT][/COLOR][/SIZE][/cd][div="background: black; padding-top: 20px; padding-bottom: 20px; padding-left: 5px; padding-right: 5px; border-bottom-left-radius: 15px; border-bottom-right-radius: 15px; moz-border-radius: 15px; width: 800px; text-align: left;"]

[center][cd="background-color: white; width: 650px; border-radius: 5px; padding: 30px;"][CENTER][SIZE="2"][URL="LINK HERE"]There's space[/URL] I [URL="LINK HERE"]for links[/URL] I [URL="LINKLE HERE"]here[/URL][/SIZE]

[CENTER][B][SIZE="4"][FONT="Berkshire Swash"]Welcome[/FONT][/SIZE][/B][/CENTER]

[LEFT]THIS IS MY RP OP, I USE THIS TO RP, OKAY[/LEFT][/cd]

[/CENTER]

[cd="background-color: white; width: 650px; border-radius: 5px; padding: 30px;"][CENTER][B][SIZE="4"][FONT="Berkshire Swash"]EMPTY BLOCK[/FONT][/SIZE][/B][/CENTER][/cd]

[/CENTER]

[/div][/CENTER]

Then, the CSS is use for my Gunpowder character

Spoiler:

Character name
Char. Info 1- Info
Char. Info 2 - Info
Char. Info 3- Info
Char. Info 4- Info

Post Title ​

here's where the talky talk and the doobliedoob goes

Spoiler:

[center][cd=width: 700px; text-align: justify;][FONT="Slackey"][SIZE="5"][B]Character name[/B][/SIZE][/font]
[FONT="Slackey"][SIZE="3"][B]Char. Info 1[/B][/SIZE]-[/FONT] Info
[FONT="Slackey"][SIZE="3"][B]Char. Info 2 [/B][/SIZE]-[/FONT] Info
[FONT="Slackey"][SIZE="3"][B]Char. Info 3[/B]-[/SIZE][/FONT] Info
[FONT="Slackey"][SIZE="3"][B]Char. Info 4[/B][/SIZE][/FONT]- Info
[COLOR="Black"]
[cd=background-color: white; border-top: 30px groove #A9E2F3; border-bottom: 30px groove #A9E2F3; padding-left: 30px; padding-right: 30px;]
[center][SIZE="5"][FONT="Slackey"][B]Post Title [/B][/FONT][/SIZE][/center]
[font=droid sans]
 here's where the talky talk and the doobliedoob goes

[/cd][/COLOR][/font][/cd][/center]

 

[Dusty]

Suppose I have a couple I could dump off for now.

Here is an extremely simple one, but it has a nice dark background that I like for an OP.

Spoiler:

TITLE GOES HERE

Rating

GM: Your Name Here

Co-GM: Other Name Here

​

Some lore/plot stuff can go here.
​

​

​

Another box for text and stuff​

And for the code...

Spoiler:

[CENTER][div="background-image: url("https://3.bp.blogspot.com/-P1hVveEqNrI/Vg4w6AzUg0I/AAAAAAAAAAw/zWhsLAG3Slg/s640/black_texture-wallpaper-1920x1080%2BFinal.jpg"); width: 1000px; border: solid;  border-color: #000000; border-width: 17px; border-top-left-radius: 20px; padding: 20px; border-bottom-right-radius: 20px; padding: 20px"]

[CENTER][FONT="Alegreya Sans SC"][B][COLOR="Silver"][SIZE="7"]TITLE GOES HERE[/SIZE][/COLOR][/B][/FONT]

[Font="Alegreya Sans SC"][B][COLOR="Silver"][SIZE="3"] Rating

GM: Your Name Here

Co-GM: Other Name Here[/SIZE][/COLOR][/B][/FONT]

[/CENTER]


[cd="background-color: #FFFFCC; width: 600; border: solid; border-color: #000000; border-width: 17px; border-radius: 20px; padding: 20px; opacity: 0.7;"][COLOR="Black"][LEFT]Some lore/plot stuff can go here.
[/COLOR][/Left][/CD]

[cd="background-color: #000000; width: 600; border: solid; border-color: #000000; border-width: 17px; border-radius: 20px; padding: 20px; opacity: 0.7;"][CENTER][SIZE="4"][B][COLOR="White"][/COLOR][/B][/SIZE][/CENTER][Left][COLOR="White"]Another box for text and stuff[/COLOR][/LEFT]
[/cd]
[/div][/CENTER]

And a version for posts...

Spoiler:

Location
Status
Other Stuff​

​

Text for posts go here​

And the code version

Spoiler:

[CENTER][div="background-image: url("https://3.bp.blogspot.com/-P1hVveEqNrI/Vg4w6AzUg0I/AAAAAAAAAAw/zWhsLAG3Slg/s640/black_texture-wallpaper-1920x1080%2BFinal.jpg"); width: 1000px; border: solid;  border-color: #000000; border-width: 17px; border-top-left-radius: 20px; padding: 20px; border-bottom-right-radius: 20px; padding: 20px"]
[left][indent][FONT="Alegreya Sans SC"][B][COLOR="Silver"][SIZE="3"]Location
Status
Other Stuff[/SIZE][/COLOR][/B][/FONT][/left][/indent]

[div="width: 950px; height: 6px; background-color:#C0C0C0"][/div]

[cd="background-color: #000000; width: 600; border: solid; border-color: #000000; border-width: 17px; border-radius: 20px; padding: 20px; opacity: 0.7;"][Left]
[color="WHITE"]Text for posts go here[/COLOR][/LEFT]
[/cd]

[/div][/CENTER]

Couple simple ones I had lying around. I have a some more I'm cooking up, fancier ones. But thats it for now :D


EDIT: Another CSS I just finished working on. Might rework the colors a bit in the future, but I'll leave it as is for now. For SUs by the way.

Spoiler:

NAME HERE

--=-- AGE =--= GENDER --=--​

INFO BOX ONE​

​

​

​

And finally the HTML version.

Spoiler:

[CENTER][div="background-image: url("https://www.photoshopbuzz.com/wp-content/uploads/2010/12/snowflake-tile.jpg"); border-color: #aad4e5;  border-style: solid; border-width: 20px; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 15px; moz-border-radius: 15px; width: 800px; text-align: left;"][INDENT]

[div="background-color: #fffacd; border-style: solid;  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; moz-border-radius: 5px; font-size: 12px; "][indent][CENTER][B][h2][SIZE="5"]NAME HERE[/SIZE]
[img]APPEARANCE PICTURE GOES HERE[/img] 


[/h2][/B]
[I]--=--   AGE   =--=   GENDER   --=--[/I][/CENTER]

[cd="background-color: #beb29a; width: 600; border: solid; border-width: 2px; border-radius: 20px; padding: 20px;"][left][SIZE="3"][B]INFO BOX ONE[/B][/SIZE][/left]
[/cd]


[/INDENT][/div]

[/INDENT][/div][INDENT][/INDENT][/CENTER]

Okay, cooked up a version for posts cuz who needs to pay attention in class! :D

The full version...

Spoiler:

Name
Status
Location
Team​

​

​

TEXT GOES HERE​

​

​

​

And the HTML version...

Spoiler:

[CENTER][div="background-image: url("https://www.photoshopbuzz.com/wp-content/uploads/2010/12/snowflake-tile.jpg"); border-color: #aad4e5;  border-style: solid; border-width: 20px; padding-top: 20px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 15px; moz-border-radius: 15px; width: 950px; text-align: left;"][INDENT]

[div="background-color: #fffacd; border-style: solid;  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; moz-border-radius: 5px; font-size: 12px; "][indent][LEFT][B][cd="float: left;"][img]https://4.bp.blogspot.com/-q6ea6Sw76KA/VkzNjbLrwzI/AAAAAAAAAEk/QDjrfA1pbcI/s1600/Markson%2B-%2Bcircle.png[/img][/cd]
[RIGHT][SIZE="4"][FONT="Kaushan Script"]Name
Status
Location
Team[/FONT][/SIZE][/LEFT][/RIGHT]





[H2]
[/h2][/B]


[cd="background-color: #492D1F; width: 600; border: solid; border-width: 2px; border-radius: 20px; padding: 20px;"][left][SIZE="2"][B][COLOR="White"]TEXT GOES HERE[/COLOR][/B][/SIZE][/left]
[/cd]


[/INDENT][/div]

[/INDENT][/div][INDENT][/INDENT][/CENTER]

 

[Circuit]

Alright I'm dropping my Redux SU in here, since I've had a lot of compliments on it. Sharing is caring after all :)

Firstly, here is how it should look:

Spoiler:

SU Title

SU Subtitle

Primary Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Secondary Body Text

Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.

Sed ut perspiciatis unde omnis iste natus error sit voluptatem accusantium doloremque laudantium, totam rem aperiam, eaque ipsa quae ab illo inventore veritatis et quasi architecto beatae vitae dicta sunt explicabo. Nemo enim ipsam voluptatem quia voluptas sit aspernatur aut odit aut fugit, sed quia consequuntur magni dolores eos qui ratione voluptatem sequi nesciunt. Neque porro quisquam est, qui dolorem ipsum quia dolor sit amet, consectetur, adipisci velit, sed quia non numquam eius modi tempora incidunt ut labore et dolore magnam aliquam quaerat voluptatem. Ut enim ad minima veniam, quis nostrum exercitationem ullam corporis suscipit laboriosam, nisi ut aliquid ex ea commodi consequatur? Quis autem vel eum iure reprehenderit qui in ea voluptate velit esse quam nihil molestiae consequatur, vel illum qui dolorem eum fugiat quo voluptas nulla pariatur?

Function of this CSS: The Primary Body Text box can have as much text as you want without stretching the page, since it automatically locks the text into the region defined. The text will instead scroll, and keeps the page and CSS looking tidy. The Secondary Body Text box will not contain your text into a predefined region, and will stretch the page; use this for small informational text e.g. Starter Pokémon

And now for the code. Are you ready? I hope you are ready cause it's gonna blow your mind:

Spoiler:

[CENTER][cd=width:50%;height:100%;background: linear-gradient(#32819C, #052936);background: -webkit-linear-gradient(#32819C, #052936);background: -o-linear-gradient(#32819C, #052936);background: -moz-linear-gradient(#32819C, #052936);border-top-left-radius:60px;border-bottom-right-radius:60px;border-top-right-radius:5px;border-bottom-left-radius:5px;padding:50px;color:#E6E6E6;font-family: 'Voltaire';font-weight:400;line-height;15px;font-size:14px;text-align:justify;][cd=font-size:52px;font-weight:600;text-align:right;line-height:60px;]SU Title[/cd][cd=font-size:23px;font-weight:500;text-align:right;line-height:60px;]SU Subtitle[/cd][cd=width:100%;height:400px;background: linear-gradient(#FFFFFF, #C7C7C7);background: -webkit-linear-gradient(#FFFFFF, #C7C7C7);background: -o-linear-gradient(#FFFFFF, #C7C7C7);background: -moz-linear-gradient(#FFFFFF, #C7C7C7);border: 5px inset #32819C;overflow:auto;color:#000;]Primary Body Text[/cd]

[cd=width:100%;height:100%;background: linear-gradient(#FFFFFF, #C7C7C7);background: -webkit-linear-gradient(#FFFFFF, #C7C7C7);background: -o-linear-gradient(#FFFFFF, #C7C7C7);background: -moz-linear-gradient(#FFFFFF, #C7C7C7);border: 5px inset #32819C;color:#000;text-align:center;]Secondary Body Text[/cd][/cd][/CENTER]

Lol, not actually a lot there is there? Okay, I'm gonna explain a couple of things in here, because they can cause problems even if they are pretty self-explanatory. There are a lot of "background: linear-gradient" codes with things in front of the linear-gradient part. You need all of them, otherwise the code will not work on other browsers. Secondly, the colours inside the brackets there indicate between what colours the background transitions. The first colour is the starting colour and the second is the one it transitions to. You can have more than two colours in there, and it will transition from one to the other in order. But transitions will become less gradual as you input more colours, so be careful there. The percentage width values keep the CSS looking fine on any screen resolution. Percentages dictate what proportion of the Reply Text box is taken up by the CSS. 50% means that the CSS will be half as wide as the Reply Text box is. A pixel height is used in the height code for the Primary Body Text box to ensure that the scroll bar appears, giving the box a defined height to lock the text into. Otherwise it would stretch the page. Just these things you should be aware of, just to know how everything functions and to avoid it giving you gyp when you tamper with it.

Okay that's it for the most part. If you have problems with this or questions about it, shoot me a message and I'll do what I can :)

 

[gimmepie]

All new submissions have been added to the OP

 

[moon]

I'll leave this one here, in case someone likes it :D

Spoiler:

Title
Sub-title

Name:
Age:
Gender:
Appearance:
Personality:
Background:
A fin de indicar cómo se combinan estas dos superficies con el tiempo para generar un espacio-tiempo, debemos multiplicar todas sus distancias por un factor de escala o de expansión, que puede depender del tiempo. Cuando Friedmann aplicó esas geometrías a la ecuación de campo de Eins-tein y estudió la evolución del factor de expansión, descubrió que esos espacios tienen un destino aciago, a diferencia del modelo de geometría plana descripto anteriormente. Comprobó que el universo esférico se expande a partir de un big bang pero finalmente se detiene y comienza a contraerse para acabar en un big crunch. En cambio, el universo correspon­diente a la seudoesfera se expande también a partir de un big bang pero jamás cesa de expandirse: a diferencia de lo que sucede en el modelo de geometría plana, la desaceleración de la expansión no continúa en él inde­finidamente sino que alcanza un ritmo estable. En la figura 2 se grafica la evolución del factor de escala en función del tiempo según Friedmann para los tres modelos posibles.
Nos hemos encontrado antes con la misma antítesis, que no refleja más que una tensión que ya hemos debatido: la guerra entre la expansión y la atracción gravitatoria, o el hecho de que, por un lado, el espacio "se infla" y, por el otro, la fuerza de la gravedad actúa en sentido contrario, empujando todo hacia adentro y tendiendo a congregarlo. La evolución del modelo cerrado o esférico es tal que la gravedad finalmente supera la expansión, de modo que esta última prosigue aunque permanentemente desacelerada por la gravedad, hasta que por fin se detiene y precipita al universo en una con­tracción cada vez más rápida que termina en el colapso final. En los mode­los abiertos o seudoesféricos, por el contrario, la expansión gana la batalla, y el universo acaba por escapar a su propia gravedad. Durante algún tiem­po, la gravedad tiene intensidad suficiente para desacelerar la expansión, pero al final, la expansión es tan veloz -o, según otro punto de vista, la materia del universo ha quedado tan diluida- que la gravedad ya no tiene importancia. Por esa razón, la expansión ya no se frena y comienza una fase en la cual el universo "escapa de sí mismo" y se transforma en algo vacío.

A fin de indicar cómo se combinan estas dos superficies con el tiempo para generar un espacio-tiempo, debemos multiplicar todas sus distancias por un factor de escala o de expansión, que puede depender del tiempo. Cuando Friedmann aplicó esas geometrías a la ecuación de campo de Eins-tein y estudió la evolución del factor de expansión, descubrió que esos espacios tienen un destino aciago, a diferencia del modelo de geometría plana descripto anteriormente. Comprobó que el universo esférico se expande a partir de un big bang pero finalmente se detiene y comienza a contraerse para acabar en un big crunch. En cambio, el universo correspon­diente a la seudoesfera se expande también a partir de un big bang pero jamás cesa de expandirse: a diferencia de lo que sucede en el modelo de geometría plana, la desaceleración de la expansión no continúa en él inde­finidamente sino que alcanza un ritmo estable. En la figura 2 se grafica la evolución del factor de escala en función del tiempo según Friedmann para los tres modelos posibles.
Nos hemos encontrado antes con la misma antítesis, que no refleja más que una tensión que ya hemos debatido: la guerra entre la expansión y la atracción gravitatoria, o el hecho de que, por un lado, el espacio "se infla" y, por el otro, la fuerza de la gravedad actúa en sentido contrario, empujando todo hacia adentro y tendiendo a congregarlo. La evolución del modelo cerrado o esférico es tal que la gravedad finalmente supera la expansión, de modo que esta última prosigue aunque permanentemente desacelerada por la gravedad, hasta que por fin se detiene y precipita al universo en una con­tracción cada vez más rápida que termina en el colapso final. En los mode­los abiertos o seudoesféricos, por el contrario, la expansión gana la batalla, y el universo acaba por escapar a su propia gravedad. Durante algún tiem­po, la gravedad tiene intensidad suficiente para desacelerar la expansión, pero al final, la expansión es tan veloz -o, según otro punto de vista, la materia del universo ha quedado tan diluida- que la gravedad ya no tiene importancia. Por esa razón, la expansión ya no se frena y comienza una fase en la cual el universo "escapa de sí mismo" y se transforma en algo vacío.

And here is the code:

Spoiler:

[cd="background-image: url("https://wallpaperscraft.com/image/band_vertical_background_dark_35114_800x1280.jpg"); width: 800px; height: 1280px; background-color: #000000; border-radius:30px; border 4px; padding: 20px;"] [div=background-color: #AB82FF; background:linear-gradient(#696969, #A9A9A9, #696969); border-radius: 8px; width: 600px; border: 4px solid #9B30FF; border: 8px ; padding: 15px; opacity: 0.8; text-font][span=font-size:28px; font-family: Griffy; font-weight:bold; color:#092a59; text-shadow: 0 0 3px #FF0000;]Title[/span][span=font-size:14px; font-family:Maven Pro; color:#092a59;text-shadow: 0 0 3px #FF0000;]Sub-title [/span][/div][cd=width:50%;height:65%; background-color: #AB82FF; background:linear-gradient(#696969, #A9A9A9, #696969); border-radius: 8px; width: 600px; border: 4px solid #9B30FF; overflow:auto;color:#000; border: 8px ; padding: 15px; font-family:Century Gothic;] BODY TEXT[/cd][/cd][/center]

I decided to share this one because you can customize it as you wish. First: You have the background image, you can just change the url, then you have a triple linear gradient, i would recommend that the top and bottom are the same colour but that's really up to you, then of course you can change the fonts, sizes. Hope you enjoy this!

Thank you for your contribution~! Added it to the OP.

 

[Dusty]

Here ya go, a very simple template I threw together for one of my roleplays, can be used for either SU or for posting. Pretty simple stuff for the most part. You can change the image by changing the link following the "float" command, and can change the location of the image as well by changing the "right" to "left" or "center".

Spoiler:

NAME

AGE // TITLE // GENDER​

~TEXT GOES HERE~







​

And here is the HTML version to edit:

Spoiler:

[CENTER][div="background-color: #ffffff; border-style: solid;  padding-top: 5px; padding-bottom: 5px; padding-left: 5px; padding-right: 5px; border-radius: 5px; border-top-left-radius: 20px 20px; border-bottom-right-radius: 20px 20px; border-top-right-radius: 20px 20px; border-bottom-left-radius: 20px 20px; moz-border-radius: 5px; font-size: 12px; width: 800px; "][cd="float: right; padding: left;"][IMG]https://s-media-cache-ak0.pinimg.com/236x/e8/7a/3d/e87a3d9ef4a1cdc22ff5ee0bfb5fc5b0.jpg[/IMG][/cd][indent][CENTER][B][h2][SIZE="5"]NAME[/SIZE]
[/h2][/B]
[I]AGE // TITLE // GENDER[/I][/CENTER]

~TEXT GOES HERE~


[/INDENT][/div]
[/CENTER]

Only thing to keep in mind is that if the post is not long enough, the image pokes through the bottom of the background. It would be pretty hard to have something that short though.

 

[gimmepie]

Consider it added!
Love the image in it btw