InsaneJournal

Tweak says, "Te amo."

sunnybank (sunnybank) wrote in rp_tutorials,
@ 2010-10-14 11:26:00

Friends page generator user pic
How do I edit the user pic on my friends' page? I figured out how to fix the problem of the text squishing right against it but I can't change the background-colour nor margins of the user pic 'frame'.

And is there any way to get rid of it?

(Post a new comment)

enigmalea
2010-10-17 05:21 pm UTC (link)

I'm not sure what you're trying to get rid of, but I'll give it a shot:

The code that can manipulate the table that makes up the frame is . Using that, you can change the background color and the width of the frame. The best you can do is make the background color match the background of the rest of your tables, because using "display: none;" will take out the entire table entry.

You can also manipulate the individual elements that make up that portion of the entry. allows you to manipulate the userpic itself, and works on the friends journal links.

Hope that helps!

(Reply to this) (Thread)

sunnybank
2010-10-19 07:39 pm UTC (link)

Thanks for responding!

I'm more used to tweak-and-experiment to see what I can do in editing the Generator code I use in this journal so I'm sort of dumb and dumber about implementing some of the code. I don't necessarily know all the terms of what each section is called, if that makes any sense?

Anywho, what I want to know about possibly changing is the appearance of the user's icon as it appears on my friend's page. http://sunnybank.insanejournal.com/friends

I figured out how to stop the text from being squished right next to the image. I would like to eliminate or change the colour of the white background colour which forms a border around the user icon, likewise the colour of the text seems to be formatted to be black and I don't know how to change that either. I found the 2nd and 3rd bits of coding you have above but I must not have put them in the right place because I didn't see that they did anything.

I don't know how much time you have for this but would it help to c&p my CSS which I'm using?

(Reply to this) (Parent) (Thread)

enigmalea
2010-10-19 10:15 pm UTC (link)

I pulled up the code you have using view source. Sorry for the gold text, it's just my theme in my browser.

Anyway, to change the background color of the frame, you're going to edit the "table table table" tag which I've put a box around in the picture below.

You need to add a "background-color: COLOR HERE;" tag to that bit of code. For example, if you want your background to match the color of your entries it should look like this:

You can change that background color code to any color you want.

Now, to change the links beneath the userpic you need to add the following code to your style sheet (between the GLOBAL_HEAD and style tags, where you have everything else defined):

You can add or subtract any text-manipulating codes to that tag and it should affect those links.

Also, just a few other things I noticed while looking at your code:

1) Something that might help you/others debug in the future - duplicate tags can be melded into one overall tag. For example you have this bit of code way up in your global head:

And just a few bits of code later you have:

You can actually move that margin-top to the first bit of code. Anything that has the same tag (i.e. body{ } in the above example or if you have two a:link{ } tags or whatever) can be put into one part. It's sort of important when you start piecing together code to condense it as much as possible, because you can end up with two conflicting codes without realizing it if you don't.

2) Your alignment of your entries was way off in Google Chrome. I noticed it when I snuck in to take a peak at your code at work. The image below is a screenshot:

It looks fine to me in Opera, IE, and Firefox, so it's just Chrome that's being buggy. I'm not sure how to fix it, though so you might want to play with the code a bit.

Sorry for the premature post earlier, my dog decided jumping on my laptop was a good idea.

(Reply to this) (Parent)

sunnybank
2010-10-21 05:34 am UTC (link)

Thank you very much for all the time to help me out. I will try what you suggest. You have made it as clear as can be even for someone like me who's a bit dense about CSS but wants to experiment with it anyway.

Oh too bad about Chrome. But that will have to wait until I have time to do some more research for me to try and suss it out. (and until I get the opportunity to download it) It took me long enough to get the code to work in both IE and Firefox and I'm good at pretending I know what I'm doing in those browsers, haha.

Thank you again. I really appreciate it.

(Reply to this)