InsaneJournal

Tweak says, "Driver picks the music..."

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?

(Read comments) - (Post a new comment)

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)

(Read comments) -