Background image around userpics

[tribulation]

Comments

[tribulation]

Thanks for your response!

heh, I was going to post the userpic part of my css but I actually forgot how to put it in a scrollbox. I swear I used to know how but I'd fell off lj and messing with css for some time and I've forgotten what bare little I know. :(

But here's the code...

.defaultuserpic {
position: absolute; display: block; padding:10px; text-align:center; margin: 15px; float:left; background: #1a1a1a; margin-top: 35px; margin-left:20px;

}
.defaultuserpic img {
margin-top: 0px;
width: 60px;
height: 60px;
border: 0px;

}

.userpic {
position: relative;
float: left;
padding: 7px;
margin-left: 10px;
margin-bottom: 7px;
margin-right: 7px;
margin-top: 7px;
z-index: 10;
border: 5px solid #ffffff;
background: transparent;
background-image:url(http://i41.tinypic.com/68vj7t.png);

z-index: 10;
}

.userpicfriends {
float: left;
padding: 7px;
margin-left: 10px;
margin-bottom: 7px;
margin-right: 7px;
margin-top: 7px;
z-index: 10;
background: transparent!important;
z-index: 15;}
width: 90px;
height: 90px;
margin-right: 5px;
margin-left: 5px;
background-image:url(http://i41.tinypic.com/68vj7t.png);

}

.userpic img{height:90px; width: 90px;}
.userpicfriends font {color: #4D4D4D!important;}
.userpicfriends img {background: transparent!important;height:90px; width: 90px; margin-bottom:5px;}

I've tried adjust the height and length of the userpics and widen the border mainly.

[itisleezone]

Uhm~..well, assuming u don't use default userpic (bcoz I don't see it on ur journal)..n u want ur userpic's image (friends' userpic's image also) comes with width n height each are 90px n its background image's wide is 5px..let's try this CSS Overrides (make sure u have the backup of ur current CSS Overrides first, then delete the CSS Overrides u gave to me above n then copy-paste the CSS Overrides I give to u below)..

.defaultuserpic {
display: none;
}

.userpic {
position: relative;
float: left;
margin: 7px 7px 7px 10px;
z-index: 15;
}
.userpic img {
width: 90px;
height: 90px;
padding: 5px;
background-image:url(http://i41.tinypic.com/68vj7t.png);
}

.userpicfriends {
position: relative;
float: left;
margin: 7px 7px 7px 10px;
z-index: 15;
}
.userpicfriends img {
width: 90px;
height: 90px;
padding: 5px;
background-image:url(http://i41.tinypic.com/68vj7t.png);
}
.userpicfriends font, .userpicfriends a font, .userpicfriends a:hover font {
color: #4D4D4D;
}

Please tell me how it works, okay?! :]
(I hope it works well..)

Ah, n..if u wanna use textbox (for example to put ur CSS Overrides into a scroolbox), simply just do this (throw away the (" ") signs) :
"<"textarea">"
Your text..
"<""/"textarea">"

[tribulation]

Ahhh yes, now I remember textarea, thank you. Good grief, I'm so rusty. Stupid me, I was thinking of the icon next to every entry as the "default userpic" haha.

Yes, the background image now shows up inside my entries, thanks a lot!

Is there any way I can resize the userpic to make them smaller? I'd like more of the background image to show against the icon. I've seen someone do it before but she purged her journal. :\

[itisleezone]

U're welcome~.. So glad to hear that my CSS Overrides works well. ^^

Of course u can! :]
Just modify these parts (the bold ones):

.userpic img {
width: 90px;
height: 90px;
padding: 5px;
background-image:url(http://i41.tinypic.com/68vj7t.png);
}

Change the width n height to < 90px (it'll make the image itself becomes smaller)..n change the padding to > 5px (it'll make the background image becomes wider).

That also goes to friends' userpic's image (".userpicfriends img" part)..

Please tell me again how it works, okay?! :]
(I hope it works well too..)

[tribulation]

Yep!! It worked perfectly. Seriously, thanks so much for your help. I've been trying to tweak that forever!

[itisleezone]

Ah, that's good!
U're welcome~..
^^