Tiny icons on top of old icon SOLVED

[thagirion]

I have a custom tiny icon of a parakeet on my journal thagirion that is sitting on top of the default icon instead of replacing it. I have lots of code for my journal. You can view it here

Comments

[london_fan]

Right now you have the following code in your layer:

html body .ljuser img {
width: 0; !important;
height: 0; !important;
background-repeat: no-repeat;
background-color:transparent;
/* so that IE users will still see an image */
background-image: url(http://i66.photobucket.com/albums/h260/budgiebutts/budgieheadsmall.gif);
padding: 17px 17px 0 2px !important;
}

html body .ljuser img[src="http://stat.livejournal.com/img/userinfo.gif"] {
width: 0; !important;
height: 0; !important;
background-color:transparent;
background-image: url(http://i66.photobucket.com/albums/h260/budgiebutts/budgieheadsmall.gif);
padding: 17px 17px 0 2px !important;
}

html body .ljuser img[src*="community.gif"] {
width: 0; !important;
height: 0; !important;
background-color:transparent;
background-image: url(http://stat.livejournal.com/img/community.gif);
padding: 16px 16px 0 2px;
}

Find it and replace it completely with the following code:

.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(http://i66.photobucket.com/albums/h260/budgiebutts/budgieheadsmall.gif) !important;
padding: 17px 17px 0 2px !important;
}

.ljuser img[src*="community.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(http://stat.livejournal.com/img/community.gif) !important;
padding: 16px 16px 0 2px !important;
}

Make sure that you copy and paste the complete code, including the closing "}". That should fix your problem.

Question: Do you actually want a custom user icon for communities, too, because your current code just replaces the default community icons with the default community icon, so it's basically redundant. I still left it in for you in case you want to customize it.

[thagirion]

Oh wow thank you SO much. This is wonderful. Now the custom paid user heads that some of my friends have didn't change.. Is there a way to change those too? Or do the paid icons have their own code? Here's an example.
http://thagirion.livejournal.com/662886.html

But yes loads better and my text isn't being stretched. Thank you very much.

[london_fan]

Yes, you can change pretty much all custom icons, including the ONTD, staff and personal ones.

Okay, you see the first line of the new code...

.ljuser img[src*="userinfo.gif"] {

Replace it with this code:

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="user_ontd.gif"], .ljuser img[src*="userinfo-support.gif"], .ljuser img[src*="userhead"] {

The first one replaces the default user icon, the second one the purple ONTD one, the third one the green staff ones and the last one all other custom user icons people have paid for! Hope that helps! :)

[thagirion]

Excellent. This is wonderful since I had the extra icon of a cockatiel head I've been wanting to use. Now I can and my three icons show up in that post. Thank you so much for your help. This has been wonderful.

[london_fan]

You're welcome. I'm glad I could help!

[london_fan]

No problem! :)

Your current code is:

.ljuser img[src*='userinfo.gif'] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url('http://pics.livejournal.com/inishmore/pic/0033d75b') !important;
padding: 24px 24px 2px 2px !important;
}

If you want to replace the LJ default icon, replace your code with this one:

.ljuser img[src*="userinfo.gif"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(http://ic.pics.livejournal.com/inishmore/3855567/87876/87876_original.gif) !important;
padding: 24px 24px 2px 2px !important;
}

If you also want to replace the paid userheads, you should replace your code with this one instead:

.ljuser img[src*="userinfo.gif"], .ljuser img[src*="userhead"] {
width: 0 !important;
height: 0 !important;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(http://ic.pics.livejournal.com/inishmore/3855567/87876/87876_original.gif) !important;
padding: 24px 24px 2px 2px !important;
}

P.S.: What a cute custom icon! Love it. I'd change the padding a little, though, because the icon doesn't really need 24px height, right? You might want to go with a lower number on the padding there, e.g.

padding: 16px 24px 2px 2px !important;

:)

[inishmore]

Thank you so much, you're a life saver! I've been using my custom layout for many years and always get frustrated when LJ does an official code change/tweak that wrecks some minor havoc with my coding. ;) And sorry about the late reply, when I posted the comment I forgot that I wouldn't be able to log into LJ for a while because of a business trip. Anyway, thanks again!

[london_fan]

No problem, you're welcome. :)

[joyfulljunebugg]

Hello (^_^)o london_fan I'm having the same problem as OP in my communities, the custom tiny icon is sitting behind the default icon instead of replacing it. I wan't to remove both of these tiny icons and use my own but the layout I'm using has many tiny icon URLs and I'm not sure which one to replace (◎ _ ◎ ;) ???

This is the part of the code with the tiny icons info

/*------------ 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://i42.tinypic.com/6jd72u.png) no-repeat 0 0; padding: 17px 16px 0 0px !important; vertical-align: baseline !important;}
.ljuser img[src*="userinfo.gif"] { background: transparent url(http://i42.tinypic.com/6jd72u.png) no-repeat center left !important; padding: 17px 16px 0 0px !important; }
.ljuser img[src*="community.gif"] { background:transparent url(http://i42.tinypic.com/9zv8d2.png) no-repeat scroll 0 0 !important;
padding: 16px 16px 0 0 !important; }

Thanks if you can help (¬ ‿ ¬)

[london_fan]

Just to make sure... you want to replace the userheads for users and communities, right?

In this case the last paragraph is what you need to change:

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

Replace it with the code found in this comment and change the urls of course!

P.S.: I've seen your open help request and I might be able to help with some of it at the weekend, but I'm really very busy at the moment, so no promises. I could give you some code to add the calendar to the sidebar, but I don't know how to place it at the bottom.

[joyfulljunebugg]

Thank You so much it worked ( ๑╹3╹๑) yeah a wanted to change the tiny icon for my community!

Oh and don't bother with the calendar it's under the archive tag I just over looked it ¯\(°_o)/¯