replacing LJ default tiny icons
A guide to putting in your custom tiny icons.
1. Code for Flexible squares
Hello, peeps. The below is the base code I copy-paste into my Flexible Squares layouts for replacing the tiny icons. You can also use this for minimalism and any other layout that has image buttons on the comments. Others like Smooth Sailing and Mixit don't use so many images, but we'll get to them later.
The code as it is here operates on the assumption that the images you'll be using are the same size, ie. 16 x 16, 10 x 10. I leave the user and community icons separate because they're usually the ones that might be different sizes.
All you do here is make sure the paddings match the ones for your image, and put your image urls in between the brackets. If you're not using it for Flexisquares, then replace .subject with the name of layout's entry header element.
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*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url()}
img[src*="icon_private.gif"]{background-image: url()}
img[src*="icon_groups.gif"]{background-image: url()}
.ljuser img[src*="syndicated.gif"]{background-image: url() !important}
.ljuser img[src*="newsinfo.gif"] {background-image: url() !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url() !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url() !important}
img[src*="btn_del.gif"]{background-image: url()}
img[src*="btn_scr.gif"] {background-image: url()}
img[src*="btn_unscr.gif"] {background-image: url()}
img[src*="btn_freeze.gif"] {background-image: url()}
img[src*="btn_unfreeze.gif"] {background-image: url()}
img[src*="btn_track.gif"] {background-image: url()}
img[src*="btn_tracking.gif"] {background-image: url()}
img[src*="btn_tracking_thread.gif"] {background-image: url()}
img[src*="anonymous.gif"] {background-image: url()}
img[src*="openid-profile.gif"] {background-image: url()}
img[src*="userinfo.gif"] {background-image: url()}
img[src*="talk/none.gif"] {background-image: url()}
img[src*="help.gif"] {background-image: url()}
img[src*="pencil.gif"] {background-image: url()}
img[src*="btn_edit.gif"] {background-image: url()}
img[src*="upgrade-paid-icon.gif"] {background-image: url()}
.ljuser img {width: 0; height: 0; background: transparent url() no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url() no-repeat center left !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url() no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}
Sometimes I combine icon sets, so some of the images may be 10x10, others 16x16. Usually the private/locked/group images in the subject. Then, I'll add this after the line for .subject img {:
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"] {padding: 10px 10px 0px 0px !important}
If most all of your images are different sizes, then you should code them all in separately, like so:
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*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"],img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px;background: transparent none no-repeat scroll 0 0}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{ padding: 0 0 16px 16px !important; background-image: url()}
img[src*="icon_private.gif"]{ padding: 0 0 16px 16px !important; background-image: url()}
img[src*="icon_groups.gif"]{ padding: 0 0 16px 16px !important; background-image: url()}
.ljuser img[src*="syndicated.gif"]{padding: 0 0 16px 16px !important; background-image: url() !important}
.ljuser img[src*="newsinfo.gif"] {padding: 0 0 16px 16px !important; background-image: url() !important}
.ljuser img[src*="partnercomm.gif"]{ padding: 0 0 16px 16px !important; background-image: url() !important}
.ljuser img[src*="sponcomm.gif"] {padding: 0 0 16px 16px !important; background-image: url() !important}
img[src*="btn_del.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_scr.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_unscr.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_freeze.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_unfreeze.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_track.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_tracking.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_tracking_thread.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="anonymous.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="openid-profile.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="userinfo.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="talk/none.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="help.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="pencil.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_edit.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="upgrade-paid-icon.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
.ljuser img {width:0;height: 0;background: transparent url() no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] { background: transparent url() no-repeat center left !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="community.gif"] {background: transparent url() no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}
2. Code for Smooth Sailing
This is for Smooth Sailing layouts, and other themes that' don't need all the comment buttons replaced. As you can tell, I don't get around many layouts so I'm not sure what other themes this may apply to. Replace .sideboxTitle with whatever is the layout's entry header element.
With everything broken up:
.sideboxTitle img { vertical-align: middle !Important}
img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background-repeat: no-repeat; background: url(); background-position: center left}
img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 16px 16px 0px 0px !important; background: url(); background-position: center left}
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url()}
.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: center left; background-repeat: no-repeat}
img[src*="syndicated.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: center left;background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="newsinfo.gif"] {background: transparent url() no-repeat scroll 0% 50% !important; padding: 10px 10px 0 2px !important; background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="partnercomm.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: 0% 50%; background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="sponcomm.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: 0% 50%; background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="userinfo.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="none.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="pencil.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="btn_edit.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
.ljuser img {width: 0; height: 0; background: transparent url() no-repeat center left; padding: 10px 10px 0 2px !important; vertical-align: baseline !Important}
.ljuser img[src*="userinfo.gif"] { background: transparent url() no-repeat center left !important; padding: 10px 10px 0 2px !important}
If your images are all the same size:
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"],img[src*="syndicated.gif"],img[src*="newsinfo.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"], img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="none.gif"], img[src*="help.gif"], img[src*="btn_edit.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 10px 10px !important; background: transparent none no-repeat scroll 0 0}
.sideboxTitle img {vertical-align: middle !Important}
img[src*="icon_protected.gif"]{background-image: url()}
img[src*="icon_private.gif"]{background-image: url()}
img[src*="icon_groups.gif"]{background-image: url()}
.ljuser img[src*="syndicated.gif"]{background-image: url() !important}
.ljuser img[src*="newsinfo.gif"] {background-image: url() !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url() !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url() !important}
img[src*="anonymous.gif"] {background-image: url()}
img[src*="openid-profile.gif"] {background-image: url()}
img[src*="userinfo.gif"] {background-image: url()}
img[src*="talk/none.gif"] {background-image: url()}
img[src*="help.gif"] {background-image: url()}
img[src*="pencil.gif"] {background-image: url()}
img[src*="btn_edit.gif"] {background-image: url()}
img[src*="upgrade-paid-icon.gif"] {background-image: url()}
.ljuser img {width: 0; height: 0; background: transparent url() no-repeat center left; padding: 10px 10px 0 2px !important; vertical-align: baseline !Important}
.ljuser img[src*="userinfo.gif"] {background: transparent url() no-repeat center left !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] {background: transparent url() no-repeat center left !important; padding: 10px 10px 0 2px !important}
3. What the hell am I replacing anyway?
The images, what they do and where you'll find them. I've split this up into "basic" and "plus" based on what you need to change for your own account type. In the codes above you'll notice they've been split into groups. The penultimate group only applies to plus or paid account users. That is, everything from btn_del to btn_edit in Flexible Squares, and anonymous to btn_edit in Smooth Sailing.
All account levels
.ljuser img[src*="userinfo.gif"]The user icon as it appears in entries, headers, and in the control strip..ljuser img[src*="community.gif"]The community icon as it appears in entries, headers, and in the control strip..ljuser img[src*="syndicated.gif"]The feed icon as it appears in entries, headers, and in the control strip..ljuser img[src*="newsinfo.gif"]The icon for the LJ news community..ljuser img[src*="partnercomm.gif"]The icon for partner communities as it appears in entries, headers, and in the control strip..ljuser img[src*="sponcomm.gif"]The icon for sponsored communities as it appears in entries, headers, and in the control strip.img[src*="icon_protected.gif"]The icon for friends-locked entries as it appears in the subject header and sidebar.img[src*="icon_private.gif"]The icon for private entries as it appears in the subject header and sidebar.img[src*="icon_groups.gif"]The icon for entries locked to certain friends groups, as it appears in the subject header and sidebar.img[src*="upgrade-paid-icon.gif"]Appears in the contextual pop-up
Plus/Sponsored and Paid Accounts
img[src*="btn_del.gif"]The delete button on the comments.img[src*="btn_scr.gif"]Appears on the comments. Allows the user to screen comments, ie. hide them from view from anyone but the entry posterimg[src*="btn_unscr.gif"]Appears once a comment has been screened in place of the screen button. Clicking on it will unscreen the comment.img[src*="btn_freeze.gif"]Appears on the comments. Freezes the comment, ie. prevents further replies to commentimg[src*="btn_unfreeze.gif"]Appears once a comment has been frozen in place of the freeze button. Clicking on it will unfreeze the comment.img[src*="btn_track.gif"]Appears on the comments. Allows user to receive email updates on the progress of a thread.img[src*="btn_tracking.gif"]Appears on the comments once you have chosen to track it. Clicking on will allow you to unsubscribe from thread.img[src*="btn_tracking_thread.gif"]Appears on the children comments of the thread you have chosen to track.img[src*="anonymous.gif"]Appears on the "Post a Comment" page, beside the option to post anonymouslyimg[src*="openid-profile.gif"]Appears on the "Post a Comment" page, beside the option to post using OpenIDimg[src*="userinfo.gif"]Appears on the "Post a Comment" page, beside the option to post using the current logged in userimg[src*="none.gif"]Appears on the "Post a Comment" page, next to the form for the subject line. Meant to imply a neutral subject icon. You'll notice if you click this there is a box that appears with a bunch of options for other subject icons. You can replace these as well, but almost no one actually uses them.img[src*="help.gif"]Appears in the reply form when replying to an entry or comment. Clicking will open links to FAQ pages.img[src*="pencil.gif"]Appears on the "Post a Comment" page when a person is not logged in, or if they wish to reply as another user and click [other] next to the "Logged in user" option.img[src*="btn_edit.gif"]Appears on the comments. Allows a paid user to edit their comments. (I don't have a paid account so I've never experienced this, but I doubt it's a conspiratorial lie)
4. Recommended Icon Sets
I have links here at the resources post, but here are some quick and easy links and previews for you.
FamFamFam
{ here }
pinvoke fugue pack
{ here }
pinvoke diagona pack
{ here }
brand spanking new
{ here }
damnicon's gif icons
{ here }
graphicsbyjulz's tiny icons
{ here }
icojoy's free web development icons #2
{ here }
icojoy's BacktoPixel: free icons #5
{ here }
sweetie basepack
{ here }
Next time on milou_en_avril: putting little images next to your metadata/currents.
1. Code for Flexible squares
Hello, peeps. The below is the base code I copy-paste into my Flexible Squares layouts for replacing the tiny icons. You can also use this for minimalism and any other layout that has image buttons on the comments. Others like Smooth Sailing and Mixit don't use so many images, but we'll get to them later.
The code as it is here operates on the assumption that the images you'll be using are the same size, ie. 16 x 16, 10 x 10. I leave the user and community icons separate because they're usually the ones that might be different sizes.
All you do here is make sure the paddings match the ones for your image, and put your image urls in between the brackets. If you're not using it for Flexisquares, then replace .subject with the name of layout's entry header element.
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*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 16px 16px !important; background: transparent none no-repeat scroll 0 0}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{background-image: url()}
img[src*="icon_private.gif"]{background-image: url()}
img[src*="icon_groups.gif"]{background-image: url()}
.ljuser img[src*="syndicated.gif"]{background-image: url() !important}
.ljuser img[src*="newsinfo.gif"] {background-image: url() !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url() !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url() !important}
img[src*="btn_del.gif"]{background-image: url()}
img[src*="btn_scr.gif"] {background-image: url()}
img[src*="btn_unscr.gif"] {background-image: url()}
img[src*="btn_freeze.gif"] {background-image: url()}
img[src*="btn_unfreeze.gif"] {background-image: url()}
img[src*="btn_track.gif"] {background-image: url()}
img[src*="btn_tracking.gif"] {background-image: url()}
img[src*="btn_tracking_thread.gif"] {background-image: url()}
img[src*="anonymous.gif"] {background-image: url()}
img[src*="openid-profile.gif"] {background-image: url()}
img[src*="userinfo.gif"] {background-image: url()}
img[src*="talk/none.gif"] {background-image: url()}
img[src*="help.gif"] {background-image: url()}
img[src*="pencil.gif"] {background-image: url()}
img[src*="btn_edit.gif"] {background-image: url()}
img[src*="upgrade-paid-icon.gif"] {background-image: url()}
.ljuser img {width: 0; height: 0; background: transparent url() no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] {background: transparent url() no-repeat center left !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="community.gif"] { background: transparent url() no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}
Sometimes I combine icon sets, so some of the images may be 10x10, others 16x16. Usually the private/locked/group images in the subject. Then, I'll add this after the line for .subject img {:
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"] {padding: 10px 10px 0px 0px !important}
If most all of your images are different sizes, then you should code them all in separately, like so:
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*="btn_del.gif"], img[src*="btn_edit.gif"], img[src*="btn_scr.gif"], img[src*="btn_unscr.gif"], img[src*="btn_freeze.gif"], img[src*="btn_unfreeze.gif"], img[src*="btn_track.gif"], img[src*="btn_tracking.gif"], img[src*="btn_tracking_thread.gif"] , img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="talk/none.gif"], img[src*="help.gif"], img[src*="pencil.gif"],img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px;background: transparent none no-repeat scroll 0 0}
.subject img {vertical-align: middle !important}
img[src*="icon_protected.gif"]{ padding: 0 0 16px 16px !important; background-image: url()}
img[src*="icon_private.gif"]{ padding: 0 0 16px 16px !important; background-image: url()}
img[src*="icon_groups.gif"]{ padding: 0 0 16px 16px !important; background-image: url()}
.ljuser img[src*="syndicated.gif"]{padding: 0 0 16px 16px !important; background-image: url() !important}
.ljuser img[src*="newsinfo.gif"] {padding: 0 0 16px 16px !important; background-image: url() !important}
.ljuser img[src*="partnercomm.gif"]{ padding: 0 0 16px 16px !important; background-image: url() !important}
.ljuser img[src*="sponcomm.gif"] {padding: 0 0 16px 16px !important; background-image: url() !important}
img[src*="btn_del.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_scr.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_unscr.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_freeze.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_unfreeze.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_track.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_tracking.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_tracking_thread.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="anonymous.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="openid-profile.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="userinfo.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="talk/none.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="help.gif"] { padding: 0 0 16px 16px !important; background-image: url()}
img[src*="pencil.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="btn_edit.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
img[src*="upgrade-paid-icon.gif"] {padding: 0 0 16px 16px !important; background-image: url()}
.ljuser img {width:0;height: 0;background: transparent url() no-repeat 0 0; padding: 16px 16px 0 2px !important; vertical-align: baseline !important}
.ljuser img[src*="userinfo.gif"] { background: transparent url() no-repeat center left !important; padding: 16px 16px 0 2px !important}
.ljuser img[src*="community.gif"] {background: transparent url() no-repeat scroll 0 0 !important; padding: 16px 16px 0 2px !important}
2. Code for Smooth Sailing
This is for Smooth Sailing layouts, and other themes that' don't need all the comment buttons replaced. As you can tell, I don't get around many layouts so I'm not sure what other themes this may apply to. Replace .sideboxTitle with whatever is the layout's entry header element.
With everything broken up:
.sideboxTitle img { vertical-align: middle !Important}
img[src*="icon_protected.gif"]{ width: 0; height: 0; padding: 16px 16px 0px 0px !important; background-repeat: no-repeat; background: url(); background-position: center left}
img[src*="icon_private.gif"]{ width: 0; background-repeat: no-repeat; height: 0; padding: 16px 16px 0px 0px !important; background: url(); background-position: center left}
img[src*="icon_groups.gif"] { height: 0px; width: 0px; padding: 0px 0px 16px 16px !important; background: url()}
.ljuser img[src*="community.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: center left; background-repeat: no-repeat}
img[src*="syndicated.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: center left;background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="newsinfo.gif"] {background: transparent url() no-repeat scroll 0% 50% !important; padding: 10px 10px 0 2px !important; background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="partnercomm.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: 0% 50%; background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="sponcomm.gif"] {background-color:transparent; background-image: url() !important; padding: 10px 10px 0 2px !important; background-position: 0% 50%; background-repeat: no-repeat; width: 0px; height: 0px}
img[src*="anonymous.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="openid-profile.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="userinfo.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="none.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="help.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="pencil.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="btn_edit.gif"] { height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0px 0px 10px 10px !important; background: url() no-repeat scroll 50% 50%}
.ljuser img {width: 0; height: 0; background: transparent url() no-repeat center left; padding: 10px 10px 0 2px !important; vertical-align: baseline !Important}
.ljuser img[src*="userinfo.gif"] { background: transparent url() no-repeat center left !important; padding: 10px 10px 0 2px !important}
If your images are all the same size:
img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="icon_groups.gif"],img[src*="syndicated.gif"],img[src*="newsinfo.gif"], img[src*="partnercomm.gif"], img[src*="sponcomm.gif"], img[src*="anonymous.gif"], img[src*="openid-profile.gif"], img[src*="userinfo.gif"], img[src*="none.gif"], img[src*="help.gif"], img[src*="btn_edit.gif"], img[src*="upgrade-paid-icon.gif"] {height: 0px; width: 0px; padding: 0 0 10px 10px !important; background: transparent none no-repeat scroll 0 0}
.sideboxTitle img {vertical-align: middle !Important}
img[src*="icon_protected.gif"]{background-image: url()}
img[src*="icon_private.gif"]{background-image: url()}
img[src*="icon_groups.gif"]{background-image: url()}
.ljuser img[src*="syndicated.gif"]{background-image: url() !important}
.ljuser img[src*="newsinfo.gif"] {background-image: url() !important}
.ljuser img[src*="partnercomm.gif"]{background-image: url() !important}
.ljuser img[src*="sponcomm.gif"] {background-image: url() !important}
img[src*="anonymous.gif"] {background-image: url()}
img[src*="openid-profile.gif"] {background-image: url()}
img[src*="userinfo.gif"] {background-image: url()}
img[src*="talk/none.gif"] {background-image: url()}
img[src*="help.gif"] {background-image: url()}
img[src*="pencil.gif"] {background-image: url()}
img[src*="btn_edit.gif"] {background-image: url()}
img[src*="upgrade-paid-icon.gif"] {background-image: url()}
.ljuser img {width: 0; height: 0; background: transparent url() no-repeat center left; padding: 10px 10px 0 2px !important; vertical-align: baseline !Important}
.ljuser img[src*="userinfo.gif"] {background: transparent url() no-repeat center left !important; padding: 10px 10px 0 2px !important}
.ljuser img[src*="community.gif"] {background: transparent url() no-repeat center left !important; padding: 10px 10px 0 2px !important}
3. What the hell am I replacing anyway?
The images, what they do and where you'll find them. I've split this up into "basic" and "plus" based on what you need to change for your own account type. In the codes above you'll notice they've been split into groups. The penultimate group only applies to plus or paid account users. That is, everything from btn_del to btn_edit in Flexible Squares, and anonymous to btn_edit in Smooth Sailing.
All account levels
.ljuser img[src*="userinfo.gif"]The user icon as it appears in entries, headers, and in the control strip..ljuser img[src*="community.gif"]The community icon as it appears in entries, headers, and in the control strip..ljuser img[src*="syndicated.gif"]The feed icon as it appears in entries, headers, and in the control strip..ljuser img[src*="newsinfo.gif"]The icon for the LJ news community..ljuser img[src*="partnercomm.gif"]The icon for partner communities as it appears in entries, headers, and in the control strip..ljuser img[src*="sponcomm.gif"]The icon for sponsored communities as it appears in entries, headers, and in the control strip.img[src*="icon_protected.gif"]The icon for friends-locked entries as it appears in the subject header and sidebar.img[src*="icon_private.gif"]The icon for private entries as it appears in the subject header and sidebar.img[src*="icon_groups.gif"]The icon for entries locked to certain friends groups, as it appears in the subject header and sidebar.img[src*="upgrade-paid-icon.gif"]Appears in the contextual pop-up
Plus/Sponsored and Paid Accounts
img[src*="btn_del.gif"]The delete button on the comments.img[src*="btn_scr.gif"]Appears on the comments. Allows the user to screen comments, ie. hide them from view from anyone but the entry posterimg[src*="btn_unscr.gif"]Appears once a comment has been screened in place of the screen button. Clicking on it will unscreen the comment.img[src*="btn_freeze.gif"]Appears on the comments. Freezes the comment, ie. prevents further replies to commentimg[src*="btn_unfreeze.gif"]Appears once a comment has been frozen in place of the freeze button. Clicking on it will unfreeze the comment.img[src*="btn_track.gif"]Appears on the comments. Allows user to receive email updates on the progress of a thread.img[src*="btn_tracking.gif"]Appears on the comments once you have chosen to track it. Clicking on will allow you to unsubscribe from thread.img[src*="btn_tracking_thread.gif"]Appears on the children comments of the thread you have chosen to track.img[src*="anonymous.gif"]Appears on the "Post a Comment" page, beside the option to post anonymouslyimg[src*="openid-profile.gif"]Appears on the "Post a Comment" page, beside the option to post using OpenIDimg[src*="userinfo.gif"]Appears on the "Post a Comment" page, beside the option to post using the current logged in userimg[src*="none.gif"]Appears on the "Post a Comment" page, next to the form for the subject line. Meant to imply a neutral subject icon. You'll notice if you click this there is a box that appears with a bunch of options for other subject icons. You can replace these as well, but almost no one actually uses them.img[src*="help.gif"]Appears in the reply form when replying to an entry or comment. Clicking will open links to FAQ pages.img[src*="pencil.gif"]Appears on the "Post a Comment" page when a person is not logged in, or if they wish to reply as another user and click [other] next to the "Logged in user" option.img[src*="btn_edit.gif"]Appears on the comments. Allows a paid user to edit their comments. (I don't have a paid account so I've never experienced this, but I doubt it's a conspiratorial lie)
4. Recommended Icon Sets
I have links here at the resources post, but here are some quick and easy links and previews for you.
FamFamFam
{ here }
pinvoke fugue pack
{ here }
pinvoke diagona pack
{ here }
brand spanking new
{ here }
damnicon's gif icons
{ here }
graphicsbyjulz's tiny icons
{ here }
icojoy's free web development icons #2
{ here }
icojoy's BacktoPixel: free icons #5
{ here }
sweetie basepack
{ here }
Next time on milou_en_avril: putting little images next to your metadata/currents.