do you want to personalize your home page for visitors who are logged in? the key point here is that the person must be logged in because if they aren't there is no name to grab out of the DOM object. the basic concept to get someones name is quite simple. when a person is logged in and they hit a link to your home page, their name is placed in the header of the html page that is sent to them from the web server. because their name exist in the html page you can grab the name from the page and then write it to your page dynamically, making it look as if you know who they are. dynamically modifying the html page requires you to use a scripting langauge, which is a little more complex then html or CSS, but can be lots of fun since you can use programming logic to write things to only certain people or whatever you want. remember though don't put anything too private because your source code is viewable.

Ok so how do you do it? well recently imvu changed their header structure and made it a lot easier to grab the name. no more parsing of strings to find the name. they actually made the name a reference and specified an id name for the tag called "mininav-avname." therefore all you have to do is grab the html within the reference tag with that name and no further parsing is required. of course, if imvu decides to change their header in the future you might have to use a different id and you might have to go back to parsing a string. but for know it works.

the following image gives you the code that wrote the sentence with my id name in it for BBK. its pretty self explanatory, not real hard just remember you have to form the syntax properly. if you have problems feel free to drop me a note, and i might be able to help.

POSTED: October 2007

tired of having your images being put in the default place imvu positions them on your page? well putting images and for that matter any html between the right set of tags will allow you to position things where you want.

on the example image above, i placed the fintune plugin (which is enclosed within a table) in the middle of the CD covers imvu automatically creates when you select a song in the music section. this technique can be used to place anything anywhere that you want. you could use this instead of stickers if you like.

so what do you have to do? its easy, the magic of CSS allows you to easily place anything anywhere you like by placing things between a div or span tag. these tags allow you to separate your code into sections so that you can easily apply style properties to things enclosed within them. imvu makes placing things relative to a section pretty easy because each section is defined by a div tag. there are a few different ways things can be positioned with css. there's absolute, fixed, relative, and hmm? whats the other?

anyway i use a span tag and absolute to position my stuff relative to an imvu div tag cause i want it to move relative to the section and be placed over the object.

to see the exact code just do a view source on my page and a find for the my music section. my css can be found in the user html area.

in short what i do is define a class called .plc (short for place). the period before identifies it as a class where a # would define it as an id. Anyway the css for positioning is as follows:

DIV #music_panel_body .plc { position: absolute; left:180; top:140; width:600}

remember to place this between an open and close style tag. as you can see i have scoped it to be within the music_panel_body div tag. The property value for the positioning is set to absolute. the stuff inbetween a span tag with the class defined as .plc will be place from the left side 180 pixels and from the top 140 pixels.

once you have this defined then you just need to enclose the stuff you want to position between a set of span tags where the class is defined as "plc". for this example i did it around the table so the embedded object as well as the reference image is placed where i want it to go.

the complete code looks as follows:

POSTED: September 2007

If you don't have the model to work with do the following to get a screen capture of your avatar:

1) Use something like Quick Screen Recorder to record the motion (run a dance loop or movement with a room) of your avi on your computer screen.

2) The recorder creates an avi file that you can edit with a lot of different programs. To make this gif i just reduced the number of frames, cropped it, and resized it using Jasc Animation Shop 3. You can be a lot more creative but it takes work. To make the gif with no background, I captured the movement of the avatars agains a green screen and used Jasc Animation to remove everything that color. The edges are a little jagged as you can see. This can be cleaned up using Jasc Paint Shop Pro but it requires u edit each frame individually, which is a lot of work. But if your animation is short it might be worth it to get a better product. NOTE: The steps you take to make the animation and edit also matter. Use high contrast clothing to the green sreen, shoot it with as much resolution as possible, remove the background, then resize to the gif size you want for the web page.

3) If you decide to edit each frame separately you then need to mport all of the frames in the right sequence (adding words or titles) in your favorite program to create the animated GIF, AVI, or FLASH.

NOTE: These animations are GIF format around 1 meg in size. You should notice it takes a while to download to your desktop (the image will move real slow because it is downloading each frame one at a time). Once it is downloaed it will run at the rate it was designed. You can write your html so that the image is not shown until it is downloaded or just let people see a slow image until it is completely downloaed. The other thing you might want to do is just to keept the animation much smaller this will help a lot. HAVE FUN.
POSTED: June 2007

There are four changes you need to make to the my vistor panel to make it look like the above

1) add scroll bars so that the my vistor block does not change size (NOTE:you can force the avatars to be all the same size if you like which will acccomplish the same thing but I like the big avatars and want to see them. therefore i opt for scrollbars to keep it consistent.)

2) Add a frame and background around the visitor avatars

3) change the header background and background text to the colors you want, and

4) Add a background image for the body

For 3) and 4) just go to edit mode to make the change using the edit tab for the my visitor panel. The only trick you might not be familiar with is how to add a background image, since it requests a URL. The easiest way to do this is to store the images you use on a site like fileden.com or imageshack.us or your own site if you have one so that you can reference an http url of your image. Make the image the size of the default pixel size you will set below and load the image into your file hosting site. The two sites above make it pretty easy to get a url. Copy the url, select the edit tab for background, paste it into the url for backgound box, and save. Your image should be showing in the my vistor panel when you preview. You can also do this with cSS.

To add a frame and background color to your visitor's avatars (number 2) you need to add custom CSS to the panel. The same technique can be used to add an image that has a fancy border such as a border of flowers, but you need to consider how to handle PNG avi's that expand. It can also be used in other panels such as the message panel but you need to View the Source and search for the right CSS class or id to use to add the correct properties too. For the My Vistors panel the best class to use is the .avPic since it frames the entire avatar, URL, and status box no matter how large the avatar is when displayed. If you use the IMG tag, it will outline the avatar image as well as the status image. Not ideal since the status image when not on-line still exists and you see a box around the place the status image would normally be. It also does not work well with large avatars, because it simply puts a box around the width and height specified in the image tag.

To add the frame and background Use the edit HTML/CSS pick on the My Vistor panel and add this snippet of CSS. (NOTE: the CSS must be placed between an open style tag and a close style tag. An open tag starts with the symbol < and ends with >, the word style goes between them. A close style tag starts with the same symbol but immediately after it a slash "/" is placed. That's the only difference. I'd add it below but for some reason IMVU does not handle escapes correctly and I haven't had the timeto figure out how to add code that can be copied easily. Therefore for now just imagine it or go to my site and view the source code and search for My Visitors and look at the code. To do this on IE just select View on your broswer and pick source. The source code for my page will pop-up which will allow you to search and see the changes i have made to the My Visitors panel.)

div#visitors_panel_body A {color:#808080}

div.avPic {border-style: double; border: 1px solid #808080; padding: 5px; background-color:#000000}

So whats going on? The div#visitors_panel_body line is changing all references (Hyperlinks) to the color #808080, which is the hexidecimal representation for the color gray I am using throughout my page. The reason it is has a leading "#" sign is because it is an id versus a class. The div.avPic line is adding a border that is 1pixel wide with 5 pixels of padding, and the black background #000000. The .avPic is a class so it starts with a period. The CSS must be place between an open and close style tag.

Ok to fix the size of the panel and make scrollbars appear when large avi's make the panel increase add the following snipet of CSS between the style tags you added above.

div#visitors_panel_body { overflow: auto; width: 550px; height: 350px; scrollbar-face-color: #808080; }

The overflow property is what controls the scroll bar. Anything that requires more pixels then what is allowed by the width adn height property will cause a scroll bar. The width and height obviously control the size of the panel, and scrollbar-face-color porperty allows you to change the color of the scrollbar.

As you can see it's pretty easy to use CSS. Half the battel is figuring out which properties exist (and work for each browser), and then figuring out how to add them to the proper class or id to get the effecdt you are looking for. Any way have fun, hope it was useful (IWA).
POSTED: July 2007