Announcements: Introducing INK, the Writer's Currency » RPG's New Design Team » Now Open: RPG Staff Applications » 10 Years of RPG: Share Your Story » Can't Send PMs? Need Your 10-Forum Posts NOW? » A (Friendly) Reminder to All Romance RPers. » The Newbie's Guide to RolePlayGateway: Read This First! »

Pimp My Profile

a topic in People and Places, a part of the RPG forum.

Character biographies, journals, connections, and other reference guides for any in character information necessary for your players!

Pimp My Profile

Tips: 0.00 INK Postby Hilde on Fri Feb 23, 2007 6:41 pm

Are you forced to type up your character profile every time you see an RPG you want to join? Perhaps you have them saved as text files in a folder on your computer for just such an occasion, and perhaps you like to roleplay live, and don't have time for long introductions.

Wouldn't you like to be able to send them to a link, your own personal spot on the www for your character's extensive information and other users can look and browse at their own perogative? Perhaps you would like people to contact YOU and say, "Wow, your character would be perfect for this RPG idea I had..."

Well, look no further.
The internet provides tons of great free resources.
I can provide the code.

Tip jar: the author of this post has received 0.00 INK in return for their work.

Hilde
GWC Veteran
Member for 13 years
Progenitor Conversation Starter Conversationalist

Tips: 0.00 INK Postby Hilde on Fri Feb 23, 2007 6:55 pm

First I would like to provide you with some free resources.
If you have a website already and you have the resources to upload your own images and html pages, go ahead and skip this bit, I will cover your section in a bit.

For these designs in customer profiles I'm going to be using xHTML and PHP format. You don't really need to worry about what that means if you don't know, because I'm going to provide you with everything you need.

Here is a great list of FREE website providers where you can host basic xHTML and with some providers you can host PHP files.

I haven't gone through the entire list, so I can't provide information on whether or not they clutter your page with ridiculous banners or what the limits are for each provider.

I recommend using Diaryland as a host because they are banner free and working with the interface is extremely easy: all you have to do is copy/past what I give you into a window, make a FEW corrections, hit save and you're done.

With that being said, for those of you that don't want to link players to a profile with the name- "http://yourcharactername.diaryland.com", don't worry. Shorturl provides tons of FREE pseudo domain names for you to choose from. Such as "character.2fortune.com", etc. And there are no pop up banners like there used to be.

If anyone has any other great providers, feel free to let me know and I can add them to the list.

And now on to the code.

Tip jar: the author of this post has received 0.00 INK in return for their work.

Hilde
GWC Veteran
Member for 13 years
Progenitor Conversation Starter Conversationalist

Tips: 0.00 INK Postby Hilde on Fri Feb 23, 2007 8:10 pm

Color is a very important part of your layout because it sets the mood for the "first impression" you give other users.

I'm bringing this up because I'm going to use very simplistic color schemes and setups for these layouts, but every color can be changed.

In the code a color is determined by a pound sign followed by six digits or letters, and they are most commonly a mix of both.
"#FFFFFF" translates to "white" and lets each browser know that it needs to display something in that specific color.

So just remember when you're style shopping. If you like the style but don't want your warrior's links to be pink, don't fret. It's very easy to change it.

Here are some resources for your color tools.

Color Codes
Vertical Color Codes
Pick Your Own

Tip jar: the author of this post has received 0.00 INK in return for their work.

Hilde
GWC Veteran
Member for 13 years
Progenitor Conversation Starter Conversationalist

Tips: 0.00 INK Postby Hilde on Fri Feb 23, 2007 8:56 pm

For all of these screenshots I am using Kate Beckinsale to represent Hilde because that's who I always use.

It's highly recommended that you use real people (preferably famous ones that get used often) rather than someone else's artwork, unless you've asked permission, or they drew it for you. If it's official art work of Duo from Gundam Wing or something, that's one thing, but using someone's personal artwork you snag off deviantart isn't always appreciated.


Image

This layout is very simple but very flexible. You can add links down at the bottom or take some away if you'd like to even. The colors are all customizeable, and the image size is 400x392. (also adjustable)

To host your photo I recommend Photobucket or Imageshack. (Both are free.) Upload your image there and then copy and paste the link over the [YOUR IMAGE URL HERE] located inside the code.

Be sure to look for [MESSAGES IN BRACKETS] inside the code, it's where you need to input different information.


This code below is for the Diaryland interface.
For xHTML users:

replace %%short_description%% with the title of your page. Such as, "History", "Biography", etc. (You will need to paste this code on EACH page you create, simply changing the text in one area to what you'd like to to be.
replace %%entry%% with the content of your page. Like the actual biography.

PHP users, I will get back to you. =D
(I really don't think there will be a lot of you and I just want to get a few basic layouts up for people to use.)

For Diaryland users:
    Log on.
    On the left hand side of the screen you will see "Change your template"- click it.
    Click, "click here to change how each of your entry pages look."
    (If it's prompting you to choose between weblog style DO NOT choose weblog)
    Copy the code below.
    Paste it in to your screen.
    Make the few changes [MARKED IN BRACKETS].
    Create your "pages" by clicking "Add an entry" on the left hand side of your screen.
"Your new entry" is where you put your content, such as- "Hilde has blue eyes and brown hair and likes to kidnap little girls' puppies and..."

The "short description" right underneath the entry is for your page's title, like, "Biography"

Image

It is very important that your "name of this html" matches what's in the code. I've made it very simple: what the link names are are what you need to name the pages. So, your biography page needs to be named "bio.html" ;)

That is all for now. Any questions PM or reply and I'll get right on helping you with it. =D
Enjoy "Pimp My Profile" #1!


The Code


<html>
<head>
<title>[YOUR TITLE HERE]</title>
<style type="text/css">


body {scrollbar-face-color: #000000;
scrollbar-highlight-color: #FFFFFF;
scrollbar-3dlight-color: #C0C0C0;
scrollbar-shadow-color: #FFFFFF;
scrollbar-arrow-color: #C0C0C0;
scrollbar-track-color: #FFFFFF;
scrollbar-darkshadow-color: #000000; }

.entry { font-family: verdana;
font-size: 8pt;
letter-spacing: 2px;
color: 000000;
background-color: FFFFFF;
padding: 5px;
clear: center;
resize=no; }

.nav { font-family: verdana;
font-size: 8pt;
letter-spacing: 2px;
color: 000000;
background-color: FFFFFF;
clear: center;
resize=no; }

.image { background-color: FFFFFF;
clear: center;
border: 1px solid;
color: 000000;
resize=no; }


a:link {text-decoration: none; font-weight: none; color: #000000}
a:visited {text-decoration: none; font-weight: none; color: #F1556F}
a:hover {text-decoration: line-through; cursor: crosshair; color: #F1556F}
a:active {text-decoration: line-through; font-weight: bold; color: #000000}

</style>

</head>

<body bgcolor="#FFFFFF">
<div id="image" style="position:absolute; width:760px; height:390px; z-index:1; top: 6px" class="image">
<div align="right"><img src="[YOUR IMAGE URL]" width="400" height="392" border="1"></div>
</div>
<div id="entry" style="position:absolute; width:340px; height:350px; z-index:2; left: 18px; top: 16px; overflow: auto" class="entry">

<p><center><b>
[YOUR CHARACTER'S NAME]
<br /></b>

<b>%%short_description%%</b></center><br></p>
<p>%%entry%%</p>
</div>
<div id="nav" style="position:absolute; width:760px; height:35px; z-index:3; left: 8px; top: 406px" class="nav">
<div align="center">| <a href="index.html">home</a> | <a href="bio.html">bio</a>
| <a href="stats.html">stats</a>
| <a href="past.html">past</a> | <a href="[URL]">weapons</a> | <a href="connections.html">connections</a>
| <a href="http://www.RPGateway.com/">roleplay</a>
| </div>
</div>
</body>
</html>
<a href="http://www.diaryland.com"></a>

Tip jar: the author of this post has received 0.00 INK in return for their work.

Hilde
GWC Veteran
Member for 13 years
Progenitor Conversation Starter Conversationalist


Post a reply

RolePlayGateway is a site built by a couple roleplayers who wanted to give a little something back to the roleplay community. The site has no intention of earning any profit, and is paid for out of their own pockets.

If you appreciate what they do, feel free to donate your spare change to help feed them on the weekends. After selecting the amount you want to donate from the menu, you can continue by clicking on PayPal logo.

 

Who is online

Users browsing this forum: No registered users and 0 guests