Log in

No account? Create an account

Previous Entry | Next Entry

On my friends page I choose to turn off icons and use friends colors. The problem I have is that the entry text sometimes goes onto the same line as the user/community name and it looks smooshed.

Normally you have:
entry text text text
text text text

Whereas on some entries here and there I'm getting:
usernameentry text text text
text text text

Live view: My friends page

I've tried fixing it by adding margins into .lj-view friends .user-icon and a few other places but haven't been able to fix it. Any help? Thanks :)

SOLVED! Thanks to the wonderful av8rmike, as usual! :)


( 7 comments — Leave a comment )
Aug. 8th, 2008 03:22 am (UTC)
Applying CSS to the .user-icon class won't do anything because the DIV isn't printed when you turn off userpics in the journal options. It looks like the effect you're seeing might be by design, or the logic in the layout code doesn't cover all combinations. See this post for previous problems with the issue.
I figured out some CSS that you could apply to remove only the userpic, but it uses the advanced CSS selectors, if you're interested.
Aug. 8th, 2008 03:38 am (UTC)
So if I'm understanding this right, in order to keep the .user-icon class and any margins I may want to add I have to turn on userpics in journal options and then apply advanced CSS?

And it would be awesome if you could share the code! I have to say I still don't know much about CSS so I'll be following you if you don't mind :)
Aug. 8th, 2008 03:58 am (UTC)
Yes, you'd have to re-enable userpics on friends page and then apply the CSS (you're still viewing icons on your own pages, right?)

The code would look like this:
.lj-view-friends .user-icon img[src*=p-userpic] {
    display: none;
The trouble is that not all browsers recognize this (IE6 comes to mind). One of these days I may write a patch for the layout, but it might take some time to get it to the people who can do anything about it.
Aug. 8th, 2008 04:24 am (UTC)
Oh I don't mind about IE6 because I'm using Firefox :D

I used your code (thanks!). But I think changing margins isn't helping in the user-icon isn't working. I want to get the text a line after the user/comm. Do you know if there is a class for only the text of the entry (then maybe the margins would work)? I know there's .asset-body but that includes the .user-icon class.
Aug. 8th, 2008 06:12 am (UTC)
I was tinkering around and finally got the friends page exactly how I want it! :D To get the entry text after the line I did a float: none; But using the display: none in the code you gave me gives an ugly ~16px space so I tinkered around... probably not the best way to do it, lol, but here's what I've done to style:

.lj-view-friends .user-icon img[src*=p-userpic] {
margin: -10px !important;
height: 0%;
width: 0%;

.lj-view-friends .user-icon {
float: none;
text-align: left;
padding: 3px 2px 2px 2px !important;
margin: 5px 0px 5px 0px !important;

.lj-view-friends .user-icon img {
margin-top: 0px !important;

Thanks again for that code you gave that allowed me to style! I guess I must be one of the very few who don't like icons on the friends page, heh xD
Aug. 8th, 2008 12:22 pm (UTC)
You're welcome! That's not the prettiest code in the world, but since I didn't have access to your layers I couldn't see what it would look like. Extending the margin across the container is one way to force text below the "icon". Now that you're doing that, you could change float: none to float: left, which should enclose the user and comm name in the colored box.

Awesome icons. <3 The Doctor and Donna.

Edited at 2008-08-08 12:23 pm (UTC)
Aug. 8th, 2008 04:06 pm (UTC)
Oh, I hadn't thought about extending the margin to the container size. That's probably the better way to do it, haha. Made the changes and now it's perfect, yay! :)
( 7 comments — Leave a comment )

Latest Month

March 2016

S2 Help Communities


Powered by LiveJournal.com
Designed by chasethestars