Declutter style=mine

[noracharles]

I like a very clean and simple reading page, so I use style=mine all the time.

afuna taught me this:

If a user's posts or comments show up a lot in your journal or reading page, and you get confused about who it is because they use so many different icons (or their explicit or seizure inducing icons are getting to you), you can put this code in your custom css

Update: runpunkrun supplies a code which will work in more lay-outs in this comment Thank you!

.userpic a { background-repeat: no-repeat; width: 110px; height: 110px; background-position: 4px 4px;}

.poster-username .userpic img { display: none; }
.poster-username .userpic a { background-image: url("the url of the icon you want"); padding-right: 100px; padding-bottom: 100px; }

Where it says .poster-username you have to put the real username of the user whose icon you would like to stay the same, for example .poster-noracharles

Where it says url("the url of the icon you want") you have to put a real url of an icon you think you can consistently recognize as belonging to the user, for example url("http://www.dreamwidth.org/userpic/111635/163307")

Where it says padding-right: 100px; you have to put the width of the icon you have chosen, which may be 100px or less, and where it says padding-bottom: 100px; you have to put the height of the icon.

Add as many users as you want, as long as their usernames do not contain a disallowed character string, like "eval". (You don't have to repeat the .userpic a command.)

ETA: Thank you poulpette for the addition of padding, which will make the code work in more styles.

---

If you get confused about the meta data, like mood, location and music you can remove it from view by putting this in your custom css:

.metadata {display: none;}

ETA:
From poulpette in comments: (paraphrased badly by me, you had better read poulpette's precision here)
To hide mood, location and music but leave the crossposted footer visible:

.metadata-label {display: none;} (Hides "Mood:" etc)
.metadata-item {display: none;} (Hides "Excited" etc)
.metadata li img {display: none;} (Hides the mood image)

Of course you can always see the original icon and original meta data by not using style=mine.

Comments

[kareila]

This is a great idea. I'm now using it to enforce a single userpic on all entries in a particular community, without having to turn on the style option for using community userpics in all communities.

To do that, substitute journal-communityname for poster-username.

[afuna]

Oh nice, I'm glad that you've found it so useful!

[noracharles]

Very! :-D

[holyschist]

I am really impressed by all the cool things you can do with custom CSS that I never knew about!

[matgb]

I like the idea of the hiding metadata, but...

It'll also hide crosspost links, which are metadata, and I like them. Then, they're a new feature, so they'll get fiddled with.

Don't feel the need to hide icons, but nice to know you can do it.

[foxfirefey]

There are enough CSS classes available to only hide some of the metadata, and only on reading pages, too.

[poulpette]

You can probably use the following to show the crossposts links even if you use the above mentioned technique:

span.metadata-label-xpost, span.metadata-item-xpost {
    display:visible;
}

I haven't tested it, but it should work in theory.
Though I advise to hide .metadata-label, .metadata-item rather than .metadata.

[matgb]

Smartarse.

I knew this, honest. My brain was just, um, somewhere else.

[matgb]

The latter is probably the best plan, hide the indivdual items I dislike instead of all of it. I already hide writers block on LJ. Danke.

[poulpette]

Oh, that's a good idea, to hide/change icons on a per user basis through CSS.

[noracharles]

Thank you for your comment!

I tried hiding .metadata-label, .metadata-item first, because that's what I was able to find in the code (I don't know much about how to use css), but I couldn't figure out how to hide the mood image.

I tried img.metadata and other shots in the dark, but couldn't guess it. Can you tell me how to hide the mood image?

[foxfirefey]

Aw man, I wasn't trying to be a smartarse--sorry if I was too curt! My feeling was one of being excited about having SO MANY S2 CSS classes, that make that possible, than anything else, and I knew you were smart enough to find them!

[matgb]

Heh.

Smartarse is a compliment in this household. Think that icon might be too easily misconstrued, ah well.

[ellia]

Thank you so much for sharing this. Animated and blinking icons tend to give me a headache and i usually just adblock them. This will make following long threads so much easier.

[poulpette]

I'm exhausted, so I'm going to guestimate what I think is the correct combination, if it doesn't work, just poke me and I'll get back to you with a real fix once I've had a couple hours sleep.

Should be .metadata li img {display:none;}. Oddly enough the mood img isn't wrapped in the span.metadata-mood-content tag, nor has it a .metadata-mood-img class. Hmm maybe it should.

Lemme know if it works or not.

[noracharles]

It works :-D
Thank you!

[noracharles]

You're welcome :-)

[noracharles]

Yes :-)
♥ afuna

[marahmarie]

That is perfectly awesome CSS! I don't really need it on Dreamwidth yet, since most icons 'round here aren't too eye-killing to date, but on LJ it would come in handy, especially on News posts where the sheer over-abundance of blinking, flashing, scrolling icons literally kills me.

[poulpette]

Hi! I just saw your ETA, and I wanted to add a precision:
Without specifying which section to hide ( by adding -{type} after either .metadata-label or metadata-item) this will hide all metadata labels or items, xpost links included. Type can take the following values: mood, music, location, xpost

You can still use .metadata-{label|item} {display:none} to hide everything and then, to selectively show some of them, use .metadata-{label|item}-{mood|music|location|xpost}{display:visible;}.

I was advising avoiding to hide the whole .metadata block mostly to avoid messing with the overall look of the entry in case some of the spacing was dependent of this block.

[noracharles]

Thank you!

[runpunkrun]

If I'm understanding correctly, this code should replace a user's icon on my reading page with the icon I choose, right? Except it doesn't seem to be working for me. In Modish, it gets rid of the user's icon but doesn't replace it with anything. I tried it with two different users and two different icons and I got the same result.

[noracharles]

Yes, that's right. I looked at your code, and I don't see the custom css you added - I guess because it didn't work. Try cut and pasting this exactly, and let me know if it works:

.userpic a { background-repeat: no-repeat; width: 110px; height: 110px; background-position: 4px 4px;}

.poster-lucitania .userpic img { display: none; }
.poster-lucitania .userpic a { background-image: url("http://www.dreamwidth.org/userpic/131637/139199"); }

That should change the icon of the first commenter on the top entry in your journal.

[runpunkrun]

Hi! Thank you for the help.

After I changed my preferences to show entry pages in my journal style rather than the site layout, I got the same result as from my reading page -- it disappears the icon without replacing it.

I even tried changing my layout to "Blanket" and added the css and reloaded, but got the same result.

I left in the css this time in case I'm somehow failing at copy and paste. :/

[noracharles]

I'm really sorry, I don't know why it's not working. I cut and pasted the code from your code to my custom css, and it worked perfectly, so you definitely did cut and paste it correctly. I only know the bare minimum about style sheets, so I can't trouble shoot beyond that.

I'm using Transmogrified Basic, so maybe it's because we have different journal styles. I think they'll be able to figure it out and give you some code which will work in your layout if you ask in support.

[runpunkrun]

Thanks for trying! I looked at it in Opera, too, and I had the same problem, so it's not my creaky old copy of Firefox. It must just be the layout.

[noracharles]

Thank you for your help with the icon substitution code in Suggestions. I have added your solution to the entry :-)

[runpunkrun]

Just in case anyone else was having the XTREME trouble I was getting this to work in their layout, ninetydegrees got it to work for me with the following CSS:

.poster-username .userpic img {
        background-image: url(http://URL);
        background-repeat: no-repeat;
        height: 0;
        padding: 100px 100px 0 0;
        width: 0;
        }

.entry .footer {
        clear: both;
        }