Glossary

A glossary of words relevant to browsing RPH profiles. Feel free to submit things you think should be added. Regarding sexual terminology - a brief list of such words follows the main list. It will only expand abbreviations and translate the most commonly seen Japanese words - nothing further.

Tips & Tricks - Aesthetics

• The eyes need time to rest. Padding from the border of a background color or image to the nearest edge of the content is essential.

• The background should never be so busy and bright as to distract from the text, or make the text hard to read. A semi-transparent or solid background for the text layered over-top of such a background is a good compromise.

• Eyes get tired of doing the same motion continuously. If you have a very wide slab of text (700+ px) that is also very short (2-3 lines), you're usually better off making it a bit less wide, and a bit taller.

• Don't abuse bright colored text, italicization, bold, all caps, or other special effects used to make a segment of text 'pop.' If your profile reads like a plot-development section in a Zelda game or comic book dialogue, there's a problem. They can get away with those effects because you see very little text at a time. For extended reading, it simply becomes distracting.

• Comic Sans, Impact, and Verdana are ugly fonts. They never get used in the publishing industry for a reason. Impact's also nigh-illegible.

• Do not center text meant for extended reading. If you have something centered that runs more than 2 or 3 lines, it should probably not be centered. Centering can work for text that is intended to be more of an element of visual design than read. What you should do instead is justify your text (css parameter: text-align: justify;) and create padding.

• Left aligned text is best used for code or very short paragraphs with big words that will end up looking very stretched out in justify.

• Right aligned text is best used for show and nothing else.

• The css parameter float is often the best way to put images interspersed with text. Make sure to use it with margins.

• Text Shadow is a good way to heighten visibility when a little bit more contrast is required - say, a black shadow on gray background for white text. It's also a good way to make a title stand out, and is a lot better on large text. It can also be completely abused and make a document hard to read, on the other hand. Use it cautiously.

---

Tips & Tricks - General Code

• RPH's built in editor is better than nothing, particularly for getting something done quick and dirty. However, if you want to do extended profile work, I recommend using an outside editor; I use TextPad. There's a few reasons for this.

1. Textpad colors and highlights bits of code in htm and html documents, allowing you to quickly find missing quotation marks.
2. You can save your code with whitespace, indenting, comments, and complex tooltips - all of these things get removed or break when you save them to the profile and then later attempt to edit straight from RPH.
3. You can work even if the site goes down or you lose internet access.

• Speaking of whitespace, indenting and comments - make sure to use these extensively when doing anything complicated. Your eyes (and sense of efficiency) will thank you.

• You have to work with in-line CSS for RPH, not internal or external. However, when working in a text editor, you can still enact global changes quickly. 'Replace all' is an amazing tool when used appropriately, as is the simple 'find and replace.'

• To set background colors or images in the greyspace of a profile, wrap your profile in a <div> or <table> and input the appropriate parameter in the style for that <div> or <table>. Fixed backgrounds will not work in greyspace as of 4/15.

• You can horizontally center block-level elements with the css parameters 'margin-left: auto;' and 'margin-right: auto;'. You must use both of these together.

• You can see any profile's HTML. Right-click the page and View Source. (Name of this option varies slightly from browser to browser.) The code that a user puts in begins after

<div id="profileBody" style="position:relative;">

User code ends right before the following set of code on a donor's profile:

</div></div><br /><div class="push">

On a non-donor profile, it will instead look like this:

</div></div><div style="margin: 15px auto; width:750px;">

• Put all of your CSS styling in as few wrapper tags as possible. The RPH visual editor enacts most text styles with <span> tags, which are simply ugly and clutter things up unnecessarily most times.

• For the sake of shorthand, you can use <b> and <i> tags while coding. The RPH editor will change these to <strong> and <em> respectively.

• Small caps can be created with the css parameter 'font-variant: small-caps;'

• Have a dummy profile to do your major changes in rather than messing with a 'live' profile. Just make sure the dummy's not a name other people would want. That's selfish. I have a dummy group if you wish to test major changes made to a group's code. Just sign up for it and ask.

• Standard profile width is 750px.

• The profile summary at the top is approximately 278px high. I know it's very slightly more than 275 and I'm too lazy to check specifics.

• Standard group profile width is 770px in the popular 'userlist at bottom' layout. It is 570px in the other layout.

• For the most part, <div>s, with effective use of positioning, padding and margins are superior to <table>s for generating layouts, and are much simpler - think of a <div> as a one-cell table. To paraphrase one person, 'divs are for layouts, and tables are for data.' Tables do have one very distinct advantage, however. By default, a table vertically centers a cell's content relative to its row's height. There is no other way to dynamically vertically center.

• You can make a <td> cover multiple columns with the HTML parameter colspan. e.g. <td colspan="3">.

---

Tips & Tricks - Non-Donor Code

• Things anyone can do that you might just think only donors can do:

1. Transparent Backgrounds. There are two methods to do this: Image backgrounds that sport transparency (PNG and GIF file formats) and by substituting rgba code in background-color.

2. Scrollboxes. Whenever you specify a height for a container element (such as a <div>) and insert the css parameter, 'overflow: auto;' in the style for that container, you'll get a scrollbar.

3. Absolute and relative positioning. Click here for a tutorial. As an interesting tip, when you nest an absolutely positioned element inside of a relatively positioned element, it will define absolute from within that container. This is an advanced trick which can be used situationally. Position: absolute; will be excised from top-level elements in a non-donor profile, so if you became a donor after using a template, you will need to re-enter that parameter.

4. Oversize width profiles. These are created simply by having a container element which has a width greater than 750px. To center them appropriately, you need to offset half of the excess width as a negative value for left positioning. e.g., a 900px width profile is 150px wider than standard. Half of that is 75px, so you would have a parameter of left: -75px;. You should probably not create a profile wider than about 1000 pixels, as some people still have monitor resolutions of 1024x768.

5. Complex tooltips. These are accomplished by identifying an <a> tag as the 'tooltip' class and inputting what you want in the title. Where they get interesting is that - unlike a normal tooltip - you can put images and have all sorts of HTML formatting in these. The trick is that quotation marks and angle brackets if put in directly will screw up the tooltip. You'll need to type in &quot; whenever you wish to use a quotation mark, &lt; whenever you wish a <, and &gt; whenever you need a >.

If you wish to use advanced codes in your tooltip, the simplest way to do things is to write up the code you want to appear in the tooltip, paste that into a blank profile - not the code, but the profile itself - then copy and paste the profile's code, minus the <p> and </p> it may have surrounded the text with, into the title parameter. None of that is necessary for a pure text tooltip, by the way.

---

Tips & Tricks - Donor Code

• The full list of donor exclusive tricks:

1. Covering up the miniprofile.
2. Pages & Tabs.
3. Collapsibles.
4. Type I Mouseover and on-click code.
5. Carousel code.
6. Oversize Width Profiles. 7. Changing the site background. 8. Unicorn code.

Most of these are covered in the Profile Editor's View Help button, which is a big, fat, dark green button right above the toolbars in the profile's visual editor.

To cover up the miniprofile at the top of the page, you just need to wrap your profile in a container element with an absolute position of top: 0px;. Make absolutely certain you do not do this on a group page. There is no miniprofile to cover up, and you'll end up hiding essential buttons like 'join this group.' Position: absolute; will be excised from top-level elements in a non-donor profile, so if you became a donor after using a template, you will need to re-enter that parameter.

Pages & Tabs are perhaps the single biggest benefit of the donor code features, enabling you to present a lot of information in small bites that are more appealing and easier to read, as well as stylistically control. The general structure works as follows:

<div class="pages" rel="1">

<ul class="tabs">

<li><p>Tab 1a</p><p>Tab 1b</p></li>

<li><p>Tab 2a</p><p>Tab 2b</p></li>

<li>etc</li>

</ul>

<div class="sections">

<div>Page 1 content goes here</div>

<div>Page 2 content goes here</div>

<div>etc</div>

</div>

</div>

You'll need to use z-indexes in conjunction with absolute positioning in order to put page tabs below where they usually go (in the pages or beneath them). Z-indexes are useful for other things, too, like layered collapsibles.

Page tabs can be made with images or with text. Everything intended to form one clickable unit must be wrapped together by a single, overall tag. If you have two top-level elements in a single <li>, the first top-level element (and all of its nested elements, if applicable) is the element which appears when you are not on the page associated with that tab, while the second top-level element (and all of its nested elements, if applicable) is the tab which appears when you are on the associated page.

Avoid setting too many (or any) styles in the initial <div> for each page, when using the page/tab structure. Many values from the first div end up getting inherited to all of the subsequent pages, which can really mess up a look - for example, all pages will share height with the first div. Instead, nest a second <div> immediately inside of it.

Collapsibles are created by use of two elements - a trigger element which will be clicked on, and the summoned element. The trigger element must have class="collapsable" in it, and the trigger element must then be immediately followed by the summoned element. e.g.:

<img src="imageurl" class="collapsable" /> <p>Summoned Text</p>

Almost any element - table, tbody, tr and td notably excepted - can be used as either trigger or summon, and all the elements nested inside either will behave as part of the trigger or summon (as appropriate). Collapsibles can be used in conjunction with position: absolute; or position: relative; in order to make floating pop-ups. Using collapsibles without positioning simply results in the collapsible item 'growing' out of the source element, as well as stretching any shared background. Both methods of coding create nifty visual effects.

Mouseover and on-click code It is meant to react on mouse hover, mouse click, and mouse hover+click.

<div class="swap">

<div class="default">

The default display</div>

<div class="hover">

The on-hover display</div>

<div class="clicked">

The on-click display</div>

<div class="hover-clicked">

The on-click+hover display</div>

</div>

Carousel code is mostly useless. As an interesting point, since you can define multiple classes on the same element (achieved by putting all of the classnames inside of the class parameter, each separated by a space), you can use them to make your page tabs, which could work for the right layout.

<ul style="height: 12em;" class="carousel">

<li style="height: 7.5em; width: 7.5em;"><img src="http://www.theanteheroes.com/RPHaven/Aang/Air.png" alt="" /></li>

<li style="height: 7.5em; width: 7.5em;"><img src="http://www.theanteheroes.com/RPHaven/Aang/Fire.png" alt="" /></li>

<li style="height: 7.5em; width: 7.5em;"><img src="http://www.theanteheroes.com/RPHaven/Aang/Earth.png" alt="" /></li>

<li style="height: 7.5em; width: 7.5em;"><img src="http://www.theanteheroes.com/RPHaven/Aang/Water.png" alt="" /></li></ul>

Take care to note that all element in a carousel must have a defined width and height, and they must be defined in ems rather than px, pt, or any other size. In order to use ems, you should set a font size for the document first; you can use a pix-to-em converter in order to help.

To change the site background (the diagonally striped area), simply input the appropriate parameter in the entry box labeled body background:. Note that you'll have to input the information as background shorthand (explained towards the bottom of the link).

Unicorn code is very simple and rarely used for obvious reason: there are few layouts which demand continuous generation of pink, sparkly unicorns.

Make Friends, Get Roleplay

So, hey there! What's that you say? You've been on RPH for 15 minutes and someone's already yelled at you? I'm sorry to hear that. Maybe I can help? Here's some things I've picked up in my year here.

There are grumps. A lot of them travel in the same circles and have a lot of frequently used alts, no less. Whatever opinions they express that you keep running into may be fairly unique to them. This is especially true in the OoC room, which is the default room for people with unusual concepts that prefer PM roleplay, and people who are not roleplaying; some of the latter are just about never roleplaying, and often for a good reason. The people you are encountering may simply be grumps, and they are merely the vocal minority. Do not let them scare you off.

That said, look to yourself first. Check yourself - is there anything you could reasonably be doing better? Just because you shouldn't let others intimidate you does not mean that you should not re-evaluate your approach on a regular basis. You cannot control what other people do, but you can control what you do. Spend the effort to make yourself approachable; use good spelling and grammar, be willing to apologize, don't use offensive language with people you do not know well. Put in the time to flesh out your character and highlight what makes them interesting to roleplay with, as opposed to indulging yourself in why you like roleplaying with that character. (The two are similar, but not identical.)

Be active without being aggressive in your search for roleplay. Make friends with as many people as you can; suggest to them roleplay ideas, hold discussions, etc. And if they say 'no,' and you're not really good friends, you should probably drop the subject for at least a week. At least, in direct conversation. If you're good at subtlety, subtly mentioning the fun you're having in a roleplay with another person is a good way to bring it up indirectly. Above all, don't be insincere about it. People are here to have fun by roleplaying, they are not here to have roleplay and maybe have fun. The first priority is to make friends, and the second is just to not forget to roleplay.

Pay attention to what people want. Read someone's profile before PMing them. Do not bring up sex to a roleplayer with a profile that a nun could approve of. And if someone says, 'I don't want to talk to you if...' and they list a lot of stuff, then respect their wishes - don't talk to them. In my experience, most people who go out of their way to tell you just how not friendly they are, even if they throw in a half-thought-out 'but I'm really a nice person!' at the end there, aren't worth spending a lot of time on anyway. Very few of them seem to roleplay, and many are rather self-absorbed. Conversely, don't assume that just because someone has a pretty profile that they are not friendly. The writing matters more than the HTML work. The writing will tell you about who the person is. HTML and Photoshop just tells you that they like HTML and Photoshop.

Do not make two dozen characters. If you didn't get roleplay on characters A or B after a month each of being active regularly, perhaps you should try character C. If you didn't get roleplay on characters A through P in the space of three months, you are probably not going to get roleplay on character Q without changing your approach. Other people are shy, there may be schedule mismatches, people might take time to warm up to an idea. Seeing you on a character regularly creates stability. And generally speaking, roleplay groups that start out strong because ten people could go to gelbooru and find character art they liked will not last.

Play characters that can be roleplayed. This might sound like a 'durr' moment, but a lot of people like to roleplay characters - especially canons - that really do not function well outside of a very specific set of circumstances. Even I've been rather guilty of this in the past. You get very taken with a style of character that popped into your imagination or you saw in fiction elsewhere and want to do something with it, without really thinking about the ability to roleplay with that character. Ask yourself these questions when making a character:

What kinds of roleplay can this character drive?
What kinds of roleplay can this character support?
What types of characters would this character work well with?
How many roles can this character play?
What makes this character unique from others of its archetype?
How can my character win situations in a way that is interesting to others and myself? How can my character lose situations in a way that is interesting to others and myself?

Especially for people interested in creating a group roleplay, I've found it's essential to have versatile characters that can suit a variety of needs - able to lead when others are not able to, and ready to follow when someone has a spark of passion. There will never be a shortage of niche characters - there will always be a shortage of generalist characters who are not boring. (If your answer to any of these questions was 'I'm okay with anything' or something similar, there's a problem.)

Roleplay is everywhere on RPHaven - you merely need to look to find it. This is not always an easy task, but enough of us have succeeded at it. If you're new here and want a group to head to, just ask me for advice. I know most of the major groups and can either point you towards one that may be a good fit, or suggest other people to ask. May the Force be with you, young padawan.

The Art of Roleplay

You've made friends, you've made a character, you've joined a group. But you're not sure if you can seal the deal, right? Don't worry, it happens to us all. Especially me - I'm intimidated around 70% of the time I start a roleplay with someone. Frankly, in my opinion, this is a good thing. As long as concern does not become fear, it is an effective tool at our disposal. Concern helps keep you more in tune with the needs and wants of others. Here are the traits I think everyone should strive to develop in order to foster roleplay.

Be active without being aggressive. Remember that one? Once you have agreed to roleplay with someone and they seem interested, a lot of times, you may find the conversation either wandering or stalling. Offer to make the first post at that point. Sometimes - not most of the time, but sometimes - you might get scorned for this post. At least you got it over with quicker, right? If a roleplay has ground down to a halt - you've been walking down this hall talking to this dude for an hour and not even gotten to the main set of the scene - then go ahead and advance it. Ask to fast-forward through parts neither of you seem interested in. Et cetera.

Serve others first. It's alright if your character's motivations don't take the spotlight today; there is always another day. Rare is the person who does not like to advance their character's personal growth, see their character succeed, get their urges fulfilled. By catering to them first, when your turn comes around, they'll be more willing. Note that you serve others before yourself and not instead of yourself. It's give and take, both ways - if you get completely selfless, you will likely burn out.

Respond in a timely manner. For paragraph or freestyle, about 5 minutes is a great amount of time to to read and respond to a post, for the practiced. 10 minutes is fine. 15 is acceptable, but may be too slow for some people. The faster you get - without sacrificing much of your post quality - the easier it is for yourself and others to stay immersed and interested. Now, we all have times when we have to break these limits without warning. Everyone should be accepting of at least a few of them; real life trumps internet life, after all. If you find yourself regularly breaking these guidelines (which are rough estimates, again, for paragraph or freestyle - the type of roleplay I find most compelling), I suggest cautioning your partner or re-examining what you can do to speed things up. Considering your next actions in advance of actually writing your next post helps considerably.

Each post you make should ideally assist in establishing a character or scene, provide opportunity for other posters' reactions, or move a scene along. This is not feasible every time, all the time, but it is a goal to aspire to. You need to give people something to work with, and this is what people tend to be seeking more than actual length when they specify postlengths.

---

The Art of Roleplay - Storytelling

There are a few personality traits which are