InsaneJournal

Tweak says, "Anus"

run. run, you clever boy. and remember. (souffle) wrote in rp_tutorials,
@ 2011-10-30 15:47:00

with some layouts I know people like have minicons replacing the usual (and plain ugly) userinfo/comm icons. and I've managed to transplant the coding for that from one layout to the layout i'm wanting to use (because i'm fairly okay when it comes to modifying most css coding through trial and error).

but i was wondering if anyone here might be able to tell me how to change the icons that denote whether an entry is private or friends only? ...because the eye and lock icons IJ has are ugly :/

thanks for any help :D

edit to make it easier here's the layout code i'm using. :)
edit2 also worded my question a bit better, im not always so good at the explaining/asking of things

FRIENDS_OPT_ITEMS=>10

FRIENDS_WEBSITE<=

<div id="sidebar">
<li><a href="http://crackers.insanejournal.com/">  T H E  M O S T  R E C E N T</a></li>
<li><a href="http://crackers.insanejournal.com/friends/">  T H E  F R I E N D S  P A G E</a></li>
<li><a href="http://crackers.insanejournal.com/calendar/">  T O  T H E  A R C H I V E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  P R O F I L E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  I C O N S</a></li>
<li><center><img src="http://i40.tinypic.com/9014pf.gif" width="296">
this little jewel, this little quiet bastion of old times
</li></div>

<div> </div>

<=FRIENDS_WEBSITE

DAY_TALK_LINKS<=
<table class="x">
<tr><td class="comments" colspan="2">
<center>
<a href="%%urlread%%">%%messagecount%% comments %%mc-plural-s%%</a> | <a href="%%urlpost%%">reply</a> | <a

href="http://insanejournal.com/editjournal.bml?%%itemargs%%">edit</a> | <a

href=http://www.insanejournal.com/tools/memadd.bml?%%itemargs%%>memories</a> 
</center></div>
</td></tr>
<=DAY_TALK_LINKS

DAY_WEBSITE<=

<div id="sidebar">
<li><a href="http://crackers.insanejournal.com/">  T H E  M O S T  R E C E N T</a></li>
<li><a href="http://crackers.insanejournal.com/friends/">  T H E  F R I E N D S  P A G E</a></li>
<li><a href="http://crackers.insanejournal.com/calendar/">  T O  T H E  A R C H I V E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  P R O F I L E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  I C O N S</a></li>
<li><center><img src="http://i40.tinypic.com/9014pf.gif" width="296">
this little jewel, this little quiet bastion of old times
</li></div>

<div> </div>

<=DAY_WEBSITE

LASTN_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<br><center>
<a href="%%urlread%%">%%messagecount%% comments %%mc-plural-s%%</a> | <a href="%%urlpost%%">reply</a> | <a

href="http://insanejournal.com/editjournal.bml?%%itemargs%%">edit</a> | <a

href=http://www.insanejournal.com/tools/memadd.bml?%%itemargs%%>memories</a> 
</center></div>
</td></tr>
<=LASTN_TALK_LINKS

GLOBAL_HEAD<=
<title>TITLE HERE</title>
<style>
<!--
body {
background-color: #000000;
font-family: tahoma;
font-size: 8pt;
color: #C4B5AA;
line-height: 15pt;
margin:0; overflow-x:hidden; }

BODY, TD {
text-align: justify;}

table, tr, xmp, div, td, p {
text-align: justify;}

.shadowed img{display:none; }

table table table table .meta {visibility:hidden;position:absolute;top:1px}
table table table table table .meta {visibility:visible;position:relative;top:1px}

table table .index
{background-color: transparent;
 line-height: 4pt;
 font-size: 7pt;
 font-family: georgia, serif;
 color: #0E0D0C;
 text-align:center;
 padding: 0px;
 width: auto;
}

table table table td.meta
{padding: 1px;
 line-height: 4pt;
 font-size: 7pt;}

.entrybox .meta
{background-color: transparent;
text-align:center;
}

tr.caption{display:none }

.shadowed td div{
visibility: hidden;
position: absolute;
top: 1px }

/*YOUR SIDEBAR*/
#sidebar{
position:absolute !important;
top: 15px !important;
left: 100px !important;
width: 300px !important;
height: auto;
visibility: visible;
z-index:1;
font-family: tahoma;
font-size: 8pt;
color: #FFFFFF;
line-height: 15pt; }

html>body #sidebar{
position:absolute !important;
top: 20px !important;
left: 100px !important;
width: 300px !important;
height: auto;
visibility: visible;
z-index:1;
font-family: tahoma;
font-size: 8pt;
color: #FFFFFF;
line-height: 15pt; }

#sidebar img{display:inline; }

/*YOUR ENTRIES*/
table, tr, td, .shadowed {
background-color: transparent;  
font-family: arial;
font-size: 8pt;
color: #FFFFFF; 
line-height: 10pt;}

body {margin-top:-10px !important; margin-top:-15px; }

.content {background-color: #0E0D0C; }

table { 
width: 540px; 
margin-left:450px !important;
margin-right:100%;
font-family: tahoma;
font-size: 8pt;
color: #C4B5AA;
line-height: 15pt; }

table table {width:100% !important; margin:0 !important; background-color:#0E0D0C;} 
table table table {width:auto !important; background-color:transparent;} 
table td {border:0px solid #FFFFFF;}
table, table table td {border:none; padding:1px; background-color: #0E0D0C;}

.shadowed img
/* icons */
{color:#E3DECB; border:none;}
.entrybox 
/* entry border */
{border:0px solid #3F2FB0;  }
.entrybox .index 
/* hiding bracket */
{color:#F6BF96; }

u {text-decoration:none; font-weight: bold; border-bottom:1px solid #8D639A; }
b {color:#8d639a;}

ul
{
list-style-type: none;
padding: 0;
margin: 0;
text-align: center;
width: 300px;
}

li {display:block; background-color: #0E0D0C; text-decoration: none; margin: 0 0 .2em 0;}

a:link, a:active, a:visited{color: #83786E; text-decoration:none;}
a:hover{color:#695D51; background-color:#0A0A09}

td.caption, .subject { 
background-color: #0E0D0C;
font-family: "times new roman", georgia;
font-size:25px; 
color: #C0AEA0;
line-height:25px; 
letter-spacing: 2px;
font-family: georgia, serif;  }

p table table td.caption, .head{ 
line-height:25px; 
font-size: 20px; 
letter-spacing: 2px;
font-family: georgia, serif; }

.comments {
font-size:5pt;
font-family:"georgia";
text-transform:uppercase;
letter-spacing: 2px;
}

.entrybox td.index, .index3 {display: none;}
.index2 {font-style:normal; }

.ljuser img[src="http://www.insanejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(http://i55.tinypic.com/2gxn3t0.jpg) !important;
padding: 6px 10px 6px 1px !important;
}

.ljuser img[src="http://www.insanejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat !important;
background-image: url(http://i53.tinypic.com/2z7kg8j.jpg) !important;
padding: 9px 11px 3px 1px !important;
}

.entry-userpic img[src="http://www.insanejournal.com/img/userinfo.gif"] {
width: 0;
height: 0;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(http://i55.tinypic.com/2gxn3t0.jpg) !important;
padding: 7px 10px 8px 1px !important;
}

.entry-userpic img[src="http://www.insanejournal.com/img/community.gif"] {
width:0;
height: 0;
background-repeat: no-repeat !important;
background-color: transparent !important;
background-image: url(http://i53.tinypic.com/2z7kg8j.jpg) !important;
padding: 7px 9px 3px 1px !important;
}

-->
</style>
<=GLOBAL_HEAD

FRIENDS_TALK_LINKS<=
<table>
<tr><td class="comments" colspan="2">
<div align="right">
<right>
<a href="%%urlread%%">%%messagecount%% comments %%mc-plural-s%%</a> | <a href="%%urlpost%%">reply</a> | <a

href="http://insanejournal.com/editjournal.bml?%%itemargs%%">edit</a> | <a

href=http://www.insanejournal.com/tools/memadd.bml?%%itemargs%%>memories</a> 
</right>
</div>
</td></tr>
<=FRIENDS_TALK_LINKS

LASTN_OPT_ITEMS=>10

CALENDAR_WEBSITE<=

<div id="sidebar">
<li><a href="http://crackers.insanejournal.com/">  T H E  M O S T  R E C E N T</a></li>
<li><a href="http://crackers.insanejournal.com/friends/">  T H E  F R I E N D S  P A G E</a></li>
<li><a href="http://crackers.insanejournal.com/calendar/">  T O  T H E  A R C H I V E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  P R O F I L E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  I C O N S</a></li>
<li><center><img src="http://i40.tinypic.com/9014pf.gif" width="296">
this little jewel, this little quiet bastion of old times
</li></div>

<div> </div>

<=CALENDAR_WEBSITE

LASTN_WEBSITE<=

<div id="sidebar">
<li><a href="http://crackers.insanejournal.com/">  T H E  M O S T  R E C E N T</a></li>
<li><a href="http://crackers.insanejournal.com/friends/">  T H E  F R I E N D S  P A G E</a></li>
<li><a href="http://crackers.insanejournal.com/calendar/">  T O  T H E  A R C H I V E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  P R O F I L E</a></li>
<li><a href="http://crackers.insanejournal.com/profile">  T O  T H E  I C O N S</a></li>
<li><center><img src="http://i40.tinypic.com/9014pf.gif" width="296">
this little jewel, this little quiet bastion of old times
</li></div>

<div> </div>

<=LASTN_WEBSITE

(Read comments) - (Post a new comment)

wastintime
2011-10-30 06:47 pm UTC (link)

I was just wanted to point out that to replace the standard images like the mini-icons and the lock/eye, you just need to know the source URL for the image. For the image you want to replace it with, you'll need the URL and the height/width of the image.

So, in your stylesheet you would have...

img[src="ORIGINAL_IMAGE_URL"] { width: 0; height: 0; background: url('NEW_IMAGE_URL') no-repeat !important; padding: y1 x1 y2 x2; }

Where y1+y2 = height of your new image and x1 + x2 = width of your new image.

(Reply to this) (Thread)

	forsythia 2011-10-30 10:24 pm UTC (link)
	You have just made tweaking images in layouts a million times simpler. Thanks for sharing! (Reply to this) (Parent)

	souffle 2011-10-31 03:27 am UTC (link)
	Oh wow... that is way simpler. I'm definitely gonna have to put that somewhere safe for future use. Thanks :D (Reply to this) (Parent)

(Read comments) -