Printable Version of Topic
Click here to view this topic in its original format
HOW TO BREATHE > REGISTRATION > FREESTYLE APP


Posted by: ASHWICK VALLEY Jan 1 2015, 11:20 PM

APPLICATION GUIDE

tips and tricks to make things easier on y'all

The new app really isn't that complicated, but just in case anybody is intimidated or confused by the new format, we've set up a quick guide to help you feel more comfortable with it. If you read through this and still have questions, please contact an admin (contact Dotty if it's code-related) and we'll help you out! Seriously, it's not a big deal if you need help, and we'll be happy to help.
TABS & SECTIONS
The first three basic info sections (basic information, physical appearance, and relationships) are the only mandatory sections you need to fill out on the first tab. Of course we encourage everybody to fill out the entire thing (more or less-- you can delete or add whatever you want to the later sections), but only the first three are mandatory.

The second tab is self explanatory. Just like with the old app, you use whatever format and write whatever you want, as long as you don't break the code. If it gives us a solid grasp of your character's personality and where he or she came from, literally anything goes. Remember, this must be at least 1,000 words of original content.

The third tab is just OOC information! Easy peasy!

THE IMAGE
Your app's picture should be 150x150 minimum. It will resize automatically (so if it's a little smaller than 150x150 it's not a big deal), but it will look best if it's a square or close to a square. It doesn't have to be a gif but it can be, if you prefer to use a gif.

If for whatever reason you can't find a square or square-like image/gif, that's fine, and there's a way to align it to the left or the right. What you'll need to do is add "background-position: left" or "background-position: right" and add it in the div after your image. So instead of this:
CODE
<div class="appim" style="background-image:url(http://placehold.it/150);"></div>

you'll have this:
CODE
<div class="appim" style="background-image:url(http://placehold.it/150); background-position: right"></div>

If the focus of the picture you want to use is on the right side, then you'll change "center" to "right", and vice versa for a left-focused image/gif. The code is automatically set to center, but it's super easy to change. If you have trouble, let Dotty know and she'll help you out.

MORE HELPFUL INFORMATION
For those of you who are switching your old apps to the new code, you can copy-paste the bulk of your app for the second tab, but you're going to need to manually type everything out for the basic info section (again-- unless you know what you're doing) to make sure none of the code gets messed up. All together one app shouldn't take you more than five or ten minutes to update, unless you plan to add to or rewrite it (or fill out all the extra sections in the basic info tab, which again we encourage!).

It's probably best that you keep your personal coding to a minimum. If you know what you're doing then more power to you, knock yourself out, but please don't don't go overboard or change the look of the app. Remember, we're more interested in the words than what you can do with your coding skills.

That said, there are a few tricks you can do so that the freestyle portion of your app isn't just a bunch of unbroken blocks of text.

If you want a header, just use the tags
CODE
<h>header here</h>

around the words you want to showcase, and that'll give you a nice, styled header for your apps, to break everything up.

If you want to change the color of the font (for dialogue or whatever), just use the tags
CODE
<font style="color: #colorhex"> words here </font>

around the words you want colored. You can also style the font further if you want, i.e. italicize it, bold it, strike-through, etc. with those tags.

If you want to insert an image,
CODE
<img src="IMGLINKHERE">

is the code you need to use.
IMPORTANT: If the image you want to link is wider than 375px, you'll need to use this one:

CODE
<img src="IMGLINKHERE" style="width: 375px">

so that it can resize and not stretch the app. You can also make it smaller, if you want, by adjusting the width according to what you want.

Finally, for those of you who like lists, consider using the blockquote tag:
CODE
<blockquote>one <BR>two <BR>three</blockquote>

It separates and highlights the listed items, which makes everything look cleaner and easier to read. Definitely not mandatory, but useful!

COMPLETED APPS
Both complete and WIP apps are to be posted in the pending forum. For your topic description, please include your character's age, member group (AKA neighborhood), and face claim in that order! If you don't do it this way, your app will get pended.

If it's a WIP, please put a "WIP" in the title. If it's complete, please mark it with a [C] because if you don't, we will assume it's unfinished and we won't look at it!


Posted by: ASHWICK VALLEY Jan 1 2015, 11:21 PM
FIRSTNAME LASTNAME
date_range AGE IN LETTERS
face FACE CLAIM
home MEMBER GROUP
fingerprint RECENT THREAD

I. THE BASICS

full name: here
nickname(s): here
gender: here
pronouns: here
date of birth: here
hometown: here
education: here
occupation/s: here
socioeconomic status: here
orientation/s: here
relationship status: here

II. PHYSICAL APPEARANCE

height: here
weight: here
build: here
hair color: here
eye color: here
ethnic/racial background: here
clothing style: here
favorite physical aspect: here
least favorite: here
distinguishing features: here

III. RELATIONSHIPS

parents: here
siblings: here
children: here
significant other: here
relevant past relationships: here
pets: here
others: here

IV. PERSONALITY

myers-briggs: here
likes: here
dislikes: here
strengths: here
weaknesses: here
turn ons: here
turn offs: here

V. FAVORITES

color: here
food: here
book: here
song: here
movie: here
tv show: here
animal: here

VI. BELIEFS

political: here
religious: here
love/relationships: here
other: here

optional header if you want it

The freestyle app is self explanatory. Use whatever format and write whatever you want-- just don't break the code. As long as it gives us a solid grasp of your character's personality and where he or she came from, literally anything goes. This must be at least 1,000 words of original content.

OOC INFORMATION

name or alias: what do we call you?

contact info: so people can plot with you

timezone: cuz we're curious

how you doin'?: cuz we care

is your member directory up to date?: cuz just do it

anything else?: tell us about your inspiration for the character, about how you chose to do the app, ask for feedback about a specific aspect of the app, tell us a joke, show us a funny gif, really whatever tf you want. if you have nothing to say you can just leave this blank, nbd.




CODE
[dohtml]
<center><div class="appc">

<div class="appcname">FIRSTNAME LASTNAME</div>

<div class="appin">
<table cellspacing="0" cellpadding="0"><tr>

<td valign="top" height="100%" class="appside">

<div class="appgif"><div class="appgif2"><div class="appim" style="background-image:url(http://placehold.it/150);"></div></div></div>

<div class="appside2">
<div class="sideinfo"><i class="material-icons" title="character age">date_range</i> AGE IN LETTERS</div>
<div class="sideinfo"><i class="material-icons" title="face claim">face</i> FACE CLAIM </div>
<div class="sideinfo"><i class="material-icons" title="member group">home</i> MEMBER GROUP </div>
<div class="sideinfo"><i class="material-icons" title="link to last character's active thread">fingerprint</i> <a href="LINK">RECENT THREAD</a> </div>
</div>

</td>

<td valign="top" height="100%" class="appin2"><div class="appin3">
<div class="appbuttstrip">

<div class="appbutt">
<input type="radio" id="tab-1" name="tab-group-1" checked>
<label for="tab-1"><i class="material-icons">filter_1</i> BASIC INFORMATION </label>
<div class="appcont binfo"><div class="appcont2">



<h1><i>I.</i> THE BASICS</h1>

</ THIS SECTION IS MANDATORY; PLEASE COMPLETE >

<b>full name:</b> here <br>
<b>nickname(s):</b> here <br>
<b>gender:</b> here<br>
<b>pronouns:</b> here<br>
<b>date of birth:</b> here <br>
<b>hometown:</b> here <br>
<b>education:</b> here <br>
<b>occupation/s:</b> here <br>
<b>socioeconomic status:</b> here <br>
<b>orientation/s:</b> here <br>
<b>relationship status:</b> here <br>

<P>

<h1><i>II.</I> PHYSICAL APPEARANCE</h1>

</ THIS SECTION IS MANDATORY; PLEASE COMPLETE >

<b>height:</b> here <br>
<b>weight:</b> here <br>
<b>build:</b> here <br>
<b>hair color:</b> here <br>
<b>eye color:</b> here <br>
<b>ethnic/racial background:</b> here <br>
<b>clothing style:</b> here <br>
<b>favorite physical aspect:</b> here <br>
<b>least favorite:</b> here <br>
<b>distinguishing features:</b> here

<P>

<h1><i>III.</I> RELATIONSHIPS</h1>

</ THIS SECTION IS MANDATORY; PLEASE COMPLETE >

<b>parents:</b> here <br>
<b>siblings:</b> here <br>
<b>children:</b> here <br>
<b>significant other:</b> here <br>
<b>relevant past relationships:</b> here <br>
<b>pets:</b> here <br>
<b>others:</b> here

<P>

<h1><i>IV.</I> PERSONALITY</h1>

</ THIS SECTION IS OPTIONAL; FEEL FREE TO DELETE, EDIT OR ADD MORE >

<b>myers-briggs:</b> here<br>
<b>likes:</b> here <br>
<b>dislikes:</b> here <br>
<b>strengths:</b> here <br>
<b>weaknesses:</b> here <br>
<b>turn ons:</b> here <br>
<b>turn offs:</b> here


<P>

<h1><i>V.</i> FAVORITES</h1>

</ THIS SECTION IS OPTIONAL; FEEL FREE TO DELETE, EDIT OR ADD MORE >

<b>color:</b> here <br>
<b>food:</b> here <br>
<b>book:</b> here <br>
<b>song:</b> here<br>
<b>movie:</b> here <br>
<b>tv show:</b> here <br>
<b>animal:</b> here


<P>

<h1><i>VI.</i> BELIEFS</h1>

</ THIS SECTION IS OPTIONAL; FEEL FREE TO DELETE, EDIT OR ADD MORE >

<b>political:</b> here <br>
<b>religious:</b> here <br>
<b>love/relationships:</b> here<br>
<b>other:</b> here<br>


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

<div class="appbutt">
<input type="radio" id="tab-2" name="tab-group-1">
<label for="tab-2" class="two-tab"><i class="material-icons">filter_2</i> THE APPLICATION</label>
<div class="appcont appbody"><div class="appcont2">


<h1>optional header if you want it</h1>

The freestyle app is self explanatory. Use whatever format and write whatever you want-- just don't break the code. As long as it gives us a solid grasp of your character's personality and where he or she came from, literally anything goes. <b>This must be at least 1,000 words of original content.</b>

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

<div class="appbutt">
<input type="radio" id="tab-3" name="tab-group-1">
<label for="tab-3" class="three-tab"><i class="material-icons">filter_3</i> ABOUT THE WRITER</label>
<div class="appcont appooc"><div class="appcont2">

<h1>OOC INFORMATION</h1><P>

<b>name or alias:</b> what do we call you?
<p>
<b>contact info:</b> so people can plot with you
<p>
<b>timezone:</b> cuz we're curious
<p>
<b>how you doin'?:</b> cuz we care
<p>
<b>is your member directory up to date?:</b> cuz just do it
<p>
<b>anything else?:</b> tell us about your inspiration for the character, about how you chose to do the app, ask for feedback about a specific aspect of the app, tell us a joke, show us a funny gif, really whatever tf you want. <u>if you have nothing to say you can just leave this blank, nbd.</u>


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


</div></div></div></td>

</tr></table>

</div></div>
</center>
<link rel="stylesheet" href="https://fonts.googleapis.com/icon?family=Material+Icons"><link rel="stylesheet" type="text/css" href="/uploads/htb/skin_shart/may2017app.css">
[/dohtml]

'
Powered by Invision Power Board (http://www.invisionboard.com)
© Invision Power Services (http://www.invisionpower.com)