Pimp My Profile

Pimp My Profile · **Tips:** 0.00 INK by **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.

Hilde · **Tips:** 0.00 INK by **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.

Hilde · **Tips:** 0.00 INK by **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

Hilde · **Tips:** 0.00 INK by **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.

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:

"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"

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>

Announcements: Finding Universes to Join (and making yours more visible!) » Guide To Universes On RPG » Member Shoutout Thread » Starter Locations & Prompts for Newcomers » RPG Chat — the official app » USERNAME CHANGES » Suggestions & Requests: THE MASTER THREAD »

Pimp My Profile

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

Pimp My Profile

Post a reply

Make a Donation

Who is online