?

Log in

No account? Create an account
ele

[S1] and [S2] Profile Icons

This tutorial  shows you how to replace the little profile icons (User,community,sponsored community,news,syndicated,open id) with your own. If you use a Mozilla based browser, Internet Explorer 7 or Opera (not sure about Safari, but it should work there too) you can replace each image with a different one. If you use the complete code, in Internet Explorer 6 and lower you will only see one new image. You can remove the red part and you keep the six old images in IE 6 and lower and see the six new images in other browsers.
Older Versions then version 6 of the Microsoft Internet Explorer do not understand the part in blue, other browsers like Firefox and Opera don't understand the red part.



/*profile icons*/

/* so that IE users will see a new image */
* html span.ljuser{
background-image: url(YOUR IMAGE FOR THE USER) !important;
background-repeat: no-repeat;
background-position: left middle;
padding: 0px 16px 16px 0px !important;
}
* html span.ljuser img{
visibility: hidden;
}


/* icon for users */
.ljuser img[src*="userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR IMAGE FOR THE USER) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for communities */
.ljuser img[src*="community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR COMMUNITY IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for sponsored communities */
.ljuser img[src*="sponcomm.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR SPONCOMM IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for syndicated */
.ljuser img[src*="syndicated.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR SYDICATED IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for news */
.ljuser img[src*="newsinfo.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR NEWS IMAGE) !important;
padding: 16px 16px 0 0 !important;
}
/* icon for open-id */
.ljuser img[src*="openid-profile.gif"] {
width:0;
height: 0;
background-repeat: no-repeat;
background-image: url(YOUR OPEN-ID IMAGE) !important;
padding: 16px 16px 0 0 !important;
}

The 16px you see everywhere are the width and height of the image. You can either use images that are also 16x16px or you will have to change the numbers.
In S1 the above coding belongs in your HEAD codes between the style tags. You don't understand? Please read "Merging your overrides/the style tag." In S2 it belongs in either your external stylesheed, the Custom CSS box or in the CSS section of your layer.
Tags:

Comments

Spuffy

August 2007

S M T W T F S
   1234
567891011
12131415161718
19202122232425
262728293031 
Powered by LiveJournal.com