tiny pixel icons
Tiny pixel icons to replace your user/community/etc icons~
♣ tiny icons - arrows, notebooks, stars, locks and community icons
Download
Click the "download" link next to the set name to download a .zip file with all the tiny icons for that set, or right click and save the individual images, whichever works best for you. Instructions on how to use them in your journal are further down!
tiny arrows ( download )
tiny notebooks ( download )
tiny stars ( download )
tiny locks ( download )
tiny open locks ( download )
tiny community icons ( download )
Note that while I've labeled them "community icons" you can use them for whatever purpose, not just to replace LJ's default community icon~
How-To
⊗ Upload the icons to your own imagehost, or a free one such as photobucket or imageshack.
⊗ If you just want the icon to show up somewhere in your profile/entry, copy/paste the following bit of code, and replace "IMGURL" with the URL for your newly uploaded image:
⊗ To use these icons to replace your layout's default LJ user, community, locked entry, private entry et cetera icons, follow these instructions:
NOTE: This code may not work on all styles and browsers. It will work on Firefox and Internet Explorer 7+. If it doesn't work on your style, try going to your style's community for help.
Go to your Customize Journal page, and click customize your theme. Click Custom CSS, and where it says "Custom Stylesheet", paste the following bit of code:
(this bit of code is necessary to enable it in internet explorer, because internet explorer is lame like that.)
* html span.ljuser{ background-image: url(USER IMAGE URL) !important; padding: wpx xpx ypx zpx !important; background-repeat: no-repeat; background-position: left middle; }
* html span.ljuser img{ visibility: hidden; }
Use this code to replace :
.ljuser img[src="http://p-stat.livejournal.com/img/userinfo.gif"] { background-image: url(USER IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
Use this code to replace :
.ljuser img[src="http://p-stat.livejournal.com/img/community.gif"] { background-image: url(COMMUNITY IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
Use this code to replace :
.ljuser img[src="http://p-stat.livejournal.com/img/syndicated.gif"] { background-image: url(SYNDICATED IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
Use this code to replace :
.ljuser img[src="http://p-stat.livejournal.com/img/newsinfo.gif"] { background-image: url(NEWS IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
Use this code to replace :
#summary .SummaryList img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] { background-image: url(LOCKED ENTRY IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
.entryHeaderSubject img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] { background-image: url(LOCKED ENTRY IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
.daysubjects img[src="http://p-stat.livejournal.com/img/icon_protected.gif"] { background-image: url(LOCKED ENTRY IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
Use this code to replace :
#summary .SummaryList img[src="http://p-stat.livejournal.com/img/icon_private.gif"] { background-image: url(PRIVATE ENTRY IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
.entryHeaderSubject img[src="http://p-stat.livejournal.com/img/icon_private.gif"] { background-image: url(PRIVATE ENTRY IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
.daysubjects img[src="http://p-stat.livejournal.com/img/icon_private.gif"] { background-image: url(PRIVATE ENTRY IMAGE URL) !important; padding: wpx xpx ypx zpx !important; }
Where it says "BLAH BLAH IMAGE URL", remove that and paste the URL for where you uploaded your custom icon.
Notice where it says "padding: wpx xpx ypx zpx"? For those unfamiliar with CSS, this portion of the code will add space around an element - in this case, the image. Changing w will change the space on top, x will change the space to the right, y to the bottom, and finally z to the left.
Conveniently, most of the time icons will look good if you add in the following values: HEIGHTpx WIDTHpx 0px 0px, where height is the height of the image and width is, obviously, its width. So if your icon is 12 pixels tall and 7 pixels wide, your padding should be 12px 7px 0px 0px. You can check height and width of an image by right-clicking on it and picking "Properties" from the drop-down menu. In case your icon is too close to the text, you can add a couple of pixels to the "width" value, and it'll look better.
⊗ If you want to add an open lock to indicate your entries are public, things are a little more complicated. You'll need a paid account, and some knowledge about layers. leeds11 wrote a function which can be found here, which should be pasted in your style's layer, and it'll include a custom image in the subject line for your entries when there's no security level. You can also specify custom images for other security levels with it, including custom filters. It works in Smooth Sailing; I'm not sure whether or not it'd work in other layout formats.
⊗ Do not direct link these images.
Feel free to edit them to better suit your layouts!
As usual, credit and comments are loved, but not necessary. If you do credit, please link back to angeling or mirukubox, please!