WAIT
A SUPERNATURAL CREATURES
&
BLEED
INTERMEDIATE AU NEW ORLEANS RPG



 
NEW REPLY
NEW TOPIC
NEW POLL

 Development Code
authored by
Wes
Nov 8 2017, 10:00 PM
Age 28
Height 5 ft 4 in
Weight Nah, son.
Affiliation The Triad
Sexuality Heteroflexible
Status Dating
Admin


Example


Lowe Avery
Nickname: Little Fox
Age: 76 years
Birthday: April 2, 1940
Astrology Sign: Aries
Height: 5ft. 1in. (154.94 cm)
Weight: 120 lbs
Occupation: Howlin' Wolf Bar & Grill Owner
Affiliation: Morrigan Pack
Orientation: Heterosexual
Dating Status: Future mate of Zaven Spencer

Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vivamus leo ex, lobortis suscipit est sit amet, malesuada facilisis neque. Praesent venenatis, magna dapibus finibus lacinia, neque tellus rutrum eros, ut porta lorem dolor eu elit. Integer lacinia sit amet ligula ut facilisis. Ut vulputate, turpis interdum porttitor vulputate, nulla ex vulputate mauris, sit amet mattis lacus nunc ut eros. Curabitur ac congue leo. Proin sapien ex, vulputate quis felis in, feugiat ullamcorper lectus. Nunc vestibulum, turpis ac bibendum pulvinar, odio sem ornare nibh, at rutrum ex quam vitae nisl. Praesent id elit non nunc malesuada lacinia vitae vel sem. Nam aliquet a ex vel mattis. Suspendisse suscipit nisl in neque facilisis hendrerit.

Praesent ultrices iaculis magna a pretium. Class aptent taciti sociosqu ad litora torquent per conubia nostra, per inceptos himenaeos. Curabitur nulla massa, dictum at volutpat ut, facilisis nec orci. Mauris gravida libero quis libero lacinia, quis faucibus leo ornare. Integer vulputate, nibh egestas semper sollicitudin, nunc nibh mollis quam, a laoreet quam tellus non urna. Etiam tristique lectus leo, eu rutrum diam sodales sed. Quisque vel laoreet ante, consequat consequat magna.

Aliquam eget aliquet quam. Nulla elementum, tellus quis molestie cursus, nunc neque fringilla justo, ac convallis quam turpis lacinia nulla. Donec tortor odio, eleifend vitae semper sed, scelerisque non quam. Aenean vitae diam tristique, dictum nulla eu, aliquam turpis. Phasellus vitae tempus risus. Donec eu purus tortor. Integer vel quam vitae enim suscipit fringilla a eget libero. Donec egestas purus non erat fermentum tincidunt. Pellentesque posuere ornare luctus. Duis non placerat odio, quis euismod sapien.

Girl Talk Early December, 2017
Just another day at the Howlin' Wolf, Lowe decorates for the Holidays while her packmate, Faye gushes about her upcoming date and tries to pull Lowe out of her slump... Still licking her wounds after the Pack War, Lowe looks forward to a nice, normal Christmas.
Leah & Lowe pull out their family decorations and decorate for Christmas, taking a sad trip down memory lane in the process, but a necessary part of healing.

"Until now, she'd always had some smart ass remark to shield herself from him. He'd always been an expert at getting under her skin. But now, they just existed side by side, savoring every breath, knowing how close Zaven had come to losing such a luxury. Finally, his breathing wasn't as heavy and the gap between shifts began to widen. His face still looked sunken and hollow, his body weak and pained. But he found his voice in the darkness.

“I meant what I said...When I called you on the phone...I love you.” She was thankful for the darkness, for it kept him from seeing the look on her face clearly. Her heart hammered in her chest with girlish excitement, but the first emotion to flash across her face was guilt. Part of her longed to say it back, but she couldn't. It wasn't fair. Zaven, sensing her hesitation, quickly tried to reassure her, to backpedal his way back to normalcy to relieve the pressure.

But now that she knew how she felt, she had turned a corner, jumped off a ledge that there was no turning back from. Once Lowe made up her mind, there was no unmaking it."





CODE BY WES
authored by
Wes
Dec 17 2017, 01:57 PM
Age 28
Height 5 ft 4 in
Weight Nah, son.
Affiliation The Triad
Sexuality Heteroflexible
Status Dating
Admin


Development Template

So this code has a ton of creative options, but if you just want to use the standard template that's fine too. I'm going to provide a full code example, but also provide an indepth tutorial if you want to sort of make it your own.


Full Standard Code

CODE
[dohtml]<div class="dev">
<div class="title"><span class="wolf">CHARACTER NAME</span></div>

<input type="radio" id="dev-1" name="option[]" value="one" checked><label for="dev-1" class="dev-1"> <span class="SPECIES"><i class="fas fa-user" title="Character"></i></span></label><div class="in-dev" id="one"><div class="content2"><article>

<blockquote>
[SPECIES][b]Title:[/b][/SPECIES] Text<br />
</blockquote>

<p>Text goes here</p>

<center><div class="divider"><span class="wolf"><i class="fa fa-paw" aria-hidden="true"></i></span> </div></center>

<p>Text goes here</p>

</article></div>
</div>
 
<input type="radio" id="dev-2" name="option[]" value="two"><label for="dev-2" class="dev-2"> <span class="SPECIES"><i class="fa fa-camera-retro" aria-hidden="true" title="Mood Board"></i></span></label><div class="in-dev" id="two">
<div class="content1"><article>
<img src="IMAGE ANY SIZE - WILL RESIZE" />
</article>
</div>
 
<center><div class="divider"><span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span> </div></center>

<div class="pinz"><a data-pin-do="embedBoard" data-pin-board-width="500" data-pin-scale-height="300" data-pin-scale-width="80" href="https://www.pinterest.com/PINTEREST LINK"></a></div>

</div>
 
<input type="radio" id="dev-3" name="option[]" value="three"><label for="dev-3" class="dev-3"> <span class="SPECIES"><i class="fa fa-music" aria-hidden="true" title="Playlist"></i></span></label>  
<div class="in-dev" id="three">  
<div class="content2"><article>

[devSPOT]SPOTIFY LINK[/devSPOT]
[devYT]YOUTUBE LINK END CODE[/devYT]

</article></div>
</div>
 
<input type="radio" id="dev-4" name="option[]" value="four"><label for="dev-4" class="dev-4"> <span class="SPECIES"><i class="fa fa-calendar" aria-hidden="true" title="Timeline"></i></span></label> <div class="in-dev" id="four">

<div class="timeline">

<div class="thread"><i class="fa fa-file-text" aria-hidden="true"></i>  <a href="LINK TO THREAD">TITLE OF THREAD</a> <span class="date"> Month Date, Year</span></div>
<div class="dev-sum"><table><tr><td valign="top">THREAD DESCRIPTION
</td><td><img src="SQUARE IMAGE LINK" width="80" height="80" /></td></tr></table><div class="starring"> Starring TAG USERS </div></div>

<div class="thread"><i class="fa fa-file-text" aria-hidden="true"></i>  <a href="LINK TO THREAD">TITLE OF THREAD</a> <span class="date"> Month Date, Year</span></div>
<div class="dev-sum"><table><tr><td valign="top">THREAD DESCRIPTION
</td><td><img src="SQUARE IMAGE LINK" width="80" height="80" /></td></tr></table><div class="starring"> Starring TAG USERS </div></div>

</div>
</div>

<input type="radio" id="dev-5" name="option[]" value="five"><label for="dev-5" class="dev-5"> <span class="wolf"><i class="fa fa-heart" aria-hidden="true"></i></span></label> <div class="in-dev" id="five">
<div class="content2"><article>
<img src="IMAGE ANY SIZE - WILL RESIZE" /><br />

<blockquote>"Quote."</blockquote>

<img src="IMAGE ANY SIZE - WILL RESIZE" /><br />

<center><div class="divider"><span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span> </div></center>

<img src="IMAGE ANY SIZE - WILL RESIZE" /><br />

</article></div>
</div>

</div><div class="dev-foot"><span class="SPECIES">CODE BY <a href="https://omgwes.tumblr.com/">WES</a></span></div>

[/dohtml]


Customization

Generally if you see something in ALL CAPS that means you need to change it in some way. It does not mean you need to write in all caps. For example, you may notice there are areas of this code that say SPECIES in all caps. Please change that to match your character anywhere you see it! (e.g., wolf, ghoul, vampire, human, ghost, guide, witch).

TAB FRAME

This is the overall tab layout that you can insert your own content into. The only part of the template that is mandatory is this tab layout. You're welcome to style the content or inserts as you see fit, but for those who don't code I've made some pre-made options you can insert!

CODE
<div class="dev">

<div class="title"><span class="SPECIES">Character Name</span></div>
 
<input type="radio" id="dev-1" name="option[]" value="one" checked><label for="dev-1" class="dev-1"> <span class="SPECIES"><i class="fas fa-user" title="Character"></i></span></label><div class="in-dev" id="one">
TAB ONE CONTENT / INSERTS HERE
</div>
 
<input type="radio" id="dev-2" name="option[]" value="two"><label for="dev-2" class="dev-2"> <span class="SPECIES"><i class="fa fa-camera-retro" aria-hidden="true" title="Mood Board"></i></span></label><div class="in-dev" id="two">
TAB TWO CONTENT / INSERTS HERE
</div>

<input type="radio" id="dev-3" name="option[]" value="three"><label for="dev-3" class="dev-3"> <span class="SPECIES"><i class="fa fa-music" aria-hidden="true" title="Playlist"></i></span></label>  
<div class="in-dev" id="three">
TAB THREE CONTENT / INSERTS HERE
</div>
 
<input type="radio" id="dev-4" name="option[]" value="four"><label for="dev-4" class="dev-4"> <span class="SPECIES"><i class="fa fa-calendar" aria-hidden="true" title="Timeline"></i></span></label> <div class="in-dev" id="four">
TAB FOUR CONTENT / INSERTS HERE
</div>

<input type="radio" id="dev-5" name="option[]" value="five"><label for="dev-5" class="dev-5"> <span class="SPECIES"><i class="fa fa-heart" aria-hidden="true"></i></span></label> <div class="in-dev" id="five">
TAB FIVE CONTENT / INSERTS HERE
</div>

MORE TABS INSERT HERE - TO USE THE STANDARD TAB # OF TABS DELETE THIS LINE

</div><div class="dev-foot"><span class="SPECIES">CODE BY <a href="https://omgwes.tumblr.com/">WES</a></span></div>


INSERT ADDITIONAL TABS

This tab layout is compatible for up to 10 tabs. If you add that many you will start to overlap the character's name. Maybe you don't feel like you need a name but you really want those extra tabs? Awesome, just make sure to delete <div class="title"><span class="SPECIES">Character Name</span></div> from the above tab framework. Then the name will disappear and give you room for more tabs! See below for the tab insert code. Each paragraph is a new tab. Please only insert one paragraph at a time as needed.

You will also notice areas of this code that say ICON in all caps. Since I don't know what kind of tab you are making, you need to chose an icon from the font-awesome options here to act as your label. For example, if you wanted three horizonal bars for an icon it would look like this <i class="fa fa-bars" aria-hidden="true"></i>.

Also, if you don't need all of the five standard tabs you're welcome to delete unnecessary tabs. Just reverse engineer this part of the tutorial.

CODE
<input type="radio" id="dev-6" name="option[]" value="six"><label for="dev-6" class="dev-6"> <span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span></label> <div class="in-dev" id="six">
TAB SIX CONTENT / INSERTS HERE
</div>

<input type="radio" id="dev-7" name="option[]" value="seven"><label for="dev-7" class="dev-7"> <span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span></label> <div class="in-dev" id="seven">
TAB SEVEN CONTENT / INSERTS HERE
</div>

<input type="radio" id="dev-8" name="option[]" value="eight"><label for="dev-8" class="dev-8"> <span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span></label> <div class="in-dev" id="eight">
TAB EIGHT CONTENT / INSERTS HERE
</div>

<input type="radio" id="dev-9" name="option[]" value="nine"><label for="dev-9" class="dev-9"> <span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span></label> <div class="in-dev" id="nine">
TAB NINE CONTENT / INSERTS HERE
</div>

<input type="radio" id="dev-10" name="option[]" value="ten"><label for="dev-10" class="dev-10"> <span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span></label> <div class="in-dev" id="ten">
TAB TEN CONTENT / INSERTS HERE
</div>


COLUMN LAYOUT INSERT

So you'll want to decide if you want to use columns before you insert any other content. I recommend using two columns if you want to put text in it because it's hard to read text in the three column layout because it's so slim and small. Three columns was made primarily to be used with icons and photos (e.g., tab 2 moodboard)

THREE COLUMNS:
CODE
<div class="content1"><article>
OTHER INSERTS OR CONTENT GOES IN HERE
</article></div>

TWO COLUMNS:
CODE
<div class="content2"><article>
OTHER INSERTS OR CONTENT GOES IN HERE
</article></div>


STANDARD TEXT INSERT

When you just want to add text, we are going wrap our text based on paragraphs. This is so that we get the right amount of padding and the text is formatted correctly. You need a tag before AND after the text. If you need to simple move your content to the next line, then is the only time you should use a <br /> line break.

CODE
<p>Text for first paragraph.</p>
<p>Text for second paragraph.</p>


EMPHASIZED TEXT INSERT

You can use the typical bbcode or the following code to highlight text the color of your character and make it bold. It works nicely on text you want to stand out.
CODE
[b]<span class="SPECIES"><b>Text</b></span>[/b]


BLACK BOX INSERT

This makes a nice black box to contain text and can be used for quotes from your character or quick facts.
CODE
<blockquote>Text goes here.</blockquote>


DIVIDER INSERT

This is a fun divider with the icon of your character's species within. Replace ICON based on your species (vampire = tint, wolf = paw, ghoul = flask, guide = skyatlas, witch = magic, human = user, ghosts = snapchat-ghost). Replace SPECIES as outlined (vampire, wolf, ghoul, guide, witch, human, ghosts).
CODE
<center><div class="divider"><span class="SPECIES"><i class="fa fa-ICON" aria-hidden="true"></i></span> </div></center>


IMAGE INSERT

Please do not add photos that are over 500x500 pixels wide. If you are using a column layout it will automatically resize based on width (145px for 3 column layouts and 220 for two column layouts).

CODE
<img src="IMAGELINK" />


PINTEREST INSERT


This should be placed within the content area of a tab but NOT within a column layout structure. That way it spans the entire content area of the tab. The recommended placement for this is in the bottom of the tab content area of Tab 2.
CODE
<div class="pinz"><a data-pin-do="embedBoard" data-pin-board-width="500" data-pin-scale-height="300" data-pin-scale-width="80" href="https://www.pinterest.com/LINK TO PINTEREST PAGE"></a></div>


SPOTIFY INSERT

First, download spotify. Then create a playlist. I trust you can do that with a bit of Google help if needed, but if you need help shoot me a DM and I'll clarify this guide. Then go to the playlist, click the icon that looks like three dots, click share, click <b>Copy Embedded Code</b>. Then the link only in the bbcode like this:
CODE
[devSPOT]https://open.spotify.com/embed/user/LINK TO SPOTIFY PLAYLIST[/devSPOT]


YOUTUBEINSERT

Do the youtube page of the video you want to add. You will see an address that looks something like this: https://www.youtube.com/watch?v=dQw4w9WgXcQ. Copy everything after the = sign and place in the bccode like this:
CODE
[devYT]CODEHERE[/devYT]


TIMELINE

This is all pretty standard stuff. Make sure the image you use is SQUARE and less than 100x100 to minimize load time, but it will resize to exactly 80x80. Where it says TAG USERS works like any other thread with @ [ Character Name ] removing all spaces.

You can change the icon from the standard <i class="fa fa-file-text" aria-hidden="true"></i> by choosing another icon from font awesome via the link previous provided. If you're trying to keep track of which threads you have replied to I recommend square-o as incomplete (an empty check box) and check-square-o (a checked checkbox) instead of the standard text (a document icon).
CODE
<div class="timeline">
<div class="thread"><i class="fa fa-file-text" aria-hidden="true"></i>  <a href="LINK TO THREAD">TITLE OF THREAD</a> <span class="date"> Month Date, Year</span></div>
<div class="dev-sum"><table><tr><td valign="top">THREAD DESCRIPTION
</td><td><img src="SQUARE IMAGE LINK" width="80" height="80" /></td></tr></table><div class="starring"> Starring TAG USERS </div></div>
</div>

0 User(s) are reading this topic (0 Guests and 0 Anonymous Users)
0 Members:

OPTIONS
NEW REPLY
QUICK REPLY
NEW TOPIC
NEW POLL



 


 

Affiliates [ View All | Link-us ]
Fugue State In My Veins Mortals & Monsters Istari Wicked Unbound Never There Embrace the Chains Demon Realm Valhaven Dead Before Daylight After the Fall Cry Wolf