mySpace Version 2 Customize Top Section, Mood, Online now Icon, contact Table, url, image, last login, location

MySpace 2.0 (V2)(v.2) Customize the top area

All rights reserved.
You may use my code for the following:
- to customize a myspace page
- for any other use please ask. I usually say yes, if the use adds value (such as use with layout art and use in other tools.)
But I like credit.
- Do NOT remove my credits (you may add your own if you add value).


For a tool that will generate the needed code, for either an online now icon, which will allow you to show one icon when online and another when not online, go here:

http://xiii.us/eGen/olSkin.php

The online icon code is pretty easy and straight forward, I am sure it can probably be found on lots of sites by now (it is much easier then in version 1).
However, showing one icon when offline, and another when online, and allowing for transparency, does take more complicated code. So please do not copy my code to other sites. You may use it, on your profile.
If you want to make icons to work with the code, ask me, I am willing to share with those who are adding value (such as creating images).



This article is a work in progress. I just wanted to get some code out here, to refer people to, who were asking how to do this stuff.

Custom Mood:

Replace the image, with the image you want to use, then insert the following block of code into your css edit area.

{! start Custom Mood !}
div.basicInfoModule div.basicInfoDetails span.mood img {height:0px; width:0px; display:inline;}
div.basicInfoModule div.basicInfoDetails span.mood img { padding-right:30px; padding-top:30px; background-image:url(http://i38.tinypic.com/2wna25l.jpg); background-repeat:no-repeat;}
i.iix {display:none;}
{! end code for custom mood !}

If your image size is larger then the 30x30, adjust the padding px sizes, to accomodate your image.

Custom online now icon:
Replace the image, with the image you want to use, then insert the following block of code into your css edit area.

{! start code for custom online now icon !}
img.ImgOnlineNow {height:0px; width:0px; 
padding-top:20px; 
padding-left:80px; 
background-image:url(http://i2.tinypic.com/4q5x18z.gif); 
background-repeat:no-repeat;}
i.iix {display:none;}
{! end code for custom online now icon !}

Custom OFF and ONLINE icons

I have an updated version of this code, that does allow for the online icon to contain transparency. Instead of covering the offline icon, as my earlier version of the code did, it will actually remove the offline icon, when the online icon is displayed. This allows for more transparency in the online icon.

The newer code can be found here:
online now icons myspace 2.0, offline icons myspace 2.0


This will display one image when you are offline and another when you are online.
This requires an image, where the bottom 20px represent the image you want to show when offline, and the top 20px represent the image you want to show when online.
If using transparency, the online portion of the image needs to cover all the visible areas of the offline icon (unless you want these areas to show while online).

{!start code for custom online/offline icon!}
{!code author:Eileen views-under-construction.blogspot.com !}
{!do not remove my credit, do not re-publish my code, see above website for terms!}
li.offline {display:none;}
ul.profileUserInfo li {background-position:left bottom; height:20px; width:80px; background-repeat:no-repeat;} 
ul.profileUserInfo li img{ padding-top:20px; background-repeat:no-repeat; background-position:left top;}
ul.profileUserInfo li, 
ul.profileUserInfo li img {background-image:url(http://i287.photobucket.com/albums/ll142/mpskin/0-0/onoff/scroll-gold.png);}
ul.profileUserInfo li#adr,
ul.profileUserInfo li.tags,
ul.profileUserInfo li.lastlogin {background-image:none; width:auto; height:auto;} 
{!end code custom off/online icon !}

Style the contact table:
The easiest improvement to make to the default contact table, is to remove the ugly images, and then style the text.

The following code block will remove the images,style the text, position the link within the li (solves some alignment/spacing issues), apply background color:

{! contact table customize!}
{! code author:Eileen; views-under-construction.blogspot.com !}
li.i.clearfix {display:none;}  
{!OPTIONAL: color and border to contact table!}
ul.contactLinks {background-color:mistyrose; border:2px magenta solid;}
{!Size contactLinks div, override padding!}
ul.contactLinks {width:100px; height:60px; padding:0px;}
{size of individual li elements around each link}
ul.contactLinks li {position:relative; width:100%; height:33%;  text-align:center;}
{!apply to all contactLinks!}
ul.contactLinks li a {background-image:none; padding:0px; font-family:comic sans ms; font-size:11px; margin-right:auto; margin-left:auto;}
{!apply style for link pseudo-classes!}
ul.contactLinks li a:link, 
ul.contactLinks li a:active, 
ul.contactLinks li a:visited  { color:purple;  }
ul.contactLinks li a:hover {color:green; text-decoration:none;}
{!OPTIONAL color center link a different color!}
ul.contactLinks li.addToFriends {background-color:silver;}

Custom contact table:
To find custom contact tables, and code generator for use with your own custom contact table, go here:
myspace 2.0 custom contact tables, custom contact table code generator

There are so many different ways to do this.
If you are NOT moving the table (or moving it a very small distance, using margins) I recommend placing your custom table image, as a background, to the ul.contactLinks
element.
(I used the li element instead, because I later plan to add the option to move the table.)
However, if you want to move the contact table/links,
my preferred method is to use the top li element to hold the contact table image, and then place the additional li elements so that the correct portion of the background shows through.

(Due to the existing core myspace code, moving the ul element, has issues. )

The following block of code applies a custom image, to the contact table, and removes the existing text and image. This code will keep the table in the default position. The custom image should be 100x90 pixels, with each link 100x30.
This is slightly longer then the default contact table, and will push down the picture area, slightly.

This code goes in the css section, of the customize profile section:

{! start code for custom contact table !}
{! code author:Eileen; views-under-construction.blogspot.com; all rights reserved; !}
ul.contactLinks {width:100px; height:90px; overflow:hidden;  background-image:url(http://i287.photobucket.com/albums/ll142/mpskin/0-ct/100x90/scroll-pink-candy.png); background-repeat:no-repeat;}
ul.contactLinks li {  height:29px; width:100%; margin:0px; overflow:hidden; display:block;}
ul.contactLinks li a { background-image:none; height:28px;  width:100px; float:left; text-indent:1313px }
{! end code for custom contact table !}

Replace my image with your own. (or you may use my image if you want.)

The next block does not relocate the table, but uses code that will make it easier to later relocate the table. This is the version currently being used in my code/contact table tool. There are so many ways to code this, that each time I write the code, I do it slightly different.

{! START custom contact table/links skin !}
{!xiii.us/eGen/ctSkin.php code author:Eileen all rights reserved!}
ul.contactLinks {position:relative; height: 90px; width:100px;}
ul.contactLinks li.message {overflow:hidden; background-image:url(http://i287.photobucket.com/albums/ll142/mpskin/0-ct/100x90/nature/butterfly-on-green.png);height:90px; width:100px; position:absolute; top:0px; left:0px; }
ul.contactLinks li.addToFriends {overflow:hidden; height:30px; width:100px;position:absolute; top:29px; left:0px;}
ul.contactLinks li.comment {overflow:hidden; height:30px; width:100px;position:absolute; top:60px; left:0px;}
ul.contactLinks li a {display:block; background-image:none; padding-left:1313px; width:100px; height:30px;}
{! END custom contact table/links skin !}

The next code block allows you to re-position the contact table, using absolute positioning within the modulebasicInfo div, and measured from the top left corner of that div.
This code goes in the css section, of the customize profile section:

{! start code for custom contact table !}
{! code author:Eileen; views-under-construction.blogspot.com; all rights reserved; !}
ul.contactLinks li.message
{display:block; position:absolute; top:0px; left:0px; height:90px; width:100px; background-color:transparent;}
ul.contactLinks li.addToFriends {display:block; position:absolute; top:30px; left:0px; height:30px; width:100px; }
ul.contactLinks li.comment {display:block; position:absolute; top:60px; left:0px; height:30px;  }
ul.contactLinks li a {padding:0px; position:absolute; top:0px; left:0px; width:100px; display:block; }
div.modulebasicInfo {position:relative; }
{! end code to customize contact table !}

Replace my image with your own. (or you may use my image if you want.).
Alter the top and left values so that each link positions where you want it.

[More custom contact table options coming later, so little time, so much code in my head ...]

URL style

After applying the custom contact table, I realized the url looked really bad, I could add it to the top of the contact table, hide it or move it.
Instead I will ditch the ugly orange icon, and modify the text font to blend in.

{!url link!}
{! code author Eileen; xiii.us; views-under-construction.blogspot.com !}
{! however easy the code was to write, if you got it from me, do not remove my credit !}
span.urlLink i.icon {display:none;}
span.urlLink a.url {background-image:none; color:gold; font-size:8px; font-family:comic sans ms;}

OR I can completely hide the url:

{! hide url myspace 2.0 code by Eileen !}
span.urlLink {display:none;}
{! end code to hide url !}

[More code coming soon, so much code in my head, so little time.]