Tiny Icon Tutorial

[sireesanwar]

Account Status: Free
Actions: Putting Tiny Icons in your journal
Theme: Flexible Squares (not sure if it works with other themes

Comments

[joyfulljunebugg]

I don't know how to remove the default Ljs icons from on top of the custom icons how do I do that?

This is my tiny icon section, the ones I can see work its just that the Ljs icons are on top of them.

/*------------ tiny icons ------------*/

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"], .ljuser img[src*="syndicated.gif"], .ljuser img[src*="newsinfo.gif"], .ljuser img[src*="partnercomm.gif"], .ljuser img[src*="sponcomm.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"] {height: 0px; width: 0px;background: transparent none no-repeat scroll 0 0; }

.subject img {vertical-align: middle !important;}
img[src*="icon_protected.gif"]{ background-image:url(http://img20.imageshack.us/img20/1182/183o.png);
padding:0 0 11px 12px !important;}
img[src*="icon_private.gif"]{ background-image:url(http://img20.imageshack.us/img20/1182/183o.png); padding:0 0 11px 12px !important;}
img[src*="icon_groups.gif"]{ background-image:url(http://img20.imageshack.us/img20/1182/183o.png); padding:0 0 11px 12px !important; }

.ljuser img { width: 0; height: 0; background: transparent url(http://i30.tinypic.com/j13wvm.jpg) no-repeat 0 0; padding: 17px 16px 0 0px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i30.tinypic.com/j13wvm.jpg) no-repeat center left !important; padding: 17px 16px 0 0px !important; }
.ljuser img[src*="community.gif"] { background:transparent url(http://i30.tinypic.com/jg14ky.jpg) no-repeat scroll 0 0 !important;
padding: 16px 16px 0 0 !important; }

img[src="http://l-stat.livejournal.com/img/btn_track.gif"] {
background:transparent url(http://img190.imageshack.us/img190/4688/041.png) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }

img[src="http://l-stat.livejournal.com/img/btn_freeze.gif"] {
background:transparent url(http://img35.imageshack.us/img35/1876/091s.png) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }

img[src="http://l-stat.livejournal.com/img/btn_del.gif"] {
background:transparent url(http://img25.imageshack.us/img25/1674/101hec.png) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }

img[src="http://l-stat.livejournal.com/img/btn_scr.gif"] {
background:transparent url(http://img37.imageshack.us/img37/2053/150qlp.png) repeat scroll 0 0; height: 0; padding: 0 0 16px 16px !important; width:0; }

EDIT: FINALLY SUCCESS
Between you and Tuff_Ghost (found him in your memories) I found these two replacement codes! It took an hour of replacing codes to get this to work. Although now that I understand your tut a little better I think I'll go with your 16px over the 24px I'm using the icons are a bit spread out. THANKS!!!

.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(MY IMAGE URL) !important;
padding: 24px 24px 2px 2px !important;
}

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="community"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(MY IMAGE URL) !important;
padding: 24px 24px 2px 2px !important;