Character Plotters - Template and Tutorial

« Prev
1
Next »

staff

8,041 posts

26 years old

Administrator

played by Morgan

Nov 30, 2016 2:53:32 GMT -5

"Life ain't all blueberries and paper airplanes, you know what I mean."

quote

options

Post by Admin Morgan on Nov 30, 2016 2:53:32 GMT -5

[nospaces][googlefont="Oswald:400"]

[attr="class","colors-of-the-sky"]

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#ca4545;"]Age. School Year.

[attr="class","name"][attr="style","background-color:#ca4545;"]Gryffindor

[attr="class","main-content"][attr="style","background-color:#0b1014;"]
Friends[break]
-List friends here[break]
-List friends here[break]
[break]
Family[break]
-List family here[break]
-List family here[break]
[break]
Enemies[break]
-List enemies here[break]
-List enemies here[break]
[break]
Lovers[break]
-List lovers here[break]
-List lovers here[break]
[break]
Misc.[break]
-List misc. here[break]
-List misc. here

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#609a54;"]Age. School Year.

[attr="class","name"][attr="style","background-color:#609a54;"]Slytherin

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#417eca;"]Age. School Year.

[attr="class","name"][attr="style","background-color:#417eca;"]Ravenclaw

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#e6e5a1;"]Age. School Year.

[attr="class","name"][attr="style","background-color:#e6e5a1;"]Hufflepuff

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#7da6b3;"]Age. Job.

[attr="class","name"][attr="style","background-color:#7da6b3;"]University Student

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#59d1f7;"]Age. Job.

[attr="class","name"][attr="style","background-color:#59d1f7;"]Hogwarts

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#852555;"]Age. Job.

[attr="class","name"][attr="style","background-color:#852555;"]Primary School

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#644d80;"]Age. Job.

[attr="class","name"][attr="style","background-color:#644d80;"]University Staff

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#8525c5;"]Age. Job.

[attr="class","name"][attr="style","background-color:#8525c5;"]Ministry

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#ff8a4b;"]Age. School Year.

[attr="class","name"][attr="style","background-color:#ff8a4b;"]International Confederation of Wizards

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#a4e2a7;"]Age. Job.

[attr="class","name"][attr="style","background-color:#a4e2a7;"]St. Mungo's

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#0e9880;"]Age. Job.

[attr="class","name"][attr="style","background-color:#0e9880;"]Shop Worker

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#e98ae5;"]Age. Job.

[attr="class","name"][attr="style","background-color:#e98ae5;"]Publication

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#d6c189;"]Age. Job.

[attr="class","name"][attr="style","background-color:#d6c189;"]Quidditch

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#6499ff;"]Age. Job.

[attr="class","name"][attr="style","background-color:#6499ff;"]Specialty Career

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#d4af37;"]Age. Job.

[attr="class","name"][attr="style","background-color:#d4af37;"]Entertainment Career

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#ae81e7;"]Age. Job.

[attr="class","name"][attr="style","background-color:#ae81e7;"]Misc. Career

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#125d7a;"]Age. Job.

[attr="class","name"][attr="style","background-color:#125d7a;"]Criminal

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#683737;"]Age. Job.

[attr="class","name"][attr="style","background-color:#683737;"]Werewolf

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#b31f1f;"]Age. Job.

[attr="class","name"][attr="style","background-color:#b31f1f;"]Vampire

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#ac5220;"]Age. Job.

[attr="class","name"][attr="style","background-color:#ec5220;"]Veela

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#534c4c;"]Age. Job.

[attr="class","name"][attr="style","background-color:#534c4c;"]Ghost

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#6f1c1c;"]Age. Job.

[attr="class","name"][attr="style","background-color:#6f1c1c;"]Mudblood

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#125235;"]Age. Job.

[attr="class","name"][attr="style","background-color:#125235;"]Death Eater

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#464694;"]Age. Job.

[attr="class","name"][attr="style","background-color:#464694;"]Order of the Phoenix

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#c239a2;"]Age. Job.

[attr="class","name"][attr="style","background-color:#c239a2;"]Child

[attr="class","box"]

[attr="class","header1"][attr="style","background-color:#9e7d43;"]Age. Job.

[attr="class","name"][attr="style","background-color:#9e7d43;"]Squib

[attr="class","tempcredits"]CRAFTED BY ALISHA OF ADOXOGRAPHY

[newclass=".colors-of-the-sky"]width:610px;margin:0px auto;position:relative;[/newclass]
[newclass=".colors-of-the-sky .box"]width:290px;height:200px;position:relative;margin:2.5px;overflow:hidden;display:inline-block[/newclass]
[newclass=".colors-of-the-sky .box .header1"]width:290px;padding:8px 10px;background-color:#000;color:#fff;text-align:center;position:absolute;top:0px;z-index:1;margin:0px;font:13px Oswald;text-transform:uppercase;-webkit-transform: translateX(-310px);-o-transform: translateX(-310px);-moz-transform: translateX(-310px);transform:translateX(-310px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".colors-of-the-sky .box .main-content"]width:250px;height:155px;background-color:#262626;font:11px Helvetica;color:#000;border:3px double #ececec;padding:7px;text-align:justify;overflow:auto;margin:0px 10px;position:absolute;top:46px;z-index:1;transform:translateX(310px);-webkit-transform: translateX(310px);-o-transform: translateX(310px);-moz-transform: translateX(310px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".main-content img"]width:auto!important;height:auto!important;position:relative!important;margin:2px;display:block[/newclass]
[newclass=".main-content::-webkit-scrollbar"]width: 10px;background-color:#fff[/newclass]
[newclass=".main-content::-webkit-scrollbar-thumb"]background-color:#ececec[/newclass]
[newclass=".colors-of-the-sky .box:hover .main-content"]-webkit-transform: translateX(0px);-o-transform: translateX(0px);-moz-transform: translateX(0px);transform:translateX(0px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".colors-of-the-sky .box:hover .header1"]-webkit-transform: translateX(0px);-o-transform: translateX(0px);-moz-transform: translateX(0px);transform:translateX(0px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".colors-of-the-sky img"]width:300px;height:300px;position:absolute;top:0px;left:0px[/newclass]
[newclass=".colors-of-the-sky .name"]width:290px;padding:8px 10px;background-color:#000;color:#fff;text-align:center;position:absolute;bottom:5px;z-index:1;margin:0px;font:13px Oswald;text-transform:uppercase[/newclass]
[newclass=".colors-of-the-sky .tempcredits"]margin:3px 0px;width:100%;text-align:center;font: 10px 'Oswald'; text-transform:uppercase;letter-spacing:2px;[/newclass]
[newclass=".colors-of-the-sky .tempcredits a"]font: 10px 'Oswald'; text-transform:uppercase;letter-spacing:2px;[/newclass]

staff

8,041 posts

26 years old

Administrator

played by Morgan

Nov 30, 2016 3:18:52 GMT -5

"Life ain't all blueberries and paper airplanes, you know what I mean."

quote

options

Post by Admin Morgan on Nov 30, 2016 3:18:52 GMT -5

A HOW-TO GUIDE FOR PLOTTERS

I know that sometimes coding can get so confusing sometimes! Personally, I've messed up more than my fair share of codes just by removing something that looks so unimportant, so I'm going to make this as easy as possible for you guys! These plotters are going to be a super fun way to make it easier to plot with each other! We'll have a space where we can see everyone's characters and their info all at once, and can post on each other's plotters. It will be great for new members that don't know everyone as well, or just us if we're bored and looking around! It might look complicated to set up, so follow this how-to guide and I will make it easy as pie!

1. Since we're going to do every step of the way, I'm going to start out simple for you. Click Create a Thread. Yup. Good start guys! Name it what you want. But before you do anything, click BBCode at the bottom left. Thank you. Now moving on!

2. You are going to need to start your thread out with the following code:

[nospaces][googlefont="Oswald:400"][div][attr="class","colors-of-the-sky"]
That's a simple start, right? Right! Now it's going to get real up in here. I'm just kidding. It's not going to get that real. Next comes the actual part of the code. All of those will be in the post below, for each color group because we love colors here. I'm going to use Gryffindor for this description.

[div][attr="class","box"][img src="http://placehold.it/300x300" alt=" "]
[div][attr="class","header1"][attr="style","background-color:#ca4545;"]Age. School Year.[/div]
[div][attr="class","name"][attr="style","background-color:#ca4545;"]Character Name/Title[/div]
[div][attr="class","main-content"][attr="style","background-color:#0b1014;"]
[font color="b7b09b"][b][u]Friends[/u][/b][break]
-List friends here[break]
-List friends here[break]
[break]
[b][u]Family[/u][/b][break]
-List family here[break]
-List family here[break]
[break]
[b][u]Enemies[/u][/b][break]
-List enemies here[break]
-List enemies here[break]
[break]
[b][u]Lovers[/u][/b][break]
-List lovers here[break]
-List lovers here[break]
[break]
[b][u]Misc.[/u][/b][break]
-List misc. here[break]
-List misc. here[/font]
[/div][/div]

Look freaky? It's not I promise. All you have to do is fill in the blanks! Where you see this: placehold.it/300x300, is where you will put the URL of your picture! Of your character, of course. It needs to be 300x300 or a perfect square. If it's not, it will stretch funny and be ugly and we don't want that! If you need help resizing, just hit me up, I can do it for you! Then you put in all of your information, linking friends, enemies and such. Simple, right? Yes!

3. Now you just have to paste in the next code for your next character, staying in BBCode, and making sure you put it at the very end of the code. I recommend getting all of your codes pasted in first, and then going back in and filling in the blanks! Do this until all of your characters have their little square!

4. Finally, AND SERIOUSLY THIS IS SO IMPORTANT. You have to end your post with this, and by end, I mean put it once at the very end:

[div][attr="class","tempcredits"]CRAFTED BY [a href="http://adoxographyv2.boards.net/user/2"]ALISHA[/a] OF ADOXOGRAPHY[/div][/div]

[newclass=".colors-of-the-sky"]width:610px;margin:0px auto;position:relative;[/newclass]
[newclass=".colors-of-the-sky .box"]width:290px;height:200px;position:relative;margin:2.5px;overflow:hidden;display:inline-block[/newclass]
[newclass=".colors-of-the-sky .box .header1"]width:290px;padding:8px 10px;background-color:#000;color:#fff;text-align:center;position:absolute;top:0px;z-index:1;margin:0px;font:13px Oswald;text-transform:uppercase;-webkit-transform: translateX(-310px);-o-transform: translateX(-310px);-moz-transform: translateX(-310px);transform:translateX(-310px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".colors-of-the-sky .box .main-content"]width:250px;height:155px;background-color:#262626;font:11px Helvetica;color:#000;border:3px double #ececec;padding:7px;text-align:justify;overflow:auto;margin:0px 10px;position:absolute;top:46px;z-index:1;transform:translateX(310px);-webkit-transform: translateX(310px);-o-transform: translateX(310px);-moz-transform: translateX(310px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".main-content img"]width:auto!important;height:auto!important;position:relative!important;margin:2px;display:block[/newclass]
[newclass=".main-content::-webkit-scrollbar"]width: 10px;background-color:#fff[/newclass]
[newclass=".main-content::-webkit-scrollbar-thumb"]background-color:#ececec[/newclass]
[newclass=".colors-of-the-sky .box:hover .main-content"]-webkit-transform: translateX(0px);-o-transform: translateX(0px);-moz-transform: translateX(0px);transform:translateX(0px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".colors-of-the-sky .box:hover .header1"]-webkit-transform: translateX(0px);-o-transform: translateX(0px);-moz-transform: translateX(0px);transform:translateX(0px);-webkit-transition: all 0.5s ease-in-out;-moz-transition: all 0.5s ease-in-out;-o-transition: all 0.5s ease-in-out;-ms-transition: all 0.5s ease-in-out;transition: all 0.5s ease-in-out[/newclass]
[newclass=".colors-of-the-sky img"]width:300px;height:300px;position:absolute;top:0px;left:0px[/newclass]
[newclass=".colors-of-the-sky .name"]width:290px;padding:8px 10px;background-color:#000;color:#fff;text-align:center;position:absolute;bottom:5px;z-index:1;margin:0px;font:13px Oswald;text-transform:uppercase[/newclass]
[newclass=".colors-of-the-sky .tempcredits"]margin:3px 0px;width:100%;text-align:center;font: 10px 'Oswald'; text-transform:uppercase;letter-spacing:2px;[/newclass]
[newclass=".colors-of-the-sky .tempcredits a"]font: 10px 'Oswald'; text-transform:uppercase;letter-spacing:2px;[/newclass]

That is crazy scary I know, but you don't have to touch it! It just absolutely has to be the end of your post! So say you make this one day, and you create a new character. You just grab the code below, and put it above all that nonsense, all right? That will make it quite simple! Okay, that's all folks! Codes below!

Final Note: IT WILL NOT LOOK RIGHT UNTIL YOU CLICK SAVE. Unfortunate part of the coding...

staff

8,041 posts

26 years old

Administrator

played by Morgan

Nov 30, 2016 3:31:11 GMT -5

"Life ain't all blueberries and paper airplanes, you know what I mean."

quote

options

Post by Admin Morgan on Nov 30, 2016 3:31:11 GMT -5

CODES

Gryffindor