InsaneJournal

Tweak says, "Pants are for the weak."

A loving heart is the truest wisdom. (ex_dickens625) wrote in rp_tutorials,
@ 2012-08-19 15:30:00

Entry tags:

question: html/css, question: layouts

Hi all, so awhile ago I posted this layout which has, when you check your friends page journal in community on the one line. What I'm asking is if there's a way to get them on two lines on the friends page such as

journal
community

Does that make sense?

(Read comments) - (Post a new comment)

forsythia
2012-08-19 10:32 am UTC (link)

If I'm not mistaken, you're trying to make the section look like this image shows. To do that, you first need to locate the following section in your code:

.entry-userpic {display:none;
}

Replace it with the following:

.entry-userpic {
width: 104px !Important;
font-size: 10px !important;
text-align: center !important;
}

Now, to make it pretty! Add this to remove the images that indicate journals and communities (the little Tweak etc.):

.entry-userpic img[src="http://www.insanejournal.com/img/userinfo.gif"] {
display: none !important;
}

.entry-userpic img[src="http://www.insanejournal.com/img/community.gif"] {
display: none !important;
}

.entry-userpic img[src="http://www.insanejournal.com/img/syndicated.gif"] {
display: none !important;
}

And then, to remove the word 'in' (such as "

theladyunicorn in

rp_tutorials") while keeping the links visible, which imo makes the section look more balanced, add this:

.poster {
width: 100px !important;
font-size: 0pt !important;
}

.poster a, .poster a:link, .poster a:hover, .poster a:visited {
font-size: 10px !important;
}

Hope this helps, and that it makes sense. I'm half asleep. xD

(Reply to this) (Thread)

	ex_dickens625 2012-08-19 11:01 am UTC (link)
	Thanks.! I'll give it a shot in the morning but it does make sense :) (Reply to this) (Parent)

	ex_dickens625 2012-08-20 08:22 am UTC (link)
	It works so thank you so much :D (Reply to this) (Parent) (Thread)

	forsythia 2012-08-20 12:13 pm UTC (link)
	Glad it works! You're welcome. :) (Reply to this) (Parent)

	elsierenee 2012-08-20 03:55 pm UTC (link)
	Hi there! theladyunicorn was asking this to help me out, so I wanted to say thanks and that it worked! Also, for the 'to make it pretty' section, what if I wanted to change the little icon image instead of remove it? I like it there for the quick link to the user info, so I don't want to remove it entirely, but I definitely want it prettier. (Reply to this) (Parent) (Thread)

forsythia
2012-08-20 05:46 pm UTC (link)

You're welcome. :) And I totally know what you mean about quick access to the profiiles; I use replacement images instead of removing them on some of my journals as well. These codes should work, just replace IMAGE_URL in each one with the image you'd like to use. Be sure to remove the 'to make it pretty' section and replace with these.

This replaces the image for normal journals on the friends page.

.entry-userpic img[src="http://www.insanejournal.com/img/userinfo.gif"] 
    {width: 0; height: 0; padding: 15px 7px 0px 9px !important; background: url(IMAGE_URL) no-repeat top center !important; border: none !important;}

This replaces the image for communities on the friends page.

.entry-userpic img[src="http://www.insanejournal.com/img/community.gif"] 
    {width: 0; height: 0; padding: 15px 7px 0px 9px !important; background: url(IMAGE_URL) no-repeat top center !important; border: none !important;}

This replaces the image for rss feeds on the friends page.

.entry-userpic img[src="http://www.insanejournal.com/img/syndicated.gif"] 
    {width: 0; height: 0; padding: 15px 7px 0px 9px !important; background: url(IMAGE_URL) no-repeat top center !important; border: none !important;}

If you'd also like to replace the images elsewhere in the journal, namely entries, also add these codes.

For normal journal images.

.ljuser img[src="http://www.insanejournal.com/img/userinfo.gif"]
    {width: 0; height: 0; padding: 15px 7px 0px 9px !important; background: url(IMAGE_URL) no-repeat top center !important; border: none !important;}

For community images.

.ljuser img[src="http://www.insanejournal.com/img/community.gif"] 
    {width: 0; height: 0; padding: 15px 7px 0px 9px !important; background: url(IMAGE_URL) no-repeat top center !important; border: none !important;}

For rss feed images.

.ljuser img[src="http://www.insanejournal.com/img/syndicated.gif"]
    {width: 0; height: 0; padding: 15px 7px 0px 9px !important; background: url(IMAGE_URL) no-repeat top center !important; border: none !important;}

(Reply to this) (Parent) (Thread)

	elsierenee 2012-08-20 07:26 pm UTC (link)
	Oooh I did it! And it looks so pretty! Thank you SO much for your help and the easy instructions :D (Reply to this) (Parent)

(Read comments) -