InsaneJournal

Tweak says, "I'm a scene."

Suzaku Kururugi (black_as_knight) wrote in marina_ooc,
@ 2009-07-21 18:02:00

Entry tags:

cool stuff, design and coding

Tiny Icons For Your Layouts
A small set of tiny icons by Sarah-Dipity at DeviantArt, to replace the ones that show up on your journals. Use them with the layouts I've made, or any other layout. I think they're adorable, personally.

Preview
User Icon:
Community Icon:
Private Journal Entry Icon:
Protected Journal Entry Icon:

Paste this into your Custom Stylesheet box:

/* Tiny icons by Sarah-Dipity@DeviantArt! */

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="userinfo.gif"], img[src*="community.gif"], img[src*="pencil.gif"] {
height: 0;width: 0;background: transparent none no-repeat bottom right; padding: 0;
}

.entry-header img {
vertical-align: middle !important;
}

img[src*="icon_protected.gif"] {
background-image: url(http://i29.tinypic.com/ztghu0.gif);
padding: 0 0 13px 14px !important;
margin-right: -4px;
}

img[src*="icon_private.gif"] {
background-image: url(http://i29.tinypic.com/35n51z5.gif);
padding: 0 0 14px 15px !important;
margin-right: -4px;
}

img[src*="userinfo.gif"] {
background-image: url(http://i30.tinypic.com/5vn7m9.gif);
padding: 0 0 12px 14px !important;
}

img[src*="community.gif"] {
background-image: url(http://i25.tinypic.com/ngr5o6.gif);
padding: 0 0 14px 15px !important;
}

img[src*="pencil.gif"] {
background-image: url(http://i28.tinypic.com/nnkvtg.gif);
padding: 0 0 13px 13px !important;
}

.ljuser img {
width: 0;
height: 0;
vertical-align: baseline !important;
}

.ljuser img[src*="userinfo.gif"] {
background: transparent url(http://i29.tinypic.com/rm1fsp.gif) no-repeat right bottom !important;
padding: 12px 7px 0 0 !important;
margin: 0 1px 0 2px !important;
}

.ljuser img[src*="community.gif"] {
background: transparent url(http://i30.tinypic.com/10ye2ph.gif) no-repeat right bottom !important;
padding: 8px 9px 0 0 !important;
margin: 0 1px 0 2px !important;
}

ETA: Oh, and yeah. I obviously credited Sarah-Dipity in the code there, so don't remove it if you use this set. X3 These are her icons...! I in no way claim credit for their awesome applicability to any layout.

(Post a new comment)

	ex_counterfe995 2009-07-22 01:05 am UTC (link)
	I am so grateful for that coding, even though I won't be using those specific icons. Yaaaay~ (Reply to this) (Thread)

	dreamingknight 2009-07-22 01:11 am UTC (link)
	♥ (Reply to this) (Parent)

	shellsnicecream 2009-07-22 08:02 pm UTC (link)
	Where exactly do I post it in the box? Before or after the style layout? And a;dslkfja;dskjf;a thank you so much for this! ♥ (Reply to this) (Thread)

black_as_knight
2009-07-22 08:28 pm UTC (link)

I always do it before, but it really doesn't matter. ♥

An additional breakdown for you, since you're doing it on your own:

the .lj-user version of certain icons goes wherever you do the <lj-user=""> code -- i.e., in the normal flow of your entries.

The non-.lj-user version of certain icons goes, like, on your "post comment as" page. (The icon next to Logged in user: name.) I should probably also provide anonymous and openID gifs just for this purpose, but here's your code for adding them if you've made some.

First, replace the top block with:

img[src*="icon_protected.gif"], img[src*="icon_private.gif"], img[src*="userinfo.gif"], img[src*="community.gif"], img[src*="pencil.gif"], img[src*="anonymous.gif"], img[src*="openid-profile.gif"] {
height: 0;width: 0;background: transparent none no-repeat bottom right; padding: 0;
}

and then, anywhere, add:

img[src*="anonymous.gif"] {
((background-image, padding, and margin settings go here))
}

img[src*="openid-profile.gif"] {
((background-image, padding, and margin settings go here))
}

You'll also want to adjust the padding so that it matches your icon heights and widths (padding: 0 0 13px 14px translates into padding: top right bottom left, clockwise, so top and bottom padding would give an icon height, and left and right padding would give an icon width), and possibly also change the margin if there isn't enough space between your icon and your text.

(Reply to this) (Parent) (Thread)

	black_as_knight 2009-07-22 08:30 pm UTC (link)
	Oh, and the reason why I didn't add these icons already is that they should only ever show up for paid account users. (Like I mentioned above, only paid account users get custom comment pages, so otherwise you'll always see the "Post Comment as..." page in your general IJ site scheme.) (Reply to this) (Parent) (Thread)

	shellsnicecream 2009-07-22 08:34 pm UTC (link)
	So if you're not paid, you get the crazy face and have to learn to like it? (Reply to this) (Parent) (Thread)

	black_as_knight 2009-07-22 08:37 pm UTC (link)
	Actually... (Reply to this) (Parent)

	black_as_knight 2009-07-22 08:38 pm UTC (link)
	You can totally fix that here. (Reply to this) (Parent)

	black_as_knight 2009-07-22 08:38 pm UTC (link)
	Let me know if you don't have Firefox, I'll dig up workarounds. X3 (Reply to this) (Parent) (Thread)

	shellsnicecream 2009-07-22 08:39 pm UTC (link)
	totally has firefox. clicking on link naow ♥ (Reply to this) (Parent)

	zombierepellant 2009-07-27 08:15 pm UTC (link)
	it's waaaay better than seeing that ugly freaking IJ logo.. face.. guy... so thanks ♥ (Reply to this)