Offline
Background
Birthday: January 4
Gender: Male
Location:
PHILADELPHIA
United States
Quote:
It's better to be late at the Golden Gate than to arrive in Hell on time

My Journals (1)

I made a post in Community Help recently about tweaking the member name displayed in your profile page above your profile picture. This journal entry is a step-by-step guide to doing it which should be easier to understand for beginners than what I posted in the Community Help group forum.

This is what we are going to change, (outlined in red):

You'll need a graphic image of your member name to display in place of the default text. I kind of suck at graphics, but I'll try.

The graphic will display in a box that is 222 pixels wide and 22 pixels high. You'll need something that will fit in there. No matter how you make it, it should be either a .jpg or .gif format. .png may also work for newer browsers, but I recommend sticking with one of the first two. My graphic looks like this:

The next step is to upload your graphic somewhere on the internet so you can access it via URL. I happen to have server space available, but if you don't, don't worry. You can use web space provided by your ISP, or use a free photo sharing site like flickr. I was surprised at how easy flickr is. If you already have a Yahoo account, you can sign into Flickr and begin using it. I actually started a flickr account for this tutorial. I have an image uploaded there. The URL is http://farm3.static.flickr.com/2599/4072304259_3f32a5aa1d_m.jpg

To get the URL, go to your flickr photostream and right-click on your graphic image. Choose "properties" from the drop-down menu. You should get a box with the image properties, including the URL. Highlight the URL and copy it. Paste it into something like Notepad and save it for later.

Now for the fun part. Copy the following code and paste it into Notepad, (or any plain text editor):

<style type="text/css>
div.profileNav div.memberName {
text-align: left;
text-indent: -100.0px;
background-image: url(replace this text with the URL);
background-repeat: no-repeat;
background-position: center center;
}
</style>

Where it says, "replace this text with the URL", do just that. Copy the URL to your graphic and put it in there in place of that text. Be careful to leave the brackets intact. Once edited, highlight all of the code and copy.

Go to your AARP community profile. If you are logged in, you'll see the "edit about me" button.

 Click it and go to the edit page. Paste, ( control + v ), the code into the top in the first box. It should look like this:

 Don't forget to save your changes:

That's it. Look at your profile page and you should see your member name graphic instead of the default text.

Helpful hint: I made a graphic at cooltext.com. It wasn't exactly the right size, so I opened it in irfanview, a free image editor program. First I clicked EDIT and auto-cropped borders, then I clicked IMAGE and Resize/resample. I resized to 22 pixels height and made it  longer, about 100 pixels or so. preserve aspect ratio was unchecked.

 

Added: November 3, 2009
Views: 125 | Comments: 1 | Bookmarks: 0
Journal Archives